Responsive design

Responsive design is building a website so one codebase adapts to any screen — phone, tablet, or desktop — rather than shipping separate versions. Since most traffic is mobile, it usually means designing the small screen first.

Responsive design is building a site so a single codebase reflows to fit whatever screen it’s on — a narrow phone, a tablet, a wide monitor — instead of maintaining separate mobile and desktop versions. The layout, type, and spacing adapt to the space available.

In practice it means designing the smallest screen first. Most traffic is now mobile, and it’s far easier to add room as the screen grows than to cram a desktop layout onto a phone after the fact. Mobile-first also forces useful discipline: if something doesn’t earn its place on a small screen, it probably didn’t need to be there at all.

Done on top of a design system, responsive behaviour comes almost for free, because components already know how to reflow. It’s part of building a site that’s clean, fast, and found.

Quick recall

What is responsive design? One codebase that adapts to any screen size, instead of separate mobile and desktop sites.

What does “mobile-first” mean? Designing the small screen first, then adding room as the screen grows.

Why mobile-first? Most traffic is mobile, and it enforces useful discipline about what earns its place.