Progressive Enhancement in Practice

It's one thing to talk about the importance of progressive enhancement. But how does it actually work in practice? Let's take a look at a specific example from a recently launched site, the Adaptation Learning Mechanism. One of the key functions of this site is to find content by geographic location. The content is related to locations primarily with the location module. A hierarchical taxonomy also places content in broader regions, associated with location's broadest specificity, country, via taxonomy synonyms and a little nodeapi glue. Views exposes all of this as filters on a list of content and we have a functional search by location. Two things to note about this: 1) it works and 2) it could be improved. That's exactly how an HTML-only interface should be. People who aren't using JavaScript don't expect a JavaScript-like experience, but they do expect the site to work. So we're in good shape, but there's still a lot of room for improvement here. Both the region and the country lists are rather long, so it can be difficult to find the right place. Also, it's possible to enter impossible locations, e.g. a country of Cuba and a region of Western Asia. Finally, it would be nice if we could see the search results without a full page refresh. We can improve all of this with JavaScript. For the first issue, we add a text field and set it to autocomplete with region and country names. Whenever a country or region name is typed, the corresponding option is automatically selected. Though they're still driving the search results, we hide both the region and country selects, because we've replaced them with an easier method of accomplishing the same thing. Alas, we've actually removed a bit of functionality here; though auto-completes are better than selects for searching, they're actually worse for browsing. So we improve the browse-ability with a link to a page with a browse-able list of regions and countries. For the second issue, we update the region select whenever the country select changes, selecting the associated region. So if you have Western Asia selected and you choose Cuba, it will change Western Asia to Caribbean. The last issue, speeding up the response time, is actually the easiest to address. We simply turn on AJAX in Views. We've now enhanced the experience with JavaScript, but it could still be even better. People don't always think of locations as names; we often think of them as points on a map. Though Morocco is next to Egypt in an alphabetic list of countries in Northern Africa, the two are spatially very far apart. Flash would be useful here. After checking for Flash availability, we replace the link to browse locations with a Flash map for doing that. When areas of the map are selected, we select the same areas on the hidden selects. And from there, it works just as if someone had used the selects directly. We also change the auto-complete field to update the Flash map in addition to the selects, so the map always reflects the actual location selection. That's all easier said than done, of course, but that's the basic approach.

1. HTML-only: works
2. HTML+JavaScript: works better
3. HTML+JavaScript+Flash: works best

The key step here is incredibly simple: HTML-only works. That's not hard to do, but it requires a consistent focus. It's really easy to start thinking about the really cool Flash map and completely forget about the HTML-only alternative. So this is a friendly reminder: don't do that.