A product that only works on one screen size isn't finished — it's half-built.

Responsive design is the practice of building interfaces that adapt to different screen sizes and device contexts — providing a functional, readable experience whether a user is on a phone, tablet, or desktop. Rather than building separate versions of a product for each device, responsive design uses flexible layouts, fluid grids, and CSS media queries to adjust the interface based on available viewport width.

The term and framework were introduced by Ethan Marcotte in a 2010 A List Apart article that gave a name to what was rapidly becoming the default approach for any web-based product. Fifteen years later, it's baseline expectation — not a differentiator.

Three related terms that often get conflated:

Responsive design uses fluid layouts that scale continuously — the interface adjusts smoothly at any viewport width.

Adaptive design uses a set of fixed layouts, each designed for a specific screen size range. The layout snaps between defined breakpoints rather than scaling continuously. More precise control per breakpoint; more maintenance overhead.

Mobile-first design is a philosophy rather than a technical approach — starting with the smallest screen and adding complexity for larger viewports. The constraints tend to produce cleaner, more focused designs. It's orthogonal to responsive vs. adaptive: a mobile-first product can be built either way.

Responsive design requires explicit decisions about how the layout behaves at different sizes:

• Breakpoints: The viewport widths where the layout changes meaningfully. Common breakpoints map roughly to mobile (~375px), tablet (~768px), and desktop (~1280px) — but breakpoints should be set where the content breaks, not where devices categorise themselves.
• Fluid grids: Columns that scale proportionally rather than having fixed pixel widths. Content reflows as the container grows or shrinks.
• Flexible images and media: Images that scale within their container rather than overflowing it.
• Typography: Line lengths that stay readable across contexts — roughly 45-75 characters per line. Very long lines become hard to track on wide desktop views; very short ones create awkward reflow on narrow mobile views.

Navigation is where responsive design gets hardest. A top navigation bar with seven items that works on desktop usually needs a fundamentally different approach on mobile — not just a rearrangement.

The hamburger menu is the most common solution. It hides navigation behind a single tap, which trades discoverability for screen space. For products where Navigation Design is already a pain point, hiding it further on mobile often makes things worse.

Better approaches depend on what users actually need on mobile versus desktop — which may be a different subset of destinations entirely. Responsive layout design and responsive navigation design are separate problems, and both need intentional decisions rather than default patterns.

Responsive design solves layout. It doesn't solve interaction, performance, or context.

A form with 20 fields that reflows correctly on mobile is still a bad mobile experience — it needs redesign at the feature level, not just layout adjustment. A data-heavy table that collapses into a single column is technically responsive and functionally unusable. These are Form Design and Dashboard Design problems that responsive CSS can't fix.

Performance is also separate. A responsive layout that loads 4MB of images on a mobile connection works on the screen; it doesn't work for the user. Full mobile experience quality requires touch-optimized interactions, performance budgets, and Accessibility considerations designed for the context — not just a layout that fits the viewport.