Are You Using CSS3 Appropriately?

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.
It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.
It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.
It promises less reliance on expensive graphics software like Photoshop.
But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.


The new CSS3 capabilities should be treated just like any other web technology we work with: It should always support user-centered design and the site’s goals and purpose. And if CSS3 is applied in any other way than that, then it becomes a dispensable component within our website production process.

CSS3 Does Not Change Design

In terms of design principles and visual presentation best practices, nothing has been altered by CSS3, even when we’ve been given fancy transitions, transforms and typography effects to play with. These are all superficial tools in web design, and we’ve had these things even before CSS3.
From the user’s perspective — which is always the most important viewpoint — these new cosmetic CSS3 properties matter even less. Most users, we must remember, won’t notice the subtle effects we put in our designs, like links changing colors smoothly instead of immediately. These are on the aesthetic level, and shouldn’t get in the way of the user experience.
The real paradigm shift comes in the new way of approaching and carrying out our website design process.
For example, with better support for media queries, we can now more easily produce flexible and responsive web designs that optimize the user experience depending on what browsing device they use. That’s huge, and introduces plenty of new concepts in our traditional site-building methodology.

With the new CSS3 selectors, we now have a much better ability of targeting HTML elements and carrying out animation effects without the use of JavaScript or a web development/Ajax library like jQuery.
CSS3 isn’t about fancy text shadows and gradients; that’s only at the surface of it. It should be about enhancing the user experience and being able to produce better sites in a more efficient manner.

Using CSS3 Appropriately

Now that we have more tools at our disposal, we can design interactions more naturally. We can use these new features to our advantage by applying them where usability and the user experience is improved.
Or we can use CSS3 to our detriment, where we focus on the new superficial CSS3 features, loading up our work with extraneous text shadows, color gradients and fancy rotation effects simply because we can.
When we decide to use CSS3 in our work, we should always keep in mind that function is more important than form. There is an important line between a beautiful design and a good design.
As a rule, only use CSS3 when there’s a good reason to do so. For example, you might use the text-shadow CSS3 property to create a good visual hierarchy, pulling greater attention to more important textual elements. But if everything has text shadows for no other reason than because it looks cool and is out of the ordinary at the expense of readability, then it is definitely not a good use this new web technology.

We have to put usability, accessibility and the user experience at the forefront of the design process. Everything else comes second.
The Bifter is an example of heavy reliance on gratuitous CSS3. The site looks great on a CSS3/HTML5-supporting browser like Google Chrome.

Unfortunately, it almost falls apart in IE7.

In this instance, the experience of users with browsers that do not support CSS3 was neglected for form. The same look could’ve have been created using older web design techniques (e.g. no CSS3, no HTML5, using a PNG fix for alpha transparency, etc.) without sacrificing the user experience of IE7 (and below) web users.
Better yet (though it could involve additional development time), progressive enhancement can be applied so that the site appears decently on older browsers while providing a better/enhanced experience to those who choose to use CSS3/HTML5-supporting browsers.
Using CSS3 should:

• Support — and never hinder — usability, accessibility and UX
• Improve web performance
• Speed up website development

If, however, you find yourself in a situation that doesn’t achieve any of the above, then is CSS3 really the right tool for the job?

Conclusion

We’ve been given a lot of power, and thankfully, we’ve been fairly responsible with it so far. As a whole, our web designs haven’t taken a step back because of CSS3. We’re using the new features smartly, pushing the envelope without neglecting the overarching goals of Web Design, which is to support the needs of users.
So long as we continue in this vein and we’re keeping it simple, I don’t think we have to worry about CSS3 being an issue in Web Design.