Responsive vs Adaptive web design — what’s the difference?

Ever wondered what the difference between Responsive web design and Adaptive web design is? Well it’s quite simple really; Responsive web design is part of Adaptive web design, let me explain…

Illustration of various devices

RWD = Responsive Web Design.
AWD = Adaptive Web Design.
WTF = What The Fiddledeedee.

“Adaptive web design” is a term coined by Aaron Gustafson and was simply intended to be another way of saying progressive enhancement. Adaptive web design/progressive enhancement in web design is an approach whereby you start with the most basic functionality and add enhancement based on the capability of the browser/device. A good example of progressive enhancement in the real world is escalators; if a building has no power the escalators are still functional–you just have to walk up them, however, if power is available then the escalators move and you can just stand still letting them carry you to the next floor.

The term “Responsive web design” coined by Ethan Marcotte is the practise of using things such as fluid grids and media queries to produce layouts and styles that change depending on the viewport width, viewport height, device orientation and device resolution. In responsive web design, these layout and style changes happen client side so you can see them by making your browser window bigger and smaller—If you’re reading this on a desktop or laptop you can try it on this blog, notice how the logo changes from the full Michon logo to the ‘M’ badge, the word ‘Blog’ changes in size and the space around these items decrease as less screen space is available.

Nowadays we can access the Internet through lots of different devices—new and old, using lots of different screen sizes. Websites should be built to provide the best possible user experience, and brand experience, across as many devices as possible.

Responsive is adaptive,
adaptive is not necessarily responsive.