This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Progressive enhancement IRL

Today I gave a presentation about progressive enhancement to some colleagues of mine. Instead of posting the presentation I’ll just post the URL’s and the different browsers to check them in. Please leave additional examples of enhanced sites in the comments.

Media Queries
Check this page on a wide screen and make it smaller. Then check it on your iPhone.
Check this page in a browser and on your iPhone
Resize this site in a modern browser. Also check it on your iPhone.

Subtle enhancements
See the little differences in the form on this page when you use Firefox and Safari (also hover over the inputs).
Check the top navigation in Opera (or IE) and then in Firefox or Safari.

Visible enhancements
Check the mouseover on the DVD’s first in Opera (or IE7+), then in Safari.
See the ‘highlights’ (every fourth article on the page is given a yellow background with CSS) and resize the window in Camino (or IE or another old browser) and then in Safari.

Extreme enhancements
Go click on the answer to the question Do websites need to be experienced exactly the same in every browser? in IE6, IE8, Opera, Firefox and Safari.

And by the way, if you know how to explain progressive enhancement in two sentences (not too long), elevator pitch style, as if you’re talking to an ignorant audience, please do so in the comments.