Responsive design

One page, many screens

People read your page on a 5-inch phone, a tablet, a laptop and a 32-inch monitor, in portrait or landscape, with big fonts or small, zoomed or not. You cannot build a separate page for each. Responsive design means building one page that adapts to whatever it meets. In India, most web visits happen on phones, so thinking small first is not a luxury.

The idea has three ingredients, named by Ethan Marcotte in 2010: fluid layouts, flexible media and media queries. Modern CSS has made the first two much simpler.

Step 0: the viewport tag

Every responsive page needs this in the head:

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

Without it, mobile browsers assume a 980-pixel-wide virtual screen and shrink the whole page to fit, so everything looks tiny. With it, the page uses the real screen width, and your CSS can respond to it. Do not add user-scalable=no or maximum-scale=1: they stop people from zooming, which is an accessibility failure.

Fluid layouts

Avoid fixed widths. Let boxes flex with the space:

.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.col-main  { flex: 1 1 24rem; }
img        { max-width: 100%; height: auto; }

• max-width instead of width for containers.
• Percentages, fr units and minmax() for columns.
• rem for text and spacing so they scale with the reader's font size.
• flex-wrap and auto-fit grids so items reflow on their own.

<style>
  * { box-sizing: border-box; }
  .container { width: min(100% - 2rem, 40rem); margin-inline: auto; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
  .grid div { background: #c7d2fe; padding: 1rem; border-radius: 8px; }
</style>
<div class="container">
  <h2>Fluid by default</h2>
  <div class="grid"><div>One</div><div>Two</div><div>Three</div><div>Four</div></div>
</div>

Resize the preview: the layout reflows with no media query at all. Many "responsive" jobs need nothing more.

Flexible media

Images and video should never be wider than their container:

img, video { max-width: 100%; height: auto; }

height: auto keeps proportions. The HTML width and height attributes tell the browser the shape so it can reserve space and avoid layout jumps. For different crops or file sizes, use srcset and picture, which the images lessons covered. Embedded iframes need aspect-ratio plus width: 100%.

Mobile-first

Mobile-first is a way of writing CSS: start with styles for the smallest screen, with no media query, then add min-width queries that layer on extras as space allows.

/* base: phones */
.nav { display: grid; gap: 0.5rem; }

/* tablets and up */
@media (min-width: 48rem) {
  .nav { display: flex; gap: 1.5rem; }
}

Why this works well:

• Phones, often the slowest devices, get the simplest CSS.
• You are forced to decide what really matters when space is scarce.
• Fewer overrides: you add rules instead of undoing desktop ones.

Breakpoints: let the content decide

A breakpoint is a screen width where your layout changes. Common rough values are 40em (about 640px), 48em (768px), 64em (1024px) and 80em (1280px) but there is nothing sacred about them. The best method is to drag the browser narrow and wide, and add a breakpoint where the design starts to look wrong, not at the sizes of today's popular phones.

Touch and readability

Small screens are used with thumbs:

• Make tap targets at least about 44 by 44 pixels with room between them.
• Keep body text at 16px or more (1rem).
• Keep line lengths near 45 to 75 characters using max-width: 65ch.
• Do not hide important content on small screens; adapt it.
• Do not rely on hover; touch screens have none.

Test it for real

1. Browser device mode: in Chrome or Firefox, open developer tools and toggle the device toolbar to try many sizes quickly.
2. Resize the window by hand to find breakpoints.
3. Zoom to 200 per cent and raise the browser's default font size.
4. Real devices: at least one phone. Many bugs only appear there, such as touch behaviour and the shifting browser toolbar.
5. Landscape orientation.
6. Throttle the network in the developer tools to feel a slow connection.

Common mistakes

• Missing viewport tag.
• Fixed widths and heights.
• Disabling zoom.
• Designing only on a big monitor.
• Hiding content on mobile instead of reorganising it.
• Breakpoints based on device names rather than content.

Exercise

Write mobile-first CSS for a page container that is full-width with 1rem padding on phones, and on screens at least 48rem wide is centred at a maximum of 60rem with 2rem padding.

<style>
  * { box-sizing: border-box; }
  .page { padding: 1rem; background: #f1f5f9; }
  @media (min-width: 48rem) {
    .page { max-width: 60rem; margin-inline: auto; padding: 2rem; }
  }
</style>
<div class="page">Responsive container</div>