Adaptive Web Design

Primer

Though definitions vary, adaptive web design is commonly understood to be the overarching design philosophy that incorporates both progressive enhancement and responsive web design. A website built according to ideal adaptive design principles will "adapt" to virtually any context in which it is viewed in order to deliver a useful, relevant experience to the user, regardless of the user’s browser, web device, or physical capabilities. This is not easily achieved, but it is the ideal many web developers are striving for as the state of the art moves beyond shortsighted programming towards more comprehensive, expansive design standards that account for a wider world of web access than previously assumed.

Web Design as a Peanut M&M
 Web Design as a Peanut M&M

Progressive Enhancement

Progressive enhancement as applied to designing websites involves constructing a website in layers (or levels), with each layer supplying greater complexity, yet remaining decoupled from the other layers. Adaptive Web Design author Aaron Gustafson expresses this model using a peanut M&M as a metaphor. In his model, the peanut represents a site’s content: it is the core, the basic information the web visitor has come to digest, generally in words and pictures and structured with HTML.

The next layer is the chocolate, which represents CSS stylesheets. These stylesheets determine how the content will be presented to the viewer, providing a logical and readable layout to make the content more attractive and potentially easier to consume. Finally, a web page can be enhanced with a candy coating of JavaScript to provide colorful ways for a viewer to interact with the content, resulting in a more dynamic web experience. Successful progressive enhancement allows users without JavaScript or modern CSS capabilities (as in the case with some older browsers or mobile devices) to still access a site’s core content. Similarly, people using browsers with JavaScript disabled can still fully access both the content and styling.

Many consider progressive enhancement to be a more "enlightened" alternative to the practice of graceful degradation in web design. Typically, when a web developer builds a site, she will utilize the latest styling and interactivity technologies to create as rich a site as possible, which logically means testing the site in a browser that best supports those
technologies. Other, or older, browsers without modern styling and JavaScript support
won't display the pages as they were intended.

Invalid Browser Warning

If the developer takes the time to test the site in these other browsers, she can code some alternative mechanisms for unsupported technologies (if resources permit), providing a somewhat degraded experience for any web visitor unfortunate enough to be using the "wrong" browser. If these fixes are not performed, a user may not be able to access the site at all. While these problems can be avoided by simply instructing the user to download a newer browser, there are many people in contexts where this is not possible (e.g., universities or businesses with strict security controls). Progressive enhancement seeks to serve a useful web page regardless of the viewer’s context, and can do so because the content is not contingent upon any CSS or scripting technologies to be accessed.

A progressively enhanced website has other advantages as well. It can be built first for a smart phone context, and then progressively enhanced for tablet and desktop form factors with alternate stylesheets—all while the content remains untouched. Screen readers and search engine spiders can more easily pinpoint a site's main content since it is separate from the page’s design elements. Finally, as new web technologies are developed, they can be layered over the existing site for a richer and more enhanced web experience without having to rewrite the entire site from scratch. This allows sites to remain relevant beyond the relevancy of the version of the browser for which they were built.

Responsive Web Design

Responsive web design is an important part of adaptive web design. Pages built with responsive design techniques are able to adapt to the screen resolution on which they are being viewed, whether mobile, tablet, or desktop-sized screens. Responsive web design is achieved through the use of media queries, fluid grids, and flexible images. These three highly practical steps are discussed in our Responsive Web Design primer. The primer includes links to additional references that outline the techniques currently used by programmers to achieve websites that can respond and adapt to the media on which they are being viewed.

The New Standards

Adaptive web design becomes easier to achieve with the advantages of HTML5 and CSS3. Responsive design’s media queries, for example, are only made possible with CSS3. HTML5 provides more semantic elements than previous iterations, allowing designers to more easily target content when designing sites. Its syntax and parsing rules are also designed to be largely compatible with older browsers, making graceful degradation fixes less frequently necessary. Our primers on HTML5 and CSS3 explain some of the stand-out features of the new standards, as well as provide further references for serious research.

 

CSS3 and HTML5 Logos

Additional Resources and References

  1. Understanding Progressive Enhancement (article by Aaron Gustafson)
  2. What is Responsive and Adaptive Web Design? (article by Jon Bishop)
  3. Understanding Progressive Enhancement Techniques in Web Design (article by Ryan Boudreaux)
  4. Graceful Degradation versus Progressive Enhancement (Web Standards Curriculum article by W3C)
  5. Adaptive Web Design (book by Aaron Gustafson)