This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

Responsive vs. Adaptive Design

One is well understood; the other is all over the map.

People mostly agree on what "responsive design" is, but "adaptive design" is proving so hard to pin down that we might as well just drop the term.

We have spent a fair amount of ink and electrons discussing responsive design (and responsive images and the tools for working with them). This term refers to class of designs that are aware of something about the environment in which they are displayed, and react appropriately by using the mechanisms of CSS. It was introduced by Ethan Marcotte in 2010.

The term more in contention is "adaptive design." Aaron Gustafson was one of the more prominent voices using it in 2011; he wrote a book under that title with Jeffrey Zeldman. Gustafson used "adaptive design" as a kind of synonym for progressive enhancement. This latter idea, first articulated by Steve Champeon in 2003 and developed by Gustafson in 2008, is the polar opposite of "graceful degradation."

Here is a brief history of assertions about how adaptive design contrasts with responsive design.

Smooth vs. stepped (October 2011)
Most responsive designs feature from three to six "breakpoints": dimensional limits in the display that, when reached by resizing the browser window, trigger the loading of a different set of CSS definitions. The Boston Globe's much-studied responsive design uses six. The breakpoints may trigger a "state change" in the design, for example from three columns to two to one; navigation menus may snap from a sidebar to an inline position as the window narrows. Or the design's behavior may react more smoothly and continuously to window size changes.

This brings us to the distinction emphasized by Logan Franken: according to his definition, a responsive design fluidly changes to fit any browser size, while an adaptive design changes to fit a defined set of browser sizes. Here are two examples of fluidly responsive designs in Franken's definition. Note that in the latter, font size is one of the variables that take on different values as the viewport size changes.

Subset vs. superset (February 2012)
Viljami Salminen, following Gustafson's lead, contrasts the two terms this way: "Responsive design is a subset of adaptive design. Responsive design = fluid layout only, while adaptive design = fluid layout + progressive enhancement." He has a diagram, simultaneously both complex and abstract, illustrating how all these concepts fit together in his world.

Client vs. server (January 2013)
According to Garrett Goodman's recent article on Huffington Post, responsive design is client-side: the client adjusts the view based on media queries. Adaptive design is server-side: the server sends differential content based on viewport size. Goodman claims that responsive design, by this definition, is likely to be a better solution if your goal is simply to get an existing website usable on more devices. The server-side, adaptive technique would be indicated for a greenfield design project that is guided by the philosophy of progressive enhancement.

A modest proposal
Might I suggest that we simply stop using the term "adaptive design," if we entertain any vestigial desire to communicate our ideas with power and clarity.

Related posts: