Challenging Ourselves with Progressive Enhancement

Introduction

Most Web coding these days is a jumbled mess of HTML, CSS, and JavaScript. I was starting to believe that this was simply an ugly truth I had to live with, but then I learned about progressive enhancement. Progressive enhancement (PE for short) is a Web design strategy that uses web technologies in a layered fashion to separate the jumble and provide universal access to basic content and functionality while also providing an enhanced experience for those with more capable browsers and bandwidth.

Following PE requires some discipline. I and many other long-time Web developers have gotten used to using presentation markup, inline styling and scripting because we started at a time when there was no other way to provide a suitable user experience. However, browser technologies have matured to the point where the developers are now usually holding back the technology rather than the other way around.

With this in mind, I wanted to come up with a few simple rules for guiding Web developers towards this new approach. My idea is to offer a series of challenges, where each challenge involves implementing some common Web development task while being restricted to a set of rules to steer the developer away from obsolete techniques and towards PE. My intent is to offer a way to gently introduce the practice of PE to Web developers (including myself).

The Challenge

The Progressive Enhancement Challenge consists of four rules and three levels. The rules enforce separation of the layers while the levels enforce the progressive construction of those layers.

The Rules

1. All markup must be well-formed.
2. Transitional or other pure presentation markup must not be used.
3. Inline styles or scripting must not be used.
4. All links to external stylesheets and client scripts must be within the document head.

The Levels

Each level must maintain all the levels below it, so levels must be constructed in order and higher levels must not break lower levels.

Level 1: Function

The application must provide all required functionality even when client scripting and/or CSS is disabled or not available.

Level 2: Presentation

The application's presentation should be enhanced with appropriate styling.

Level 3: Interaction

The application's client-side behavior should be enhanced with appropriate scripting.

Conclusion

If you're not familiar with current Web technologies, some of the rules may seem impossible. For instance, Rule #3 prohibits the use of HTML event attributes such as onload or onclick. The Progressive Enhancement alternative to event attribute is to use unobtrusive JavaScript techniques such as jQuery event handler functions. Likewise, most other popular techniques prohibited by the rules have better alternatives that are well support in all the major modern browsers.

The goal of this challenge is to push us to become better Web developers. As such, it is merely a means to an end, and not an end unto itself. While I'd like to see this create a little friendly competition between developers, the last thing I want is for people to take this too seriously. If you try to use progressive enhancement for real work and find yourself in a situation where sticking to these rules is proving too difficult, don't sweat it; your page won't crumble to dust if you break a rule here or there. And please, please don't create or put any badge graphics on your Web pages claiming they are Progressively Enhanced!

Stay tuned for some PE challenge exercises coming to this blog Real Soon Now(tm)!