Responsive Web Design

The original triad (Marcotte, 2010) — still the foundation

Fluid grids + flexible images + media queries. Modern additions: container queries (style by component's own width), clamp() fluid type, logical properties (RTL-safe), prefers-* media features.

Try it — resize the mini browser. Drag the width slider, then switch layout modes. The fixed 600px layout clips and forces sideways scrolling on narrow windows; the fluid layout reflows because the content decides where it breaks. Content-out, not device-in.

This demo needs JavaScript. It resizes a mini browser window from 280 to 720px: a fixed 600px layout clips at narrow widths, while a fluid auto-fit grid reflows its cards and wraps its text at every width.

Mini-viewport width

Layout mode Fixed 600px layout Fluid/intrinsic layout

Field notes

Breakpoints belong where the content breaks, not where a device catalogue says.

A layout that only works at one width is a poster, not a page.

Card A

Card B

Card C

Strategy

Mobile-first (Wroblewski, 2011): design/build the narrow view first — it forces prioritization, and enhancement up is easier than graceful degradation down. Write base CSS for small screens; add min-width queries upward.
Content-out breakpoints: set breakpoints where the content breaks (line lengths exceed ~75ch, layouts crowd), not at specific devices. Material 3's window size classes are a sane shared vocabulary across web and Android — now five tiers: compact (<600 dp), medium (600–839), expanded (840–1199), large (1200–1599), extra-large (≥1600). Treat as reference tiers, not rules.
Progressive enhancement: functional HTML core; CSS and JS enhance. Test with slow networks and mid-range hardware (most of the world's traffic), not just your dev machine.
Device-mix reality: mobile is the majority of global traffic and the median device is a mid-range Android, not a flagship. Viewports also change mid-session now: foldables fold/unfold, desktop windows get tiled arbitrarily narrow. Container queries and intrinsic layout handle this better than any device-targeted breakpoint scheme.

Layout mechanics

CSS Grid for 2-D page structure; Flexbox for 1-D component flow; intrinsic patterns (minmax(), auto-fit, flex-wrap) reduce the number of media queries needed ("Every Layout" / intrinsic design approach, Andy Bell & Heydon Pickering).
Relative units: rem for type/spacing (respects user font settings), %/fr for widths, viewport units carefully (avoid 100vh traps on mobile browsers; use dvh).
Fluid type: clamp(min, preferred, max) — but keep a rem component in the preferred value (e.g. clamp(1rem, 0.8rem + 0.75vw, 1.25rem)). Purely viewport-based sizes barely respond to browser text resize/zoom, which can fail WCAG 1.4.4 (text resizable to 200%). Always test the page at 200% zoom, and clamp ranges narrow enough that zooming still grows text meaningfully.
Never lock viewport zoom (user-scalable=no violates WCAG 1.4.4).

Native semantics & new platform features (use them, carefully)

<dialog> + showModal() for modals: top layer, focus management, Esc-to-close for free. popover attribute (cross-browser since 2024) for non-modal overlays — menus, pickers, toasts — with light-dismiss and keyboard handling built in. Prefer both over hand-rolled div overlays; the accessibility semantics come with the platform.
View Transitions API: same-document transitions became Baseline Newly available in late 2025 (Firefox 144 was the last major engine); cross-document (MPA) transitions remain Chromium-only as of early 2026. Treat strictly as progressive enhancement — pages must work identically without them — and gate on prefers-reduced-motion.
Scroll-driven animations (Chromium-shipped; partial elsewhere): scroll-linked motion is a classic motion-sickness and distraction hazard — parallax abuse predates the API. Keep effects subtle, never gate content visibility on scroll progress, and disable under prefers-reduced-motion.

Touch/pointer duality

Same page serves mouse and touch: hit areas ≥44 px, no hover-only functionality (hover as enhancement only), :focus-visible styles for keyboard. Use @media (pointer: coarse) to enlarge targets when relevant. WCAG 2.2 SC 2.5.8 sets a hard 24-px floor (AA); the platform minimums (44 pt / 48 dp) remain the better working target.

Performance is UX

Perceived speed drives satisfaction and conversion (see Doherty threshold, Laws of Interaction Design). Budget with Core Web Vitals (Google's field metrics, judged at the 75th percentile of real-user data): LCP ≤2.5 s, INP ≤200 ms (INP replaced FID as the responsiveness vital in March 2024), CLS ≤0.1. Biggest wins: responsive images (srcset/sizes, AVIF/WebP), lazy-loading below-the-fold media, font subsetting, minimal JS on the critical path, skeleton screens over spinners for content loads (sets structure expectations; convention popularized by Facebook/LinkedIn — evidence is mixed-but-favorable, treat as convention).

Checklist per page

Reading measure 45–75ch at all widths • no horizontal scroll at 320 px • zoom to 200% without loss (WCAG 1.4.4) and reflow at 400% (1.4.10) • targets ≥44 px • works keyboard-only • images have dimensions (no layout shift) • test portrait & landscape • test with reduced motion on.

Sources

Marcotte, E. (2010). "Responsive Web Design," A List Apart #306; and the book (A Book Apart, 2011).
Wroblewski, L. (2011). Mobile First. A Book Apart.
Material Design 3 — Window size classes / applying layout (m3.material.io/foundations/layout).
Google web.dev — Core Web Vitals documentation (web.dev/vitals); web.dev blog on same-document view transitions reaching Baseline (2025).
MDN — View Transition API, Popover API, <dialog> element references (developer.mozilla.org).
W3C WCAG 2.2 — SC 1.4.4, 1.4.10, 2.5.8.
Bell, A. & Pickering, H. Every Layout (every-layout.dev) — intrinsic layout patterns.