March 28, 2008
Progressive Enhancement - Some Examples
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).
Progressively Enhancing Data Tables
The first example is one regular readers will already be familiar with - the idea of an 'accessible chart' (as described in RESTful Image Generation - When Text Just Won't Do.
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).
If the table is marked up appropriately, an included Javascript file will automatically enhance the table with a graphical view.
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.
Data tables themselves can be progressivley enhanced to make tables skinnable, sortable by columns, selectable by rows (or cell), reorderable, editable and so on. If table rows and columns are marked up appropriately, controls like the YUI DataTable will add the progressive enhancements for free with the inclusion of a single Javascript file (check out the YUI DataTable examples to see just what's possible).
Progressively Enhancing Forms
The accessible slider is a progressive enhancement of a drop down, enumerated list.
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.
Progressively Enhancing Links
Finally, a return to something I've been going on about for ages (Interaction Design - "Now Follow This Link"), the use of lightboxes to view linked pages and embedded movies.
(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.
(Related are page previewers like Cool Iris and the annoying Snap previewer.)
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.)
Programming Code
Styling programming code in online materials can be an issue. But it is possible to progressively enhance code in a language sensitive way, using colour coding techniques found in the majority of code editors. Here's an example:
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.
Summary
This post has reviewed several examples of progressive enhancement in action. Some of the rationale for using progressive enhancement as a way of rolling out user interface innovations is described in Raising Expectations via Progressive Enhancement.
See also: Accessible Data Visualization with Web Standards
Tags: progressiveenhancement
Posted by ajh59 at March 28, 2008 12:07 PM