The terms progressive enhancement and graceful degradation have been floating around the web for a little over a year now. They refer to the way advancing technologies like HTML5 and CSS3 are used to serve up the best possible product to web browsers that support them while still giving those that don’t (see: Internet Explorer) a usable solution.
We’ve been weaving CSS3 into our sites for a few months now, but it really came in handy when I wanted to continue Cornerstone’s brand throughout some of the web elements in their new design.
Cornerstone had just approved this new logo identity before coming to us for their needs on the web:
The lighter green section has rounded corners on the top right and bottom left that I wanted to repeat throughout the site. Though some may not even notice, this gives their new design a little extra punch to help it stand out from the generic templates plaguing so much of the web today.
Before CSS3 web developers achieved rounded corners using images. It’s not a bad solution, just not the best. Images cause an increase in page load time and since we’ve added them to multiple parts of the site it would be a pain to swap out these images in the future if we needed to.
Enter border-radius:
With CSS3 compatible browsers like Safari and Firefox gaining market share we made the call to use these new technologies to give Cornerstone’s users the best possible experience while also decreasing our development time. Thanks to the border-radius property and the convenience of being able to apply it to specific corners of an element we could easily achieve the desired effect on multiple areas of the site:
When users with browsers who’ve not yet adopted CSS3 view the site they may miss out on the added detail, but they still get the same functionality as everyone else, and that’s what matters:
Conclusion? If you’re a web developer, consider using CSS3 for some of your upcoming projects. It’s an easy way to enhance the appearance and usability of your site while avoiding a lot of development time spent on optimizing for older browsers. Of course, implementation depends on who your users are, but even then it’s still extremely useful for quick prototyping. Also, try to go beyond using techniques like border-radius solely for buttons or borders. Find ways to deliberately enhance your design using these exciting new features.
