Responsive web design starts with flexible defaults

A responsive site should adapt to the space it gets. It should not be a desktop layout with a few emergency media queries added after everything starts overflowing.

Three parts do most of the work: flexible layouts, media queries based on the content, and images that do not waste space or bandwidth.

Let the layout stretch first

Start with flexible CSS. Grid and Flexbox can often handle a large range of widths without any breakpoint at all.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

This grid creates as many columns as fit while keeping each card at least 16rem wide. On a narrow screen, the cards naturally collapse into fewer columns.

It is also worth giving images a safe default:

img {
  max-width: 100%;
  height: auto;
}

That stops a large image from overflowing its container. It does not reduce the downloaded file size, but it prevents a common layout problem.

Add breakpoints where the content needs them

Media queries let you change styles when the available space crosses a threshold:

.page {
  padding: 1rem;
}

@media (min-width: 48rem) {
  .page {
    padding: 2rem;
  }
}

Choose a breakpoint because the layout needs one, not because a popular device happens to have that width. Devices change; awkward line lengths and squashed components are easier to spot.

I usually find it simpler to begin with the narrow layout and add changes as more room becomes available. The smaller version then gets the default CSS instead of having to undo desktop styles.

Responsive images solve a different problem

CSS can resize an image visually, but the browser may still download the largest file. The srcset and sizes attributes let it choose a more suitable source:

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(min-width: 60rem) 50vw, 100vw"
  alt="A path through a forest"
>

Use <picture> when the image itself should change, such as using a tighter crop on a small screen. For the same image at several resolutions, srcset is usually enough.

Test the awkward widths

Testing only a phone preset and a wide desktop misses much of the interesting stuff. Drag the viewport slowly, increase the text size, and look for the exact point where navigation wraps, cards become cramped, or controls no longer fit.

Responsive design is not about supporting a fixed list of devices. Build flexible defaults, add breakpoints where the content asks for them, and let the browser choose an image that makes sense for the available space.