Tags: web-dev ux concept

Responsive Design

Date: 2026-09-27

---

One layout that adapts to whatever space it gets. The modern order of tools: intrinsic sizing first (content and flex/grid decide), fluid values next, container queries for components, and viewport breakpoints last, only for page-level structure. Put breakpoints where the content breaks, not at device widths.

---

Responsive design is building one page whose layout adapts to the available space, rather than separate fixed layouts per device. The term is Ethan Marcotte’s (A List Apart, 2010), and his original recipe was three ingredients: fluid grids, flexible images and media queries. The mechanics underneath — the viewport meta tag, device pixel ratio, viewport units — are in Viewport and Responsive Behaviour; this note is the layout strategy.

The escalation

Reach for each only when the one before can’t do it:

1  INTRINSIC      let content and the layout mode decide
                  flex-wrap · grid auto-fit/minmax · max-width · min()
                  → adapts continuously, zero breakpoints

2  FLUID          interpolate values between two sizes
                  clamp() for type and space
                  → sizes scale smoothly, zero breakpoints

3  CONTAINER      the component asks its own slot
                  @container (min-width: 420px)
                  → correct in every placement

4  VIEWPORT       the page asks the window
                  @media (min-width: 60rem)
                  → page structure only: nav pattern, column count

The shift from Marcotte’s recipe is that media queries moved from being the structure to being the last resort. Jen Simmons called the modern approach “intrinsic web design”: layouts that use the layout modes’ own sizing and only add explicit breakpoints where that runs out.

Mobile-first, and what it means

Write the single-column base styles with no query, then add min-width queries as space allows:

.product { display: grid; gap: 1rem; }              /* base: one column, every screen */
 
@media (min-width: 48rem) {                          /* enough room: image beside details */
  .product { grid-template-columns: 1fr 1fr; }
}

Two reasons beyond fashion:

• The base case is the simplest layout, so the cascade adds complexity rather than undoing it. Desktop-first with max-width queries means writing the complex layout, then overriding it back to simple
• Small screens get the least CSS to evaluate and never get layout they’d then undo

Breakpoints from content

Set a breakpoint where the design breaks, not at the width of a popular phone. Widen the window slowly; when line length gets uncomfortable or a row gets awkward, that’s the breakpoint. Device widths change every year, and a layout tuned to them fails at every width in between.

• Use em or rem in media queries, so a user who has increased their default font size gets the narrower layout their larger text needs
• Two or three page-level breakpoints is typical once components handle themselves with container queries. A dozen means components are being laid out from the page

Beyond width

Responsiveness also covers input and preference, which only the viewport can answer:

@media (hover: hover) and (pointer: fine) { /* hover-reveal is safe */ }
@media (pointer: coarse)                  { /* larger tap targets */ }
@media (prefers-reduced-motion: reduce)   { /* drop the parallax */ }

Screen width is not a proxy for touch. A tablet with a keyboard and a touchscreen laptop both break the assumption — Mobile Interaction Patterns.

Failure modes

• Device breakpoints (375, 768, 1024) that miss the widths in between. Test by dragging, not by switching presets
• Hiding content on mobile. display: none on a small screen still downloads it, and it assumes mobile users want less. Usually the content should be reordered or collapsed, not removed
• Horizontal overflow at 320px, the narrowest width in common use, and at 400% zoom, which behaves the same way — Viewport and Responsive Behaviour
• Separate mobile markup. Two DOMs for two layouts doubles the maintenance and the page weight, and splits analytics for what users think of as one page
• Responsive images forgotten. A fluid layout serving one desktop-sized image to every phone — Image Optimisation

Where it connects

• Grid · Flexbox — step 1
• Fluid Type and Space — step 2
• Container Queries — step 3
• Logical Properties — the other axis of adaptation: writing direction rather than width