Responsive design
Designing web pages that adapt to any screen size — phone, tablet, desktop. Uses CSS media queries, flexible grids, and relative units instead of fixed pixel layouts. The standard approach since mobile traffic overtook desktop.
- Every public website.
- Any web UI accessed on multiple devices.
- Single-device internal tools.
- Apps needing native-only UX.
Definition
Responsive web design uses fluid grids (percentages, fr units), flexible images (max-width: 100%), and media queries (@media) to reflow layout based on viewport width. Mobile-first means designing for small screens first, then enhancing for larger.
Why it exists
Devices range from 320px phones to 4K monitors. Fixed layouts break or require separate mobile sites. Responsive design serves all devices from one codebase.
How it works
CSS media queries apply different styles at breakpoints (e.g., @media (min-width: 768px)). Flexbox and Grid create flexible layouts. Relative units (rem, %, vw/vh) scale with the viewport. Container queries adapt to the parent, not just the viewport.
Scaling limits
Testing across many devices/breakpoints. Complex responsive layouts can have a lot of CSS. Performance: serving the same HTML to all devices may include unnecessary content for mobile.
Cost shape
Free. The cost is design and testing effort across breakpoints.
Alternatives
- Separate mobile site (m.) — Optimized per device but duplicate codebases and SEO issues.
- Adaptive design — Fixed layouts per breakpoint, less fluid.
Failure modes
- Breakpoint bugs between sizes.
- Horizontal scroll on mobile from fixed widths.
- Touch targets too small on mobile.