Your customers don't think about breakpoints. They think “this is easy to use on my phone” or “this is annoying”. Responsive and adaptive design are two ways of earning the first reaction — and modern CSS has blurred the line between them in useful ways.

Responsive: one layout that flows

A responsive layout stretches and rearranges continuously as the screen changes size. Columns stack, images scale, navigation collapses into a menu. It's one codebase, it handles screens nobody planned for — foldables, tablets in split view, large monitors — and it's the default for good reason.

Its risk is that everything gets designed for desktop and then squeezed. Done carelessly, the phone version becomes a long, narrow column of content that was never really designed for a small screen.

Adaptive: layouts for specific sizes

An adaptive approach designs distinct layouts for a few target sizes and switches between them. It gives more control over each experience — a phone can get a genuinely different layout, not just a narrower one — at the cost of more design and more maintenance, and sometimes awkward moments on the sizes in between.

What customers notice

  • Tap targets — buttons and links big enough to hit with a thumb, with space between them.
  • Readable text — no zooming or sideways scrolling to read a paragraph.
  • Forms — the right keyboard for each field, and inputs that aren't hidden behind it.
  • Speed — the phone version shouldn't download desktop-sized images.
  • Priorities — the most important action is easy to reach on every screen.

None of these depend on which approach you choose. They depend on whether someone designed and tested each size deliberately.

Container queries change the game

Traditionally, layouts responded only to the size of the whole screen. Modern CSS lets a component respond to the space it's actually given. A product card can be compact in a sidebar and generous in a wide grid — on the same page, with the same code.

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

@container (min-width: 28rem) {
  .card-body { display: grid; grid-template-columns: 1fr 1fr; }
}

This brings some of adaptive design's control to responsive layouts: components have deliberate designs for different amounts of space, without needing separate page layouts for each device.

Fluid sizing

Another modern technique is fluid sizing: type and spacing that scale smoothly between a minimum and a maximum, instead of jumping at breakpoints. Headings stay proportionate on every screen and the layout feels designed at every width, not only at the sizes on the mockup.

What we use

Responsive by default, with fluid type and spacing; deliberately designed breakpoints for the moments that matter — navigation, checkout, data-heavy tables; and container queries for components that live in more than one place. Phones get their own design decisions, not a squeezed desktop.