Responsive design is not about shrinking
How to preserve priority, understanding and interaction quality by changing structure, density and rhythm across different screens.
Published · 5 September 2026Updated · 5 September 2026
00 · Premise
The same page made narrower is not yet a responsive experience.
When space changes, context, precision, time and usage patterns change too. Responsive design decides what stays, what moves and what must become more explicit, without turning mobile into an impoverished desktop.
One hierarchy, two compositions
Priority stays. Structure adapts.
In responsive work for Wind, desktop and mobile share content and goals but not a rigid grid. Navigation, the relationship between message and action, and the amount of visible information are recomposed for the device.
Define what must not be lost
The goal, primary action, state and decision-critical information should remain recognisable at every width. Everything else can change order, format or detail.
Practical actions
- Identify the main decision in each view.
- Separate essential and supporting content.
- Check that the CTA still makes sense without side context.
Change structure, not only size
Columns, tables, navigation and comparisons need different strategies. Smaller type and margins cannot repair a hierarchy designed only for horizontal space.
Practical actions
- Turn spatial relationships into legible sequences.
- Keep controls and results that need comparison together.
- Avoid horizontal scrolling for primary tasks.
Design density and interaction
Touch needs different target sizes, spacing and feedback from a pointer. Text must also retain rhythm and measure without becoming cramped or endless.
Practical actions
- Check targets and spacing with the thumb.
- Keep body size and line height legible.
- Make focus, active state and feedback visible.
Test the intervals, not three mockups
Problems often emerge between mobile, tablet and desktop: collapsing headings, overlaps and grids with too much or too little room.
Practical actions
- Test intermediate widths and long content.
- Check zoom and landscape orientation.
- Verify visual, DOM and keyboard order together.
Ready to use
Essential responsive check
- Priority and the primary action stay clear.
- Structure changes when content relationships require it.
- No unexpected clipping or horizontal scroll appears.
- Text and targets remain legible and usable.
- Long content and localisation do not break the composition.
- Visual and navigation order match.
Key principle
Responsive means preserving the task as context changes.
Consistency does not come from using the same arrangement at every width. It comes from keeping priorities, relationships and actions recognisable across different compositions.