A short guide to responsive layout

This is cheap to get right at the start and expensive to retrofit. Everything we would tell a client about responsive layout in the time it takes to drink a coffee.

Consistency is the quiet half of design work: it rarely gets complimented, and its absence is noticed immediately. Most teams find the first pass takes an afternoon and the maintenance takes minutes a month.

What is actually at stake

Design for the smallest screen first and let the layout grow. This is the sort of thing that compounds, quietly, in both directions. Budget a little time for it every quarter and it never becomes a project of its own.

How to approach it

Breakpoints should follow your content, not device names. That sounds obvious written down. It is still the thing most often skipped. Write the reasoning down alongside the decision, because the reasoning is what changes first.

Warning signs

Test on a real phone, not just a resized browser window. The reasoning matters more than the rule, because the rule has exceptions. Check it against what you would want a competitor's site to get wrong.

What this looks like day to day

The measurable part of design is whether people can find what they came for and act on it without hesitating. Three things worth confirming about responsive layout before you move on:

• Someone can say what the current setup is without going to look
• Design for the smallest screen first and let the layout grow — and you know whether that is true here
• There is a way to tell whether the last change to this helped

Pick the one that would hurt most if it failed, and start there.