Responsive design — one page that works on all screens

Users range from small phones to large screens, and a good site should work on them all without a separate version for each. That's called responsive design: the layout flows and adapts to the space available instead of being locked to a fixed width.

§Flexible units rather than fixed pixels

The basic idea is to avoid locking dimensions in pixels where it can be avoided. Instead, relative units are used and elements are allowed to fill a proportion of the available space. An image that may fill at most its container's width shrinks nicely on a small screen instead of overflowing. Relative text sizes mean the content scales coherently.

§Media queries — rules per screen size

A media query lets CSS ask about conditions on the screen — typically width — and apply certain rules only when the condition is met. This way a menu can lie horizontal on a wide screen and fold down to a button on a narrow one. The screen widths where the layout changes are called breakpoints; choose them based on when content starts to look wrong not based on specific devices.

§Mobile-first

It is often easiest to start with the small screen and build upward. When you start mobile-first, you are forced to prioritise the most important content first, and you then add extra layout and columns as more space becomes available. The opposite — starting large and trying to squeeze everything onto a small screen afterwards — more often ends in a mess.

• 01Use flexible widths and relative units rather than fixed pixels
• 02Let images and media scale with their container
• 03Use media queries to change layout at sensible breakpoints
• 04Choose break points based on content, not on specific devices
• 05Build mobile-first and expand the layout as there is more space

§Test under real conditions

The browser's developer tools can emulate different screen sizes and it is a good place to start. But also test on a real phone where touch slower connection and a small screen reveal things that look fine on a computer. A layout that works for fingers not just a mouse cursor is part of the craft.

“Responsive design is not about rebuilding the page for each screen — but about letting the same page breathe and adapt to the space.”

— Common teaching principle in web development