For years, web designers have struggled with designing web pages that look great in modern browsers and degrade gracefully in older browsers. Entire sites are devoted to elaborate hacks and workarounds to try to make web pages appear identical in multiple versions of various web browsers. The most current philosophy of web design—progressive enhancement—approaches this problem from the opposite direction.
Instead of building a web page from the latest technology and then piling on hacks and workarounds to get it to degrade gracefully, progressive enhancement starts by building a web page that looks good (and is fully functional) in an older browser, and then adding more advanced CSS and JavaScript bits that add value to the browsing experience.
The overall benefit of progressive enhancement is that even the user with the oldest browser has an acceptible experience and the user with a modern browser has a richer experience. An unexpected benefit is that web pages built using progressive enhancement techniques are better SEO (Serach Engine Optimization) scores.
Thinking of it from a dog-training perspective, progressive enhancement eschews negative reinforcement in favor of positive reinforcement. Rather than punishing users who don’t upgrade their browsers, reward users who do.
How does it work?
Depending on which design sites you frequent, you may have encountered any number of creative analogies to describe the progressive enhancement design philosophy: peanut M&M, hamburger, layer cake. While analogies can help us understand complex principles, analogies are always suspect. Besides, progressive enhancement is a simple enough concept that it doesn’t really need an analogy to explain it.
Here’s the basic process to build a web page that complies with progressive enhancement design principles:
-
Start with the content
This may not be obvious but for mobile browsers, the way to grab your audience is with the quality of your content. Some authors will balk at this but the overall result is (hopefully) a better web experience for everyone.
-
Write clean markup
You already know this part. Start with content that uses well-structured, semantic HTML. In addition to improving SEO for the page, even the most rudimentary phone and tablet browsers can still display your content.
-
Add styling
Once the content is complete, it’s time to enhance the presentation, primarily through the addition of CSS styles. Even this process should be broken down into progressive enhancement steps, starting with CSS styles that work in older browsers, then more complex styles that work in modern browsers.
A key part of the HTML spec is that every browser (user agent in W3-speak) is expected to ignore markup it doesn’t understand. For example, a very old (pre-CSS 2) browser might encounter a style rule like the folliwng:
#display-box {
border: 1px solid #303030;
border-bottom-style: dashed;
border-top-color: 7F7F7F;
}
Because the border property is supported in CSS 1, a single-pixel dark gray border is drawn around the element that has the ID display-box but, because the border-bottom-style and border-top-color properties are defined in CSS 2, the top and bottom border are not drawn with different styles.
Admittedly, this is a very simplified example with an obvious workaround but it does illustrate how simple it is to target enhanced styles for sepcific browsers.
-
Add behaviors.
Client-side scripting should be the last feature you add to a page. jQuery, JavaScript, or other client-side scripting should enhance the user experience but not be required to view the page.
Conclusion
Remember, the objective of progressive enhancement is to make your content available to a wider range of browsers. Mobile browsing is growing at an impressive rate and old/legacy browsers are still in abundance; your goal should be to provide as many people as possible with a good browsing experience.