Responsive design

Responsive design builds a single layout that adapts continuously to the space available. Ethan Marcotte named the approach in an article for A List Apart in 2010, describing three ingredients: a fluid grid, flexible images, and media queries.

It has been the default approach for over a decade, and largely displaced adaptive design, which serves one of several fixed layouts.

What changed since 2010

The original technique leaned heavily on breakpoints, because CSS had no good layout primitives. Flexbox and Grid changed that: much of what needed explicit switches now happens naturally, and clamp() lets type and spacing scale smoothly between bounds instead of jumping.

Container queries are the more recent shift. A component can now respond to the width of its own container rather than the viewport, which means a card in a sidebar and the same card in a wide column can behave correctly without either knowing about the page.

Where it is not enough

Responsive handles layout. It does not handle context. Someone on a phone at a client site may want a different default view, not a narrower version of the same one. That is a content and prioritisation decision, and it is the part responsive design does not solve for you.

In practice

Test at the awkward widths rather than at device sizes: just before and just after each breakpoint, and at very large widths where a layout with no maximum becomes unreadable.