Embracing Progressive Enrichment in Web Design

What is Progressive Enrichment?

The term progressive enrichment was coined by Dan Cederholm of SimpleBits, and refers to the practice of using advanced CSS and CSS3 properties in browsers which support them, while allowing them to degrade gracefully in browsers where they are not supported. (You may be familiar with the term progressive enhancement, which refers to web site scripts which degrade gracefully when scripts are disabled).

For a simple example of progressive enrichment, look at the Twitter home page in a modern browser such as Chrome or Firefox, compared to Internet Explorer 8 or below.

Rounded corners in Firefox (left) and square corners in IE8 (right)

As you can see,the white box and the ‘sign in’ button have nice rounded corners in Firefox, and slightly pointier square corners in IE8.

This is because Twitter has employed the use of the CSS3 ‘border-radius’ property, which is supported by most modern browsers, but alas, not the latest version of Internet Explorer!

They could have achieved the same look in IE if they had really wanted to, by using background images and nested divs, (or clever scripts like CSS3Pie), but they evidently decided that having slightly rounded corners on these elements was not important enough to warrant the extra time/effort/code that it would cost to produce the desired effect.

This is the whole concept of progressive enrichment. Using the technology to enrich a design where available, and where the absence of support for that technology will have negligible effect on the user.

Not just rounded vs. square corners

Here’s another example from a UI design we did for a client recently. They wanted a compact way of displaying the date, so we decided on a calendar style.

Here you can see the final effect in browsers with good CSS3 support, compared to (you guessed it) Internet Explorer:

Rich CSS3 styles in Firefox (left) compared with IE8 (right)

The visual effects on the calendar on the left (seen in Firefox) are all achieved through CSS3 properties (a combination of border-radius, box-shadow and a gradient effects using inset box-shadow). It looks like an image, but the code is lightweight, the text resizes beautifully, and it was really simple to produce.

The calendar on the right (seen in IE8) uses the exact same code, but because the CSS3 properties aren’t supported, it simply ignores them and renders the calendar in a much simpler, but equally usable style.

Spread the word

Ok, so maybe you’re convinced that progressive enrichment is the way forward, and that web pages don’t necessarily have to look identical in every browser. The hard part is convincing your clients!

A lot of clients will be unfamiliar with these concepts, and will insist on seeing your beautiful designs produced pixel-perfect in every browser under the sun.

I think the key to convincing them otherwise is to educate them on the difference between things that will have a direct effect on the success and ultimately the profitability of their web site, and things that have absolutely no effect whatsoever. (When was the last time you refused to buy a product from a web site because the ‘Add to Cart’ button didn’t have rounded corners?)

We like to spend more time optimising web sites for maximum conversion, and less time hacking CSS to make a poorly-performing site look very slighty prettier.

Further Reading

For more on progressive enrichment, and more examples of CSS3 properties you can use today, you need to read Dan Cederholm’s Handcrafted CSS. This version comes with a DVD containing Dan’s 10 essential Web design guidelines: