Developer

Understanding progressive enhancement techniques in web design

Ryan Boudreaux explains what is meant by progressive enhancement (PE) in web design.

One of the hot topics within web development and web design circles is that of Progressive Enhancement (PE). The phrase can be found in many online features and commentary, including this case study from North Bay Business Journal, where a winery in Napa Valley considers a new site redesign using progressive enhancement techniques, and Dot Net magazine's round up of the "Top 15 Web Design and Development Trends for 2012."

With all the recent attention given to progressive enhancement, you would think it was a new way of thinking, or a new system that just cropped up from the depths of some R&D think tank. Remarkably that is not the case at all; Steven Champion coined the phrase during the spring of 2003, almost ten years ago, in several articles for Webmonkey, and also while giving presentations at the SXSW Interactive Conference. So why is there so much attention surrounding the progressive enhancement topic now? Along with responsive web design (RWD), which is making attempts to accommodate the plethora of web-enabled devices on the market with differing screen sizes and resolutions, , progressive enhancement is seeing a resurgence of interest.

What is progressive enhancement?

PE can be described as a web design strategy that makes an effort to create websites that are accessible to all devices, using a layered approach with a set of core principals stressing accessibility of content and functionality. PE is the challenge response to a traditional web strategy known as "graceful degradation", meaning that the website is designed for a particular browser technology, and it would remain presentable or "degrade" even if older user agents were used. Graceful degradation also assumes that the users just need to "upgrade" their browsers or technology, putting the focus on the end user and not the website.

You don't need me to tell you how much user acceptance websites receive and the kind of reception they get when visitors see a message similar to "Best viewed in ....".  Just run a query in your favorite search engine for the phrase "Best viewed in Netscape" and see how many results show up? If anything, it will show you how long it has been since some websites have been updated; for others, it is a reminder that websites designed specifically for one browser or browser version become obsolete sooner than later.

The layers of progressive enhancement

Aaron Gustafson wrote a notable article describing progressive enhancement as a series of layers similar to a layer cake, or the layers of a Peanut M&M. In Gustafson's model, the center is the content layer of rich semantic markup; the content layer is surrounded with the presentation layer, which is the CSS and styling; and the presentation layer is encased with the client-side scripting layer, otherwise known as JavaScript or jQuery.

The three layers or stratums of Progressive Enhancement:

  • Content layer = rich semantic HTML markup
  • Presentation layer = CSS and styling
  • Client-side scripting layer = JavaScript or jQuery behaviors

Figure A

Benefits of progressive enhancement

A practical application of layering your website design, results in these advantages:

  • Improved accessibility - Some users are not able to read from a screen, and progressive enhancement allows the impaired to enjoy websites with enhanced usability through text readers or screen readers, which boosts user engagement.
  • Expand transferability -Websites will remain effective no matter the browser, device, or platform through utilization of the principals of PE and RWD, including media queries, CSS3, and HTML5.
  • Performance boost - The layered approach ensures that content is loaded first, then the styles, and then the behaviors. The perceived performance boost results from the rendering sequence, which in turn improves the load times as pages are displayed.
  • Ease of modular web design - While the layered approach aids with rendering of the website for the end user, it also assists the web developer in organizing and managing the strata of technologies into discrete modules as the website persists in a distributed form of content, styles, and scripting.

Applying PE to web design

How do you incorporate the core principals of progressive enhancement into your web design strategy? Let's take a look at the layers again to see what can be leveraged out of each tier.

Content with semantic HTML markup

Semantic HTML markup ensures that tags are applied to convey meaning and content structure, which ties into the evolving HTML5 standards for web design. Examples of good semantic markup incorporate HTML5's list of new elements and attributes such as <nav>, <footer>, <article>, and <aside>, which replace the common generic block <div> and inline <span>, or the new <audio> and <video>, which replace the generic <object>.

Presentation styling and CSS

Along with the semantic markup found in HTML5, the evolving CSS3 standards mesh well together, and allows your web design to jump off the screen with colors, images, backgrounds, gradients, shadowing, text effects, and more. Any why just stick to one stylesheet? In many web site implementations it becomes necessary to utilize several which help to separate specific styles such as type, color, and layout, or define distinct media types such as screen, print, or mobile.

Scripting behaviors

The last layer ties it all together with unobtrusive JavaScript or jQuery, delivering beneficial performance to your web design. Incorporating modest scripts improves robust features while maintaining them as a separate module. It should also allow all content to be available without all or any of the scripts running successfully; it should not reduce the accessibility of the content, but should augment and enrich the availability of the content for all users.

While progressive enhancement has its critics, as a web design approach and as a business model blueprint for design houses it makes the case of addressing the growing need to build websites which are accessible to all gadgets, especially with the explosion of Internet enabled mobile devices.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks