What is responsive design?
Responsive design treats the screen size as unknown. Instead of fixed pages drawn for one width, the designer creates a system of rules: how the grid flexes, when columns stack, how type scales, which images crop and how, what the navigation becomes when space runs out. The browser applies those rules to whatever screen it is on, so a single design can serve a phone held upright, a laptop and a television in a hotel lobby.
The principle reaches beyond websites. Email templates, web apps, digital signage and the interfaces inside products all have to cope with screens of unpredictable size. Even a campaign is responsive in a sense, when the same idea is cut for a vertical phone, a square feed and a widescreen cinema.
Why it matters
Why responsive design matters
People use dozens of screen sizes, and they move between them: a product found on a phone at lunch is bought on a laptop in the evening. A responsive design gives them the same brand, content and address on every one, which is better for the visitor, simpler for a team that maintains one site instead of several, and preferred by search engines, which index the mobile version and favor a single address per page. It also future-proofs the work, since a system of rules copes with screens that have not been invented yet far better than a set of fixed layouts does.
In practice
How responsive design works in practice
- 01
We design in ranges rather than sizes. Layouts are drawn at the narrowest and widest widths, with the points in between where the design changes, called breakpoints, chosen by where the content starts to look wrong rather than by the dimensions of particular devices. Type is set to scale smoothly between a minimum and a maximum. Images are planned with crops that work in tall, square and wide frames, and components are designed to respond to the space they are given.
- 02
In the code, that becomes fluid grids built with CSS grid and flexbox, media queries for the page-level changes, container queries that let a component adapt to its own box rather than the whole screen, and responsive images through srcset, so each device downloads only what it needs. Then it is tested across real devices, and in the awkward widths between the usual ones, where most responsive layouts quietly break.
Watch out
What people get wrong about responsive design
Designing three fixed layouts, phone, tablet and desktop, and calling it responsive. The screens in between are where many visitors actually are, and they get whichever layout is nearest and fits worst. Second, treating it as the developer's problem, so the designer hands over a desktop design and the phone version is improvised in code. Third, making everything shrink. A responsive design sometimes needs different content priorities on a small screen, not just smaller versions of the same things. And forgetting the largest screens, where a layout stretched across a wide monitor can be as broken as one squeezed onto a phone.
