Web Development

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...

10 comments
CBIL360WebDesign
CBIL360WebDesign

Some what extra effort to understand web design technique...

grayknight
grayknight

I have been trying a similar pattern, this helps solidify it.

lastchip
lastchip

I think there's no argument, that site design now must address different browsers, particularly in the mobile space. Failure to do so, will result in your site(s) becoming a non-entity. The Internet is (as always) evolving and changing, and getting left behind isn't an option.

Deadly Ernest
Deadly Ernest

a part of the problem is they use the scripts to call scripts and other stuff from all over the Internet instead of from their own servers. This adds to delays in getting content and increases download costs for those of us who have to pay by the megabyte. It can also break the way the page presents if the person is using high level security measures to block third party scripts and cookies. As I said at the start, the concept is good, but the implementation often leaves a lot to be desired.

lastchip
lastchip

Once you get into it, it's far easier than it first appears. Ryan's explanation is pretty clear and concise and a good starting point. The real key is to think in percentages rather than fixed dimensions. As always, the major problem is Internet Explorer! But what's new?

Deadly Ernest
Deadly Ernest

it wouldn't matter as the page and site would be OK on all browsers anyway.

lastchip
lastchip

Calling (in some cases) dozens of scripts from all over the Internet is lunacy, slowing sites to a crawl. And if ever there's a perfect reason for a user to abandon you, that's it. Personally, I try and only ever have a maximum of three scripts and they are all called locally. It's a sort of self imposed rule to try and maintain site sanity.

lastchip
lastchip

I seem to remember about some company based in Redmond causing havoc and breaking everything. And even now, not supporting a fraction of what others do. Lousy performance for a company known worldwide! Maybe one day the penny (or perhaps cent) will drop that Internationally agreed "open" standards are good for everyone.

Deadly Ernest
Deadly Ernest

while a script called from elsewhere can be changed without you knowing it.

Deadly Ernest
Deadly Ernest

bodies that create these International and Industry standards and were heavily involved in creating the first two rounds of them, even adhered to them for a little while with the early Windows systems, but walked away from them with Win 95 and have been trying to get further away since, only coming back when either the US government, the EU government, or the market have slapped them down hard. The Open Document formats and standards have been out for many years and Microsoft did NOT include code to allow people to open or use them in MS Office, nor could you save as them in MSO - that was until recently when a certain US government department put out a white paper telling all the US government agencies that any new office product they purchased HAD to be able to natively handle the Open Document standards in the way of opening, creating, and saving in them so that the US bureaucrats could easily exchange documents with their European counterparts; bingo, the very next release of MSO has that capability in it because it was forced on them to add it or lose some major market share.