Adaptive Design – The New Responsive?

published on November 3, 2014 | tagged in:

What is Adaptive Design

Adaptive web design is another term for progressive enhancement of a web site. The term was first coined by Steve Champeon and was adopted by Aaron Gustafson, founder and principal consultant of web development boutique -Easy! Designs, in his book “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement” in May 2011. It is a high level design philosophy that can be achieved through a variety of execution tactics including server side user agent detection, or client side responsive web design. (source: Wikipedia)

At the 2003 SXSW Conference, Steve Champeon and Nick Finck unveiled a blueprint for a new way of approaching web development. Steve coined this as progressive enhancement.

Gustafson takes Progressive Enhancement a bit further by saying,

The Progressive Enhancement perspective focuses on the content (not browser capabilities). Content is the reason we create websites to begin with. Some sites disseminate it, some collect it, some request it, some manipulate it, and some even do all of the above, but they all require it. That’s what makes progressive enhancement a more appropriate paradigm. – Aaron Gustafson, A List Apart.

“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). Aaron Gustafson

Brad Frost also shared his thoughts about adaptive design at the 2013 SXSWi Conference,

While creating flexible layouts is important, there’s a whole lot more that goes into truly exceptional adaptive web experiences.

Adaptive design is essentially progressive enhancement at its core, but it’s being applied to a much larger, more diverse landscape than when the term progressive enhancement was first coined.

AWD vs RWD – Where lies the difference?

The common misconception people have is that Adaptive Design is synonymous with Responsive Design. In an article written by Ethan Marcotte about Responsive Design, he writes,

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.

Brad Frost presents a different way of looking at it,

Responsive design is one technique in an adaptive web design strategy.

Creating flexible layouts is extremely important, but it’s just one piece of the puzzle. It’s also important to consider a whole host of other factors as well: ergonomics, touch capability, geolocation, SVG support, and the myriad other features that can be detected.

Here’s a simple way for you to tell which one is which:

  • Adaptive: Sites show up on different devices on the similar set of URLs but each URL uses different HTML and CSS based on the type of device (desktop or mobile).
    Responsive: Sites show up on various devices on the same set of URLs and every URL uses the same HTML and CSS for all devices.
  • Adaptive: Easier and more convenient to install features that mobile and desktop users prefer. Better loading speed of the site which translates to better user experience.
    Responsive: No need to maintain two different code bases (one for desktop and another for mobile viewing). No requirement to establish server-side redirects to guide desktop and mobile users to view the appropriate site.
  • Adaptive: Uses a range of static formats depending on breakpoints. As a result of which, this particular design fails to respond when one changes a browser window. It first identifies the type of display and then resorts to the format sized appropriately for viewing on a certain display type.
    Responsive: demands detailed front-end coding so that users can have great viewing experience irrespective of any browser and OS.

At the recently concluded HSMAI Digital Marketing Strategy Conference held last Feb 2014 in New York, a panel of distinguished industry leaders concluded that:

  • Responsive website design is here to stay in this three-screen world we now live in (desktop, mobile, tablet)
  • If you want to do responsive design right, Adaptive Web Design/Responsive Design on Server Side (RESS) is the better approach.

At the end of the day, there is no right or wrong as to which one is the better web design approach. Every website has a specific user base that has different needs. These users access the internet on various devices at any given moment. Some like it squishy. Others like it static. The ultimate goal is to know what majority of your website users prefer and provide the most delightful experiences possible for these users regardless of the type of device they use.


Note: Many of the articles on this site include affiliate links that may earn us a commission if you decide to buy the recommended product.