Last week I announced a progressive enhancement script for select elements in web pages.
At the time, I didn't know "progressive enhancement" was the proper buzzword for what I'd written. This is one of my pet peeves: even with Google, we still have to contend with the snottiness factor of the people who write web links. You can easily find what you want... if you already know what the kids are calling it these days.
But anyway: I have since been educated.
Progressive enhancement is all about making web pages that are complete and functional as plain vanilla HTML and CSS, but
more awesome in the presence of JavaScript.
As opposed to what? Well, the old catchphrase was "graceful degradation." Sounds the same, doesn't it. But there's an important difference in philosophy that drives a difference in results.
Under the "graceful degradation" regime, designers created awesome websites with JavaScript, using HTML and CSS almost as an afterthought. Then they went back... sometimes at gunpoint... and made a more or less completely separate version of the page for Those Poor Losers Browsing At Work With Javascript Disabled. This version of the page was never as cool and rarely as functional. And something usually got left out.
"Progressive enhancement" is a fundamentally different approach. The web application is built first in plain-vanilla HTML, with all interactive features completely accessible through HTML forms and links. Then, if JavaScript is available, JavaScript code latches on to the plain-vanilla form controls and enhances them to provide a more attractive, responsive and usable interface... without changing the way the browser and server interact, except where it is actually beneficial to do so. More than one person has described it as a "layer-cake approach."
My enhanced multiple select widget, and the
alternative implementations that others pointed out, are obvious examples of progressive enhancement. Another is this
jQuery-based ratings widget, which replaces a set of radio buttons with a more attractive interface when that is possible. Or
this slider control that replaces a select element. Or the
jQuery UI Tabs widget, which enhances plain ol' UL lists and DIVs into a tabbed interface.
jQuery is especially well-suited to progressive enhancement because it is so good at assigning new behavior to any part of a document by selecting things by tag, class and so on, without sprinkling JavaScript code throughout the page. But there's plenty of great progressive enhancement going on
outside the jQuery community as well.
One of my favorite things about the progressive enhancement strategy is that it allows developers to develop, right away, while front end designers (there's that term again) sweat not just the visual appeal but the visual interface.
Of course there are desirable ends that can't be easily met purely by transforming existing form elements into pretty widgets. Sometimes there are major benefits to be achieved by submitting forms via AJAX so that the entire page isn't reloaded, and that's a major change in the way the browser and the server interact. But well-designed development frameworks like
Symfony make it easy to detect whether a request is an AJAX request or an ordinary one, making it easier to gracefully handle the changes in behavior that are truly worthwhile.
I intend to advocate for a stronger emphasis on progressive enhancement both within P'unk Avenue and in web development in general. It's a smart strategy that produces elegant, uncluttered and distinct HTML, CSS and JavaScript code.
