Responsive web design versus adaptive web design

This blog post looks at the difference between responsive web design and adaptive web design. Before we can get started, we need to define another concept: progressive enhancement.

Progressive enhancement

Progressive enhancement is a way of designing a web application that has to work in a wide variety of environments (desktop computers, mobile devices, etc.). You start with a version for the least capable environment, check for additional capabilities and add features accordingly and dynamically (on the fly). The term “progressive enhancement” has been invented by Steven Champeon, in 2003.

Responsive web design

Ethan Marcotte coined the term “responsive web design” in a blog post in May 2010. He describes it thusly:

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.

The UX Munich website is a good example of responsive web design: Make the page wide enough (e.g. on desktop computers and laptops) and you get a multi-column layout. In its most narrow version (e.g. on a cell phone), you get a single-column layout. You can resize your browser window to observe the change.

Responsive web design has become very popular on the web. Marcotte has followed up his blog post with a book. A simple web search will also turn up many resources.

Adaptive web design

The term “adaptive web design” is used differently by different people. Let’s go with Aaron Gustafson’s definition: Adaptive web design is a superset of responsive web design. It might use more than CSS to achieve progressive enhancement. For example, an adaptive user interface could be constructed completely in JavaScript. Quoting Gustafson:

“Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).