VOL. III · CH. 3.34 · COMPONENT
Responsive Design
One layout, many screens — designed as a continuum rather than a fixed set of breakpoints.
1 min read · 128 words
3.34.1Definition & Approach
Responsive design adapts layout fluidly to the available viewport, rather than targeting only a fixed set of device sizes. Mobile-first design — building the smallest layout first, then progressively enhancing for larger screens — is the broadly preferred approach.
3.34.2Common Mistakes
- Designing desktop-first and cramming the layout down for mobile as an afterthought, producing a compromised mobile experience.
- Fixed pixel widths that break at arbitrary, untested viewport sizes.
3.34.3Best Practices
- Design mobile-first, treating larger screens as progressive enhancement rather than the default target.
- Test at genuinely varied widths, not just a handful of common device presets.
ExampleMost global web traffic is now mobile-first for many product categories — a fact that has flipped the historical desktop-first design default across the industry.