An approach to web design that makes interfaces adapt fluidly to different screen sizes and devices using flexible grids, images, and CSS media queries. A responsive design serves the same content to all users regardless of their device.
Common contexts
- Designing a single layout system that reflows a four-column desktop grid into a single-column mobile view without hiding core content
- Auditing a marketing site where navigation collapses to a hamburger on tablet but leaves key CTAs inaccessible below the fold
- Defining breakpoints and component behaviour rules before a development handoff to prevent inconsistent responsive implementations across a product
Use when
Apply responsive design as the default approach for any web experience where analytics show meaningful traffic across more than one device type — particularly when mobile and desktop users need access to the same content and functionality.
Avoid when
Reconsider a purely responsive approach for highly specialised workflows where desktop and mobile users have fundamentally different task goals — forcing a complex data visualisation tool to reflow onto mobile can produce an unusable experience on both platforms.
Responsive design solves a layout problem, not a content strategy problem — a page crammed with fifty items that reflows gracefully to mobile still overwhelms mobile users; the real work is deciding what content earns its place at each breakpoint.
Real-world examples
- Ethan Marcotte's 2010 article coining 'responsive web design' used the Boston Globe redesign as the proof-of-concept; that site went on to become the most-linked example of responsive design in textbooks for a decade.
- Google's 2015 'Mobilegeddon' algorithm update rewarded responsive sites in mobile search rankings, triggering the largest wave of website redesigns in history and effectively mandating responsive design for any SEO-dependent business.
- Bootstrap's responsive 12-column grid, adopted by over 20% of all websites, standardised the breakpoint vocabulary (xs, sm, md, lg) that developers now treat as a universal responsive design language.