Responsive UI design
Planning layouts from the smallest screen upwards makes them work on every device.
Background
Responsive UI design sets out how layout, navigation and content behave on smartphone, tablet and desktop. The plan comes before the visual design, not as rework during development.
What the plan defines
Content priority: what users see first on a smartphone.
Layout: flexible grids that adapt to the space available.
Navigation: usable with one thumb and not crowded on desktop.
Operation: large touch targets, legible type and suitable input types in forms.
Media: images in several sizes and in formats such as AVIF or WebP.
Technology
The foundation is CSS Grid, Flexbox and container queries. Components respond to their own space, not just to the window width. Font sizes and spacing scale fluidly. With srcset and sizes, the browser loads only the image size it needs, which improves the Core Web Vitals.
Approach
Find out which devices your users have and what they use them for.
Sketch the key page types for small screens first.
Extend them for tablet and desktop and define how each component behaves.
Test prototypes on real devices.
Rather than three separate designs, we define rules for how each component adapts.
Outcome
Design and development work from the same plan. New pages and modules fit in without fixes for each device. At 400% zoom the layout stays usable without horizontal scrolling, as the WCAG 2.2 ‘Reflow’ criterion requires.