Design Systems

Responsive Design

Building interfaces that work across every screen size — mobile-first principles, breakpoints, and adaptive patterns.

#responsive#mobile first#breakpoints#adaptive#viewport#media queries#layout

What is it?

Responsive design is the practice of designing interfaces that adapt gracefully to different screen sizes, from mobile phones (320px) through tablets to desktop monitors (2560px+). It uses flexible layouts, fluid images, and media queries to create experiences that feel native at every size, not scaled or broken.

Why it matters

Mobile accounts for approximately 60% of global web traffic. A product that is not mobile-optimized excludes the majority of potential users. Beyond mobile/desktop, responsive design addresses tablets, landscape orientation, large monitors, and unusual viewport dimensions. It is not optional — it is the baseline expectation.

Best Practices

Mobile-first: design and code for mobile first, then progressively enhance for larger screens.
Common breakpoints: 320px (small mobile), 375px (iPhone), 768px (tablet), 1024px (small desktop), 1280px (standard desktop), 1536px (large).
Use relative units: rem for font sizes, % or fr for layout, em for component-relative spacing.
Flexible images: max-width: 100% ensures images never overflow their container.
Navigation: hamburger/bottom bar on mobile, horizontal nav on desktop.
Touch targets: minimum 44×44px on mobile (Fitts's Law applied to touch).
Columns: 1 column on mobile, 2 on tablet, 3–4 on desktop for grid layouts.
Typography: body text scales slightly between mobile (16px) and desktop (16–18px).
Test on real devices, not just browser resize — device-specific rendering differences are common.
Container queries (CSS, modern browsers): components adapt to their container size, not just viewport size.

Common Mistakes

Desktop-first design with mobile as an afterthought — results in cramped mobile experiences.
Fixed-width elements that overflow on mobile.
Touch targets smaller than 44px — frequently tapped incorrectly.
Desktop navigation unchanged on mobile — horizontal nav becomes inaccessible.
Testing only by resizing a desktop browser — doesn't reveal real device rendering issues.
Different content on mobile vs. desktop — creates inconsistent user experiences.
Hover-only interactions on features that mobile users need access to.

Checklist

Tested at 320px (minimum mobile), 375px, 768px, 1024px, 1280px

No fixed-width elements that overflow their container

Touch targets ≥ 44×44px on mobile

Navigation collapses to mobile-appropriate pattern (hamburger or bottom bar)

Typography uses rem units (not px) for user-scalable text

Images use max-width: 100%

Tested on real iOS and Android devices (not just browser resize)

No functionality is hover-only (accessible to touch users)

Grid layouts use appropriate column counts per breakpoint

Spacing reduces proportionally on mobile viewports

Research & Theory

Mobile-First (Luke Wroblewski, 2011)

Luke Wroblewski coined "mobile-first" in 2011 as a design and development philosophy: design for the most constrained context (mobile) and progressively enhance for larger screens.

Why it's relevant

Mobile-first forces prioritization — you can only fit the most important content on mobile, which reveals what's actually important.

Statcounter Global Stats on Mobile Traffic

Global mobile internet usage consistently accounts for 55–65% of all web traffic. In some regions (Africa, South Asia), mobile accounts for 80%+ of internet access.

Why it's relevant

Mobile is not a secondary consideration. For much of the world, mobile is the primary (and only) way users access the web.

Real-World Examples

GOV.UK

Government design system built mobile-first. Every component tested at 320px. Typography using rem. Touch targets explicitly sized. The most accessible responsive design system in production.

Stripe

Responsive across all breakpoints with no degradation of functionality. Forms, tables, and navigation all have mobile-specific implementations.

Linear

Mobile app for core features, web app for power features. The responsive web app prioritizes the most critical features at mobile size, adds depth at desktop.