Responsive design: why it still matters and what actually gets measured

“Is it responsive?” is one of the questions we get most and one of the least informative. It almost always means “does it look right on a phone”, and the honest answer is that the phone does not exist: what exists are windows of any width, on screens of any density, with proportions running from square to ultrawide.

Designing for that is not making two versions. It is accepting that you do not know the size and building accordingly.

The measurement that governs is not the device

First thing worth dismantling: a website does not adapt to your monitor, it adapts to the gap the page fits into. That gap is smaller than the screen — it subtracts tabs, address bar, scrollbars — and it changes whenever someone splits the screen between two windows, which on desktop happens constantly.

So decisions are made on window width, not on device categories. If you want to see the difference on your own machine, this page shows both figures at once: your screen resolution and the space actually left to the page. On a large monitor the second is usually less than half the first.

Breakpoints come from the content

The old way of working was to pick three widths — phone, tablet, desktop — and lay out for them. It aged badly, because every year brings devices that land right between them.

The way that holds up is the reverse: stretch the design until something breaks, and put the breakpoint there. A headline that wraps badly, a table that overflows, three columns that get too narrow to read. The content decides the cut, not a catalogue of devices.

Something else has changed the work for real: container queries. They let a component react to the width of the space it sits in, rather than the window. A card can know it is in a narrow column even with the browser maximised, which is exactly the problem media queries never managed to solve.

Density: why your image looks soft on a new phone

Modern screens draw two or three physical dots for every pixel a website measures with. That is what makes text look sharp — and what makes an image uploaded at the exact size it displays at look soft.

The working rule is to upload images at twice the size they display at, and no more. Your own screen’s density also appears on the resolution page; the rest — formats, weights and sizes per image type — is in the image guide.

Aspect ratio: the detail that stops the page jumping

When a browser meets an image or a video with no declared dimensions, it does not know how much room to reserve. It paints the text, downloads the image, and shoves everything down once it finally knows the size. That jump has a name — cumulative layout shift — it is one of the three metrics Google measures as page experience, and it is why you sometimes tap the wrong button.

The fix is declaring the proportion up front, with aspect-ratio or with width and height attributes, so the space is reserved from the first paint. To work out that proportion, or to resize without distorting, we have the aspect ratio calculator, which also hands you the CSS ready to paste.

And a framing recommendation: in a grid of products or articles, force the same proportion on every image. A grid where each card is a different height reads as carelessness, even when each photo on its own is perfect.

What gets forgotten most often

A finger is 44 pixels wide. Anything tappable below that size gets missed. On desktop it goes unnoticed because a mouse is precise; on a phone it is the difference between buying and closing the tab.

Type can flow. With clamp() text grows with the window between a minimum and a maximum, without needing a breakpoint per size.

Height exists too. A phone in landscape has under 400 pixels of usable height. A hero that fills the screen hides everything else there.

Zoom at 200%. Someone with low vision zooms in, and zooming in is the same as narrowing the window. A design that survives a phone survives zoom: they are the same problem.

How do you check without guessing?

Three things, in this order:

1. Drag the window edge slowly, wide to narrow, and watch where something breaks. More useful than jumping between preset sizes, because failures are almost never at round widths.
2. Use device mode in developer tools for what a window cannot simulate: touch pointer, pixel density and user agent.
3. Open it on a real phone, on mobile data, one-handed. That is where the problems no simulation shows up appear: real weight, sunlight and hurry.

---

A responsive site is not one that has a mobile version. It is one that assumes nothing about the screen of whoever arrives — and that, besides being the right thing, is the only approach that keeps working when the next device format ships.