How to progressively enhance websites

Do you manage a web development team?  Have you hired one to build a website or application?  Making sure your web developers embrace Progressive Enhancement makes a better experience for your end-users, your web development team, and you.

But enough about you and your web developers

The website has an audience — your users or customers — and they use a wide variety of web browsers.  Right or wrong,  customers consume your website via the browser they use for everything.   Your browser preference is almost certainly irrelevant, best to let the statistics decide what browsers must be supported.  While it’s fun complain about how Internet Explorer 6 just won’t go away, that’s no reason to provide a crappy experience for IE6 users.  Yes, everyone should upgrade, but some will have legitimate reasons why they can not.  Enter the progressive enhancement development strategy.

For any user experience, but especially websites

Progressive enhancement strategies can be used for just about any user experience, but originated as a best practice for website development. The concept is simple — make the site work in the least sophisticated browser you are going to support, then add extra design and behavioral layers for browsers that support them.

My progressive enhancement motto: “get the web application working, then make it sing”.

A few examples of progressive enhancement

Date pickers for date fields on forms

Enhance date fields with JavaScript calendars

JavaScript and CSS can make date fields on forms display a calendar to let the user choose a date instead of typing one in.  If the browser does not support JavaScript the form field is rendered as a normal text input.  Your server-side validation ensures that the user provides a valid date string.

Overlays can save page loads, and let the user know they can get back

Lightbox JS displays larger images with JavaScript and CSS in an overlay instead of a new page view

Opening full size images of thumbnails in overlays instead of pop-ups, new windows, or new pages can be esthetically pleasing.  More important — if less obvious — is the usability improvements that reduce the user’s perception of extra page loads, and the ability to feel like it is easy to return to the main body of content.

Eliminate extra page loads

Google and other search tools offer auto-suggestions to help the user find what they are looking for on the first search. This eliminates page loads for the user.

Some interface behaviors benefit from communicating many times with the server: primary form validation, localization of address fields, and auto-suggest search fields.  For browsers without JS and AJAX support you rely on the web server and CGI layer to handle all of these tasks.  For the most capable browsers, you get a user experience that is highly responsive and gets the user what they need in fewer steps.

Bridging the web and the real world

Air Canada will send an electronic boarding pass to your smart phone. No more misplacing the paper boarding card.

At an airport, every passenger boards with a paper boarding card.  A progressive enhancement some airlines offer allows passengers with smart phones to board with a 3D bar code displayed on their phone’s screen instead.  One less thing to carry, potentially shorter lines, and smug satisfaction that their $500 phone did something unique — all part of the progressively enhanced user experience.  Everybody else still gets on the plane the regular way.

Back to the web development team — why embrace this approach?

First of all, you get the fundamentals of your back end done early, and ready to be tested and refined during the rest of the project.  The interface has nothing to be applied to until this is done — and all the interesting interface work happens once the website is functional with default rendering in browsers.

Secondly, your development and design activities can start at 20% overlap and work towards 80% overlap the project nears completion.  When the design and development people (or halves of your brain) are spending 80% of their time on the same problems, you are fine-tuning the website and this is where progressive enhancements can make it sing.

Finally, support for cleaner code.  There is no guarantee — but if you separate markup, style, and behavior — a framework for cleaner code is intrinsic in your project.

The progressive enhancement layer cake

Progressive enhancement layer cake. Every layer above semantic HTML is up to the interface and usability team members - but the core features of the website are already baked in before this work begins.

The foundation of the website is bare of any stylistic or behavioral enhancements via CSS and JavaScript.  If you stop developing here, you rely on the default rendering of the user’s browser, but the website still works.  The HTML layer is semantic, used to markup the content cleanly, with no markup for the purposes of design or layout.  The web server, CGI, and database layers are blissfully unaware that the website is not attractive, and do their part of the work as expected.  The interface team can layer enhancements via progressive application of CSS and Javascript.

Some users’ expectations have been raised, others, not so much

The capabilities of better web browsers like FireFox/Safari/Opera — and to a lesser degree IE8 — have raised the expectations among some users of what a web interface should be.  Others are blissfully ignorant that there are better ways to experience the web.  Progressive Enhancement allows you to meet both types of expectations.

Stopping before the bleeding edge

Certainly there is some browser out there, flying under the radar at the moment, that renders CSS3 border-images better than anything we’ve ever seen.  It’s good that a few people care about this — we need new horizons — just not in the websites we are developing today.  Some day there will be enough browsers supporting features like this — and designers and usability experts who want to use them for all the right reasons.  Use your head when it comes to the absolutely newest possibilities — just because you can make Firefox render text-shadow doesn’t necessarily mean you should.

Wrap-up for web developers and managers

If you build websites to work properly with default browser renderings, you get a solid foundation completed sooner.  Interface and usability enhancements are hugely important, but they should be layered on top of a semantically marked-up website.  This saves you time in the short and long term, both in coding and testing.  Also, you put yourself in a position to give every user the type of experience they are expecting from their browser of choice.  When people get what they expect, they are happy.  When you follow-up with even more in your next release, they start to wonder how they ever lived without your new wonderful user experience.