Progressive Enhancement, Graceful Degradation, and Unobtrusiveness

When designing your web documents always consider the principles of progressive enhancement, graceful degradation and unobtrusiveness.

Principle of Progressive Enhancement

The principle of is the idea of adding layers of enhancements to your web page. There are three main types of enhancements:

  1. Format (style) Enhancements
  2. Behavior Enhancements
  3. Semantic Enhancements

After you have created data from your data requirements document and added structure using markup, then you can add layers to progressively enhance your document:

  1. Add style to the marked-up data using a CSS stylesheet.
  2. Add interactive behavior using JavaScript and DOM.
  3. Extend the semantics of the markup by injecting Microformats into the document.

Thus, starting from the raw data you structure the data with markup and then you add successive layers of enhancements: you add a stylesheet layer to format the information, you add a behavior layer to make the information interactive, and you inject Microformats to enrich its semantics.

You may add additional layers as well!

Principle of Graceful Degradation

The principle of is the idea that if a layer is removed the information is still usable. Thus, if the browser does not support CSS, or the CSS document is inaccessible for some reason, the information is still in an acceptable format. If the user has turned off JavaScript in his browser, there is no loss in functionality. And if the browser is ignorant of Microformats, it still can display the information.

Principle of Unobtrusive Enhancements

The principle of unobtrusive enhancements is the idea that data, behavior, and styling should be kept separate. Do not embed CSS style rules within your markup. Do not embed JavaScript, or calls to JavaScript in your markup. Thus, the marked-up data is in one document, the CSS stylesheets are in separate documents, and the JavaScript is also in separate documents.

How to Implement These Principles

Jeremy Keith has written an outstanding book, DOM Scripting, which takes the reader step-by-step through the process of designing a web page where additional layers of capabilities are added onto it, and he shows how to design the web page so that it degrades gracefully.

I have written a that shows how to add semantic layers to your web page.

By The Way ...

This document was created using the above principles. It is being styled using CSS, which is in a separate file. The semantics are enriched using the hCard and rel-tag Microformats. And if you turn off CSS styling the document is still quite presentable!


Last Updated: November 19, 2007