Responsive Web Design

Adaptive vs. Responsive Design

Javier Centeno, September 24, 2013

As the viewing screen for the web evolved from desktop computers to mobile devices, web designers and developers faced a challenge: How do we make our sites support multiple devices? And how do we improve the user experience, regardless of the device being used to view our site? Making a separate mobile site for phones was not enough because phones got smarter, came in a variety of screen sizes and resolutions, and then came tablets.

In order to provide the best experience for the user, websites had to automatically adapt to any device. Enter Adaptive Web Design (AWD) and Responsive Web Design (RWD). Both of these strategies have the same goal and that is to provide the user with the best possible experience, according to the device’s features and limitations. Each approach is a little different.

Responsive Web Design

Ethan Marcote, who wrote the Responsive Web Design book, and is responsible for this term says, “Responsive Web Design is a possible solution, a way to more fully design for the web’s inherent flexibility.” This strategy is a flexible grid-based layout, flexible images/media and CSS media queries that make the site’s layout adapt to any device and screen resolution. But the RWD strategy can take advantage of any technique to accomplish its goal and it can also use Progressive Enhancement to take development a step further, and this is when the differences between RWD and AWD become smaller.

Progressive Enhancement

As defined by Wikipedia:

Progressive Enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

Adaptive Web Design

Aaron Gustafson wrote the Adaptive Web Design book. To Aaron, Adaptive Web Design is just another term for Progressive Enhancement, or “to create interfaces that adapt to the device’s capabilities in both form and function.” In other words, AWD is more than adaptive layouts; it’s also about adaptive functions. It can use CSS media queries to control the layout of a site at a particular screen resolution, but it can also add features such as touch events and geolocation to enhance the user experience for devices that support those features, or show images optimized for retina displays only to devices with retina displays, etc.

Which should designers and developers use?

The short answer is whichever they are more comfortable or familiar with. We believe both strategies are connected. Adaptive Web Design started as a set of methods to enhance the user experience through Progressive Enhancement, in both terms of layout and function. Responsive Web Design started as a direct solution to making a site layout look good on any device. You could argue that RWD is more about layout and for that reason, it’s not as complete as AWD, but good web designers and developers always follow Progressive Enhancement, so in reality, a good web designer / developer using RWD is using AWD. Someone using AWD is also using RWD. It’s really just a difference in words. When done correctly, both AWD and RWD will end up accomplishing the same goal: providing the user with the best possible experience, according to the device’s features and limitations.