Getting started with responsive layout
The advice here is unglamorous, which is probably why it gets skipped. A short on-ramp to responsive layout for teams who have not touched it before.
Design decisions are the ones clients feel most confident arguing about, which makes it worth separating taste from evidence early. Check it against what you would want a competitor's site to get wrong.
Why it matters
Design for the smallest screen first and let the layout grow. Small and consistent beats large and occasional here. Doing this properly once is usually cheaper than doing it approximately three times.
Your first week
- Find out what is already in place
- Breakpoints should follow your content, not device names
- Change one thing and measure it
Test on a real phone, not just a resized browser window. In practice this is a scheduling problem more than a technical one. Write the reasoning down alongside the decision, because the reasoning is what changes first.
In practice
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
- Breakpoints should follow your content, not device names — and you know whether that is true here
- There is a way to tell whether the last change to this helped
If you are not sure where your systems currently stand on this, it takes us about an hour to find out.