webkroll.com

The idea behind progressive enhancement - as the name already indicates - is to step away from an ‘all or nothing’ approach for a certain technology and instead gradually enhance the website functionality by adding additional layers depending on the clients abilities to use the functionality in the new layer.

A simple breakdown of these ‘layers’ would be as follows:

1. Content
2. Semantically meaningful markup for the content - (x)HTML
3. Presentation layer - CSS
4. Behaviour layer - DOM scripting

With a progressive enhancement approach to building websites, you can ensure that not matter how advanced and code rich your website might be, the core information of the site and the way in which it is useable and accessible for your users will remain the same.

Just because someone does not have Javascript enabled does not mean he will be locked out of your site.

Keeping each layers technology as seperate as possible is vital, which means trying to avoid the use of inline CSS and Javascript and instead having them available in their own respective files to keep each of the layers as separate as possible. A very interesting point Jeremy Keith raised raised during his presentation at WebDirections - South concerned the handling of Javascript events triggered from HTML elements.

In this case multiple commonly used methods to trigger popups were showcased outlining their flaws (for accessibilty and usability purposes) and demonstrating a method to use unobtrusive Javascript to trigger the event by filtering the site markup for certain class/id names on links that would trigger the event instead.

To give you a brief example of the bad & ugly:

1. <a xhref=”javascript:window.open(’popup.html’)” mce_href=”javascript:window.open(’popup.html’)” >some popup</a>
2. <a xhref=”popup.html” mce_href=”popup.html” onclick=”window.open(’popup.html’); return false;”>some popup</a>

… and the sleek solution to the problem:

1. <a xhref=”help.html” mce_href=”help.html” class=”popup”>some popup</a>

As mentioned above the 2nd part to this solution is a Javascript function that will trigger the window.open event when a link with the correct class is clicked by the user.

This little example shows how parts of a site can developed in a way so that all layers are separated to their best and ‘advanced’ features being available to more capable clients without breaking the link and locking everyone not ‘enabled’ out.

I strongly suggest you head over to the WebDirections website to have a look at Jeremy’s presentation on the topic with a special focus on AJAX. Apart from the slides available at the site I would also recommend to have a quick peek at the live blog notes that Andrew posted during/after Jeremy’s presentation.

Posted on: Tuesday, October 24th, 2006 04:07:34
Posted in: Development, WD06
Feed: RSS 2.0
Leave a response | Trackback