Progressive Enhancement


During Dan Cederholm's talk at An Event Apart he brought up the topic of progressive enhancement. I'm pretty excited about all the things that CSS3 will allow us to do but I also have some reservations. Do we go crazy and start embracing all these new-fangled CSS selectors or do we look at our content and design and see if they add meaning and clarity to our message?

<Bling />

The excitement around border radius and text shadow are definitely understandable. It makes me think of the HTML days of yesteryear when I was just learning. I thought that <Blink> and <Marquee> were THE COOLEST THINGS IN THE WORLD!!! But let's stop a second and think - The way I was using these tags were not thought out and they didn't add to the message I was trying to convey. They were just BLING.

We need to back up our design decisions instead of always jumping on the "cool things" bandwagon.

We Are Guilty...

I worked on a website a few months ago in which I implemented rounded corners.  I have to admit that I really had no reasoning for using border radius on this navigation. Now that I take a look at it again it does not really fit with the design. I think of sports or athletic training as something that's straight forward and rounded corners are more of a softer touch.

rounded corners

Some Progressive Enhancements To Consider...

Some of the coolest things CSS3 will offers us are border radius, RGBa transparency and text-shadow. Check out these examples of these new CSS selectors in action.

Border Radius

border radius

View the CSS

RBGA Transparency

rgba transparency

View the CSS

Text Shadow

text shadow

Apple Style nav tutorial that uses text shadow

Conclusion

Just because you can does not mean you should...unless you have a reason for it.