Understanding Progressive Enhancement (A List Apart)

Josh Harbaugh — Fri, 10 Oct 2008 11:30:17 +0000

Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of designing for content and experience instead of browsers. In part one of a series, ALA’s Gustafson refreshes us on the principles of progressive enhancement. Upcoming installments will translate the philosophy into sophisticated, future-focused design and code.

News: Test-Driven Progressive Enhancement

Josh Harbaugh — Sun, 28 Sep 2008 01:39:29 +0000

Starting with semantic HTML, and layering enhancements using JavaScript and CSS, is supposed to create good experiences for all. Alas, enhancements still find their way to aging browsers and under-featured mobile devices that don't parse them properly. What's a developer to do? Scott Jehl makes the case for capabilities testing.

Continue reading →

The Theory Behind Progressive Enhancement

Josh Harbaugh — Wed, 18 Jun 2008 11:00:15 +0000

Those of you who have been a part of the web industry for awhile have probably heard about the idea of progressive enhancement. What is progressive enhancement anyway?

Progressive enhancement is a layered approach to interface development that helps ensure all users can navigate and read the content on a website regardless of browser or device limitations.— Aarron Walter, Building Findable Websites

The key to the success of progressive enhancement lies in the way you create and keep the structure, presentation, and behavior separate from one another.

If you keep the structure (HTML), presentation (CSS), and behavior (JavaScript) separate when you build websites, content remains accessible to everyone including search engine spiders.

You want to think of progressive enhancement as layering a cake. If you started with the frosting and worked your way back, you’d end up with a pretty terrible cake — most likely. You instead would want to start with the cake ingredients, then the baking, and finally the frosting on top. The same is true of progressive enhancement.

The Ingredients (Structure)

Begin with a semantically meaningful HTML file that communicates the information hierarchy of your page. By using heading, strong emphasis, emphasis, lists, and other semantic tags to mark up your document you’ll achieve a much better foundation from which to build upon when creating your cake — ahem — website.

Baking (Presentation)

Next, you’ll be adding the presentation layer using external CSS (Cascading Style Sheets) files that create the design of the document without altering the structure (HTML). Using CSS to control the presentation of your documents will make modifying them much less time-consuming. Trust me, you wouldn’t want to have to edit all the font tags of a hundred page website just to change the color. Ding! Cooking timer just went off.

The Frosting on Top (Behavior)

The final layer of our website cake is the behavior layer using JavaScript. This layer will enhance the interactions of the page. The JavaScript is also kept external in a separate file, and can easily take control of elements in the page without mixing in with the HTML structure.

Conclusion

Building your websites with this additive approach keeps them functional during each step. With CSS and JavaScript disabled, the user can still see all of the content and understand the information within as it’s communicated through your semantic markup. When CSS is enabled, the user is presented with an interface design that enhanced the look of the site. And finally, when JavaScript is enabled, the interactions add an extra bit of flair to the overall user experience.

When search engines encounter a site built using progressive enhancement they’ll be able to index all of the content because JavaScript will no longer be a roadblock. By making the presentation and behavior layers external, you also increase the speed with which search engine spiders can index your pages. Keeping everything separate improves overall maintenance as well.