How to get responsive layout right
This is cheap to get right at the start and expensive to retrofit. The short answer to responsive layout is that it is mostly a sequence of small decisions, not one big one.
Consistency is the quiet half of design work: it rarely gets complimented, and its absence is noticed immediately. It rarely shows up as a line item, which is exactly why it slips.
Why this earns attention
Design for the smallest screen first and let the layout grow. None of that requires a large budget, only a decision and someone to own it. The version that survives contact with a real deadline is the simple one.
The steps
- Establish what you have today before changing anything
- Breakpoints should follow your content, not device names
- Test on a real phone, not just a resized browser window
- Write down the decision so the next person does not re-litigate it
Test on a real phone, not just a resized browser window. None of that requires a large budget, only a decision and someone to own it. Check it against what you would want a competitor's site to get wrong.
Where to go from here
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
- Test on a real phone, not just a resized browser window — and you know whether that is true here
- There is a way to tell whether the last change to this helped
If you want a second opinion on how yours is set up, ask.