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
The three layers or stratums of Progressive Enhancement:
- Content layer = rich semantic HTML markup
- Presentation layer = CSS and styling
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.
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.