Layout & Structure›Extra· 30 min read

Responsive Web Design (Intro)

Make pages look good on phones, tablets and desktops. It starts with one tag in the head.

What you will learn

Add the viewport meta tag
Understand what “responsive” means
Preview how CSS media queries adapt a page

What is responsive design?

Responsive design means a page adapts to the screen it is viewed on — readable on a phone, comfortable on a desktop. Over half of all web traffic is mobile, so this is essential.

Step 1: the viewport tag

The single most important step is this tag in your <head>. Without it, phones shrink your page to an unreadable, zoomed-out mess.

Put this in the <head> of every page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This one <meta> tag tells the phone two things: width=device-width means “make the page as wide as the actual screen” (not a pretend desktop width), and initial-scale=1.0 means “do not zoom in or out to start”. Together they let your page show at a sensible, readable size on mobile.

A taste of adapting layout

CSS media queries apply different styles at different screen widths. Here is a preview (resize the live area to see it react):

A media query reacting to width

<style>
  .box { background:#4338ca; color:#fff; padding:30px; text-align:center; font-size:18px; }
  @media (max-width: 500px) {
    .box { background:#06b6d4; font-size:14px; }
  }
</style>
<div class="box">Resize me — I change colour on narrow screens!</div>

Live preview

The first rule gives .box a purple background. The @media (max-width: 500px) block is a media query: its styles only apply when the screen is 500px wide or less. So on a wide screen the box is purple, and the moment it gets narrow the box turns cyan with smaller text. Drag the preview narrower to trigger it.

Note: Output: A coloured box. On wide screens it is purple with larger text; squeeze the width below 500px and it switches to cyan with smaller text.

Tip: You will go deep into responsive layouts (media queries, Flexbox, Grid) in the CSS module. For now: always add the viewport tag, and use max-width: 100% on images.

Q. Which tag is essential for a page to display well on phones?

Answer: The viewport meta tag tells phones to use the device width instead of zooming out a desktop-sized page.

✍️ Practice

Add the viewport meta tag to a page and open it on your phone (or resize the browser narrow).
Copy the media query example and change the breakpoint width and colours.

🏠 Homework

Open one of your pages on a phone with and without the viewport tag and note the difference.