This post complements the previous rant (Raising Expectations via Progressive Enhancement) by providing a couple of examples of how progressive enhancement can be used to improve a user's experience of a web page if their browser is capable of it...
In many of the cases, progressive enhancement builds on good basic design principles, design for accessibility, and increasingly, semantically sensitive design (e.g. though the use of microformats and semantic design markup).
In this case, tabular data included in a web page can be progressively enhanced to display a graphical view of the data. Good examples can be found at Automatic conversion from simple, accessible data tables to YUI Charts, Generating charts from accessible data tables using the google charts API and Creating accessible charts using canvas and jQuery (filament group).
The filament group library will actually generate a whole range of chart types from a table - pie charts, line charts, area charts, bar charts and stacked bar charts.
For an example, visit: Developing an accessible slider.
Other form elements are amenable to progressive enhancement too. For example, radio button lists (via jQuery Ratings - A Progressive Enhancement Approach):
Although not available as a progressive enhancement library, it should be possible to extend the YUI slider control library so that it could progressively enhance radio button lists with a YUI slider.
If you have a text entry box on your form, wouldn't it be nicer to use something like this?
More details at 9 of the best Rich Text editors Reviewed.
(See the original page beneath the semi-transparent black layer?) One of the nicest libraries I've seen to achieve this effect can be found, complete with a range of demos, at Shadowbox.js by Michael J. I. Jackson.
Finally, link enhacement in terms of linked to resources - and Scribd. Using a scribd progressive enhancement library, PDF document links found within a page can be rewritten to either link to a Flash preview of the document on scribd, or embedded withing the page directly using Scribd iPaper:
(See also No More PDF Reader Hell? Hello iPaper - You Taking Note...? and Scribd iPaper Bookmarklets and Greasemonkey Script and my iPaper utilities page: OUseful Scribd iPaper Tools.)
All that's included in the page is this:
The bounding box, menu options, line numbering and code coloring are all progressive enhancements using the SyntaxHighlighter code library.
Tags: progressiveenhancementPosted by ajh59 at March 28, 2008 12:07 PM