Guide · Updated October 2026

Modern Responsive Web Design: Mobile First, Fluid Layouts and Container Queries

How modern websites are built to work on every screen in 2026: mobile first strategy, fluid typography with clamp(), CSS grid, container queries, responsive images in AVIF, and accessible touch design.

Most visits to small business websites now come from phones. Google indexes the mobile version of your site first. Yet many sites are still designed on a wide desktop screen and squeezed down afterwards. Modern responsive design flips that around and uses CSS features that make layouts adapt smoothly to any screen, not just a few fixed breakpoints.

Mobile first, properly

Mobile first means writing the base styles for the smallest screen and adding complexity as space allows, using min-width media queries. It forces clear priorities: the most important content and the main call to action come first. On a phone that usually means what you do, where, the price signal and one tap to call, WhatsApp or book.

Fluid typography with clamp()

Instead of jumping font sizes at breakpoints, set them to scale smoothly between a minimum and maximum:

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

The heading never drops below 2rem or grows past 3.5rem, and scales with the viewport in between. Combine with relative units so text respects a visitor's browser zoom and font settings.

Intrinsic layouts with CSS Grid

CSS Grid can create card layouts that reflow on their own with no media queries:

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

Cards sit one per row on a phone, two on a tablet and three or four on a desktop, filling the space evenly.

Container queries: components that adapt to their space

Media queries respond to the viewport. Container queries respond to the size of the element's parent, now supported in all major browsers. A card can switch to a horizontal layout when its container is wide, whether it sits in a sidebar or the main column.

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 200px 1fr; }
}

This makes components truly reusable and avoids fragile page-level overrides.

Responsive images that do not waste data

Modern formats: AVIF and WebP are typically much smaller than JPEG at similar quality. Use the <picture> element to fall back gracefully.
Right size per screen: srcset and sizes let the browser pick the smallest file that looks sharp.
Lazy load below the fold with loading="lazy", but never the hero image.
Always set dimensions or aspect-ratio to prevent layout shift.

Viewport units and the mobile browser bar

On phones, the address bar grows and shrinks as you scroll, which made the old 100vh unreliable. Use the newer units: svh for the small viewport, lvh for large and dvh for dynamic. A hero set to min-height: 100svh fits the screen without being cut off.

Touch friendly and accessible

Tap targets of at least 44 by 44 CSS pixels, with space between them.
Body text around 16px or larger, with comfortable line height.
Colour contrast that meets WCAG AA.
Visible focus styles for keyboard users.
Respect prefers-reduced-motion and switch off non-essential animation.
Use tel: links and sticky contact buttons so customers can act with one thumb.

Performance is part of responsive design

A layout that looks right on a phone but takes five seconds to appear on mobile data is not responsive in any useful sense. Keep JavaScript light, inline critical CSS, prefer system fonts or self hosted fonts and test on a mid-range Android phone over 4G, not just a fast laptop.

Testing checklist

Resize the browser from 320px to 1920px and check nothing breaks or scrolls sideways.
Test on at least one real iPhone and one real Android phone.
Run Lighthouse on mobile and aim for 90 or above.
Zoom to 200% and confirm content still reads and works.
Navigate with only the keyboard.

The bottom line

Modern responsive design is less about breakpoints and more about layouts that adapt by default: fluid type, intrinsic grids, container queries, efficient images and touch friendly controls. Build that way from the start and your site works on every screen your customers use.

Frequently asked questions

What is the difference between responsive and mobile first?

Responsive means the layout adapts to any screen. Mobile first is a way of building responsive sites: design for the smallest screen first, then enhance for larger ones.

Are container queries supported in all browsers?

Yes, size container queries are supported in all current major browsers, including Chrome, Safari, Firefox and Edge.

Should I use AVIF or WebP?

Both are good. AVIF often produces smaller files, while WebP encodes faster. Serving AVIF with a WebP or JPEG fallback through the picture element is a solid approach.

What breakpoints should I use?

Let content decide. Add a breakpoint where the layout starts to look wrong, rather than targeting specific device widths. Grid and container queries reduce how many you need.

Want a website that brings you customers?

Tell us what you do on WhatsApp and we will send a fixed quote and a free mockup.

Get my free mockup

Our products

Starter website$99 setup, $15 a month Business website$249 setup, $29 a month Premium website$499 setup, $59 a month Website RescueFix a slow, broken or hacked site Free speed testCheck your site in seconds Sample websitesSee designs for your industry

Website design near you

Website design in London Website design in New York Website design in Sydney Website design in Boston Website design in Washington DC Website design in Geneva Website design in Perth Website design in Gothenburg Website design in Chicago Website design in The Hague All cities →

SiteDrum home · All guides · Sitemap · Contact us