Progressive Enhancement is Important

[Definition] Progressive enhancement is the layering of additional capabilities onto a basic capability.  If a layer is not supported by the environment, the basic capability continues to operate (i.e. there is  graceful degradation).

Consider employing progressive enhancement in creating your web pages. Here are the steps:

  1. Collect the data that you want to make available
  2. Organize your data
  3. Wrap your data in the most semantically rich HTML tags. Now you have your basic capability. This web page will operate in any browser
  4. Create a CSS document that styles the data in a pleasing manner, and connect the HTML document to the CSS document using the <link> element. You have just added a layer onto your HTML document. Browsers that support CSS will display the HTML in the way specified by the CSS document, and browsers that don’t support CSS will display the HTML using the default display
  5. Create a JavaScript file containing functions that enhance the interactivity of the HTML data.  Connect the HTML document to the JavaScript document using the <script> element. You have just added a second layer onto your HTML document. Browsers that support JavaScript will provide the enhanced interactivity, and browsers that don’t support JavaScript will use the default interactivity.
  6. Add class attributes onto the HTML tags and set their values to the standard Microformat values. This third layer will make your document more globally useful and discoverable by machines.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: