Responsive design

Responsive design is the approach of building one layout that adapts to whatever screen it's viewed on, rather than building separate fixed layouts for mobile, tablet and desktop. It relies on three techniques working together: a flexible grid that resizes proportionally, breakpoints that restructure the layout at defined viewport widths, and flexible media (images, video) that scale within their containers.

The term is often used loosely to mean "works on mobile", but responsive design specifically means the layout itself reflows: columns stack, navigation collapses, images resize, all driven by CSS rather than separate templates or a different codebase per device.

In a Design System, responsive behaviour is built into components once rather than re-implemented per page. A card component, for example, carries its own responsive rules (stack on mobile, grid on desktop) so any page using that card is responsive automatically, no extra work required downstream.

Responsive design pairs with fluid typography for type that scales smoothly, and with a considered breakpoint set so the layout only restructures where the content genuinely needs it to, not at arbitrary device widths.