adaptive vs responsive design

After the iPhone came out and mobile phones became Smart Phones, designers had to start taking the mobile layout seriously. The term that seemed to rise to the top was responsive design.¹

But what is a responsive design and how does it differ from an adaptive one?

Ethan Marcotte, who coined the term responsive design at A List Apart 2010, defined responsive designs as possessing a few key attributes:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

In short, a responsive design is a design that responds fluidly to changing viewport dimensions while an adaptive design targets specific sizes.

In both cases the designs take advantage of breakpoints - but the idea behind those breakpoints differ philosophically. For responsive design, we introduce breakpoints where the content breaks. For adaptive design, the breakpoints are typically geared around devices.

Footnotes

• ¹ H/t CSS Tricks and their write up on the differences between Adaptive and Responsive Design.