Responsive layout: what to get right first

The advice here is unglamorous, which is probably why it gets skipped. If you only fix one thing about responsive layout this quarter, make it the first item below.

The measurable part of design is whether people can find what they came for and act on it without hesitating. It is worth deciding this deliberately rather than inheriting whatever the last person set up.

Start here

Design for the smallest screen first and let the layout grow. Where this goes wrong is almost never a lack of knowledge. Write the reasoning down alongside the decision, because the reasoning is what changes first.

Then this

Breakpoints should follow your content, not device names. The reasoning matters more than the rule, because the rule has exceptions. Write the reasoning down alongside the decision, because the reasoning is what changes first.

Eventually

Test on a real phone, not just a resized browser window. It is worth being explicit about, because assumptions differ quietly. Assume whoever inherits this will have half your context and none of your patience.

How to tell if yours is fine

Design decisions are the ones clients feel most confident arguing about, which makes it worth separating taste from evidence early. 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

If any of that sounds like a description of your current setup, it is fixable.