Progressive Enhancement

One of the things I was doing while working for the College Board was researching strategies for accessible Web content. So it became apparent that Pragmatic Progressive Enhancement, or what we used to call Graceful Degradation, was in fact the best architectural strategy for ensuring an accessible and robust user experience.

Think of a document being viewed in a Web browser as an MVC application (I found this idea in Ajax in Action),

HTML is the Model: HTML contains only structured data (content and markup).

JavaScript is the Controller: JavaScript is used to change the structure of HTML model, based on user decisions.

CSS is the View: CSS is used to filter and style data from the model so that it is displayed in a way the user understands.

In order to maintain separation between these ‘application tiers,’ there should be no JavaScript or CSS at all in the HTML.

Therefore, the ‘inline event handler’ attributes ONCLICK, ONMOUSEOVER, and their ilk are not needed and should never be used. And the STYLE attribute is never needed either.

An immediate benefit is that it then becomes trivial to lint and validate all of the HTML, JavaScript and CSS contained in a project just by filtering for file extensions. Of course there are many other benefits which are described at some length in articles such as those I have listed here on delicious.com.

Not directly related, but speaking of standards, this is the College Board’s beautiful HTML page which I use as a reference and style guide when designing templates.

And finally, for amusement, I found in my notes that, according to PPK, the term ‘unobtrusive JS’ was coined here.

Leave a Reply

You must be logged in to post a comment.