Pixelmatrix Design

You may or may not have heard of “progressive enhancement” before. It’s a farely simple philosophy when it comes to designing or styling documents for the web, and it takes a bit of an open mind to accept, but it’s something I’ve been really thinking about lately. Put simply, it’s creating a design that looks good in older browsers, but adding in additional touches that really make the design shine in newer browsers.

Note: This is not the same as “graceful degradation” which employs a similar technique. Graceful degradation is built around the opposite technique. Designing something for modern browsers and providing a way for it to degrade (still work) in older browsers. Similar result, but different thought process. This is also a good way to design/code for sites that have more of a modern audience.

We’re in a bit of a transitional period now, with CSS1 being supported by all browsers, CSS2 being supported by many browsers, and some CSS3 being supported by modern browsers. The simple fact that we have so many browsers to support can make things very difficult. We want to support new technology, but our ability is hindered by needing to support the older browsers as well.

Progressive enhancement offers an elegant solution. Keep in mind, this isn’t anything new. It’s been around at least since 2003. With progressive enhancement we’ll design a site that makes use of CSS supported in all major browsers, currently limited to CSS1 and portions of CSS2. Then, rather than go through all the work to code things the hard way (using hacks), we’ll make use of the advanced features of CSS2 & 3 to add to the design. Older browsers still see a nice design, but newer browsers—especially with Firefox 3 being recently released—will see a nicer design.

Of course, this isn’t always the best solution, but I think it’s a good way to think, design, and code.

I offer this example as a practical application of this philosophy:

I recently designed a site (note: I didn't code most of it, but these flags were one of the things I did code) that needed some error “flags”. I thought it would be nice to have a gradient on them, use rounded corners and give them a drop-shadow, but I knew it would be pretty difficult to put rounded corners, and a drop shadow on these while still making it easily resizable and bullet-proof. I used progressive enhancement to make the flag look nice in all major browsers, but look especially nice in modern browsers.

Here is my example HTML:

…and the CSS:

Notice how I use CSS3 to apply some nice extras such as text-shadow (for an embossed look on the text), box-shadow (for a nice drop shadow), and border-radius (for rounded corners). I used a gradient image for the background of the span that was intentionally taller than expected, in order to leave room for expansion. I also used a pointer triangle image with the same gradient on it that was the same height as the gradient image.

The final result looks like this:

I hope if you weren’t already familiar with this philosophy that you’ll give it a try sometime. It's a different way to think, for sure. You have to give up some control over the design, but the reward is a solution that works well for everyone.

For more information on this check out the original SXSW presentation outlining this philosophy, and the Wikipedia entry.