Progressive enhancement

In the world of interface development today there is one technique to which I fully subscribe without hesitation or regret - progressive enhancement. It is for me the guiding principle behind almost all of the work I do.

Progressive enhancement can mean a number of things but in a nutshell, it involves taking a base line for a web page and layering on enhancements which are not required in order to use the web page or to understand the content of the web page. If the browser being used can understand these additional layers, then they will be applied and will enhance the way the web page operates or looks.

The base line is the HTML code of the web page. The HTML code defines the content of the web page. The HTML of course should be semantic and where possible valid. In order to define the content of the page, the HTML code should be well structured, for example having a sensible header nesting order.

Given semantic and well written HTML, the content of a web page should be accessible to any user agent. The job of progressive enhancement is to layer on some additional "features".

There are two main forms of progressive enhancement used presently. It is in fact possible to argue that there are 3 or possibly 4 forms (and maybe even more), but the two main forms are CSS and JavaScript (I would perhaps also say that images are another main type of progressive enhancement - with well written alt attributes on image tags, the images are not necessary to understand the page).

So what do these forms of progressive enhancement do and how do they work?

CSS
The way the web page looks is defined by the CSS code used to style the page. The stylesheet uses a series of selectors to select elements defined in the HTML code and apply one or more of a wide variety of styling effects. These include applying borders, text colours, background colours and images, sizes and many many others.

JavaScript
Any behaviours not handled by the browser by default can be added through the use of JavaScript. JavaScript is a programming language with a C type syntax which is the language of choice for the web. The JavaScript code can perform a massively wide variety of different operations. These range from simple form validation scripts to whole applications such as Google Maps.

Progressive enhancement gives us a very powerful structure to building web pages. Using this technique, we create by default a separation between code for content, visual style and behavior. We are compelled to consider the implication of our enhancements and to make visual and behavioural aspects of the web page just that, enhancements and not requirements.

What will the page be like to use if the user agent does not support CSS? How will the core functions of the page operate without JavaScript enabled in the browser? By considering these questions, we are forced to write better HTML. In fact we are forced also to write better CSS and JavaScript. Everything needs to be considered carefully to ensure the separation of code remains and that the web page will be usable without the enhancements being available.

Not every web page can be progressively enhanced. In that instance, the appropriate alternative is a fallback version. Try browsing to Google Maps with JavaScript disabled in your browser and you will be taken to a page which will work without JavaScript. Not all fallbacks are this drastic, but a fallback allows the principle of progressive enhancement to be applied even in those few cases when the effort involved in using this approach is prohibitive.

The vast and overwhelming majority of the time, progressive enhancement makes writing a web page easier. The code will be better, cleaner and more maintainable. The web page more accessible and inclusive. The interface developer can be happy with a job well done!