Responsive Web Design: A Practical Mobile-First Guide

For most websites, the majority of visitors arrive on a phone. Search engines also primarily look at the mobile version of a page when deciding how to rank it. So "responsive" isn't a nice extra; it's the main version of your site.

Here's how to build responsive layouts that hold up on any screen.

Start with the viewport tag

Without this, mobile browsers render your page at a desktop width and shrink it down:

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

Most frameworks include it by default. Check anyway.

Why mobile-first

Mobile-first means writing your base CSS for small screens, then adding styles for larger screens with min-width media queries.

/* Base: phones */
.products { display: grid; gap: 1rem; }

/* Tablets and up */
@media (min-width: 640px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}

/* Desktops and up */
@media (min-width: 1024px) {
  .products { grid-template-columns: repeat(4, 1fr); }
}

Why this order works better:

• Small screens are the harder constraint. Designing for them first forces you to prioritise content.
• Simpler CSS. You add complexity as space grows instead of undoing desktop styles for phones.
• Better performance on phones, which usually have the slowest networks and CPUs.

Let content choose the breakpoints

Don't design for specific devices. There are thousands of screen sizes. Instead, widen your browser slowly and add a breakpoint where the layout starts to look wrong: lines get too long, cards get too wide, navigation gets cramped.

A few well-chosen breakpoints are better than many. And modern CSS often needs none at all:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

(More Grid and Flexbox patterns.)

Fluid sizing with modern CSS

Use relative units and let things scale smoothly:

• rem for font sizes and spacing, so everything respects the user's font settings.
• %, fr, vw and vh for proportional layouts.
• max-width on content, so lines stay readable on wide screens (around 60 to 75 characters is comfortable).
• clamp() for fluid typography:

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

That heading scales with the viewport but never goes below 2rem or above 3.5rem.

Container queries: components that adapt to their space

Media queries respond to the viewport. Container queries respond to the size of a component's container, which is far more useful for reusable components:

.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
}

The same card can appear in a narrow sidebar and a wide main column and lay itself out correctly in both. Container queries are supported in all modern browsers.

Images and media

• Always set max-width: 100%; height: auto; on images so they never overflow.
• Use srcset and sizes so phones download smaller files. (Image optimisation guide.)
• Set width and height attributes (or aspect-ratio) to prevent layout shift.
• Make embeds like videos responsive with aspect-ratio: 16 / 9.

Touch-friendly design

• Tap targets should be comfortably large, roughly 44 to 48 pixels, with space between them.
• Don't rely on hover. Touch screens don't hover. Make sure everything works with a tap.
• Use the right input types (type="email", type="tel", inputmode="numeric") to bring up the correct mobile keyboard.
• Keep forms short. Typing on a phone is slow; every field costs you completions.

Navigation on small screens

Collapsing a menu behind a button is fine, but:

• Keep the most important actions visible.
• Make the toggle a real <button> with an accessible label.
• Make sure the open menu can be closed with the keyboard and doesn't trap scrolling.

(Accessibility basics.)

Testing

• DevTools device mode is great for a first pass. Try odd widths too, not just presets.
• Test on a real phone. Touch, scrolling, keyboards and real network speed behave differently from an emulator.
• Rotate to landscape, try a large system font size, and zoom to 200%. Layouts that survive all three are genuinely robust.

Common mistakes

• Horizontal scrolling caused by a single fixed-width element. Find it by setting * { outline: 1px solid red; } temporarily.
• Text that's too small. Body text should be at least 16px on mobile.
• Hiding important content on mobile instead of reorganising it.
• Heavy desktop images downloaded on phones. (Why is my website slow?)

FAQ

What is mobile-first design?

Writing base styles for small screens, then using min-width media queries to enhance the layout for larger screens. It keeps CSS simpler and prioritises the most constrained experience.

What breakpoints should I use?

Use breakpoints where your content needs them rather than for specific devices. Common starting points are around 640px, 768px, 1024px and 1280px, but adjust to your design.

What is the difference between media queries and container queries?

Media queries respond to the viewport size. Container queries respond to the size of an element's container, so reusable components can adapt to wherever they're placed.