Are You Using CSS3 Appropriately?

Oct 4 2011 by Delwin Campbell | 28 Comments

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.

Related Content

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

28 Comments

Saeed Neamati

October 4th, 2011

Interesting analysis of CSS3. But I disagree about UX. CSS3 almost is 100% in the UX layer. The smooth (instead of abrupt) change of a link’s color is in fact something in the UX layer, and when we don’t do it, we diminish user experience. After all, user experience can be judged by a user saying “I had a good experience surfing this site” and UI effects of CSS3 can result in that sentence.

However, your view was something new and interesting. Thanks.

Tom Kupony

October 4th, 2011

May only for good design patterns become deeply rooted in the designers, and people often update a browser and not stayed behind in ie6.

James Young (@welcomebrand)

October 4th, 2011

I’d say anyone who added a text shadow like the one in the example above would be strung up as a plain terrible designer not necessarily an abuser of CSS3!

I also think the Bifter isn’t aimed at lower end / older browsers, a decision no doubt based on their own demographic stats and research although I’d suggest it’s hardly unusable to have a couple of text labels overflowing / out of position. The core content is still entirely readable and as their source shows at least some IE6 conditional reference the site is still reasonably usable and accessible.

Good reminder of the benefits and of being responsible with the tools available though.

Cheers,

J.

Marco Barbosa

October 4th, 2011

Hi Delwin,

I disagree with your comment on The Biffer example.

IE 7 users are still able to read and get the design, aren’t they?

The text problems could be easily handled with a “IEvil7.css”

It’s all about P.E and we can’t hold ourselves from using CSS3 if we want to go forward.

I’m a strong believer of CSS3 and I think it should be *always* used if falled back properly.

Cheers!

Daniel15

October 4th, 2011

For sites like “The Bifter”, perhaps they just need to degrade gracefully / better. Sites don’t have to look the same in every browser, and people shouldn’t hold back on their designs just because Internet Explorer doesn’t support whatever they’re using. I’d probably create a fancy website for “good” (which in this case means “non-IE”) browsers, and a stripped-down “basic” version for Internet Explorer.

Isiah

October 4th, 2011

Yes CSS3 is great but as you say remember not all browsers are yet fully up to speed. I use CSS3 for inner box shadow effects to cut down the need for pngs/gifs to do the same job. Of course they (CSS3 shadows)disappear in older IE but luckily this isn’t a major deal-breaker. …and browsers will undoubtedly catch up.

Nina Haghighi

October 4th, 2011

Great article – there’s not enough of this kind on the web.

Technbuzz

October 4th, 2011

You mentioned great things because when you given enough freedom then there got to be the way to control’em. No doubt use fancy tools to replace javascript with css codes but usability, accessibility and UX must be considered first.

Bifter looks awesome

October 4th, 2011

Appreciate the article, but I couldn’t care less about IE7 users being able to view the awesomeness of that Bifter site. I only use CSS3 sparingly in my “real”,”mainstream” sites but for the obvious demonstration that was Bifter, I’ll give it a pass and stand in awe of what CSS3 will bring us.

Evan Skuthorpe

October 4th, 2011

Nice article. Though I disagree with your statement “only use CSS3 when there’s a good reason to do so”. I think you should say ‘only use certain elements when there’s a reason to do so’…

Rafael Barros

October 4th, 2011

Very good, but one thing…

About the support for older (and different) browsers, I am, at this point, against.

Don’t you think we shouldn’t have to write a code that fits in all browsers?

Ignoring the fact that is hard, the engine of the browsers shouldn’t be the same?

Ade

October 4th, 2011

It is true that websites do not need to look the same, or even very similar, in all browsers. But they do need to (a) look tidy and (b) not break or be rendered unreadable.

I was visiting an agency a few days ago at which someone clearly had not noted the need to ensure device-agnostic accessibility: the CSS coder had used multiple backgrounds behind white text in a way that rendered the text invisible in a very significant proportion of the world’s browsers. That was very simple to avoid, but he had not even bothered to check it.

We and the clients share a common client: the user. And he ultimately cares far more for usable and accessible content than fancy effects. Adding the latter without harming the former in any way is no more than doing your job properly.

Christian Krammer

October 5th, 2011

CSS3 is great, I love it, I even run a site about it. But simultaneously I make sure that everything is still perfectly usable in older browsers, even IE6. I am more the type of Graceful Degradation and always build the best possible version of a site first and then optimize it for legacy browsers. But no matter how you approach it, CSS3 always has to be linked with Progressive Enhancement/Graceful Degradation or otherwise you are designing past the Average Joe that doesn’t care about the CSS3 gimmickry.

HERE

October 5th, 2011

I’m always fight with IE.

Eric Cleek

October 5th, 2011

Interesting read.

I agree with the idea that CSS3 should be used sparingly, but unless it breaks the design or functionality of the site there is no reason not to use it.(although I do support using more gracefully degrading methods to achieve similar effects)

The idea that a site should look the same in all browsers and platforms is antiquated and should be tossed aside where it belongs. As long as a site is functional, readable, and performs well, minor visual differences are irrelevant.

David Bushell

October 5th, 2011

I semi-agree with most of this article!

At present (when browser support is not at critical mass) most advanced CSS3 can’t be used beyond simple eye candy. But in the near future these sort of tools will change web design. Sure, transitions and transforms are being used superficially today, but experimentation is where innovation starts. Media queries, after all, are part of the CSS3 spec and the’ve revolutionised responsive design.

I wrote a more abstract piece about building for “future design” that has similar notion — keep it accessible: http://dbushell.com/2011/10/01/building-for-future-design/

Your conclusion is spot on :)

Francesco

October 6th, 2011

Please, don’t ever write “The same look could’ve have been created using older web design techniques”. Never ever. First because we don’t need “the same look” and second the next thing you get with this line of thought is tables for layout. Or one big mapped image… pretty much anything could be created with big mapped images… are they an option?
“Progressive enhancement”, yes, bring it on, but the other is not an option.

Josh Humble

October 6th, 2011

Great reminder to not follow the cool-aid, and to think pragmatically. I love what’s coming with CSS3, and I avidly study the specification, but we always need to think of the user experience, and how ANYTHING we do affects it. We’ve see a lot of iffy technique employed in bad context with our new CSS3 tools; makes me wonder, for example, in good print design, wouldn’t create obtrusive text shadows in paragraph copy, so why do it in web?

Jacob Gube

October 6th, 2011

RE: using the same techniques as before. I think the point is that, you can use old techniques (CSS image backgrounds, text-image replacement), so is CSS3 really adding anything new except a different way of doing things, in just this one particular instance?

Also, there were things that could’ve been done to make that site degrade better in older browsers. Using CSS3 or HTML5 shouldn’t take away from accessibility (and accessibility, to me, means universal design, which I consider to include people using older browsers, mobile phones, etc.); in fact some of the changes and additions in the specs (especially HTML5) should enhance web accessibility.

Ade

October 6th, 2011

Re: “…in fact some of the changes and additions in the specs (especially HTML5) should enhance web accessibility.”

While certain others are reducing it. Whoever thought that it would be a good idea to permit more than one H1 heading per document has almost certainly never used AT.

Issues such as that and block-level anchors used as containers may well at some point be properly accommodated by a wide range of ATs: until then, it is just another good reason to be very disciplined when using HTML5 and very thorough when going through UA and AT testing.

It is, after all, a draft specification and a long way from becoming established as device-agnostic mark-up, which we already have in HTML 4.01.

Mick

October 6th, 2011

Rafael, I don’t understand your reasoning here.
The web is supposed to be for everyone, so then why are so many so-called web designers so selfish when it comes to coding? Why wouldn’t we write code that fits in all browsers, isn’t that the point of the web, that it is accessible to everyone? Not just the elite?

It is not difficult to write code that supports all web browsers, so why do so many developers get upset when they have to put in a small amount of extra effort.

That is just lazy coding.

Lillan

October 7th, 2011

I agree with Mick and this article. Even if many browsers supports CSS3 we should never forget web standards and cross browser capabilities. Even if IE is special, we all know that, the big question still are; to whom are you designing? Yourself or the web?

As Mick points out, it aint so difficult to make an alternative stylesheet, linked with conditional comments, to IE and those browsers who have difficulties to support css3.

Have we gone so far in our eager to use css3 so we don’t give a s**t if the layout explodes in case the browser doesn’t support css3? I really don’t hope so, otherwise it is to be selfish.

Rajesh

October 9th, 2011

Very useful article thanks for posting.

Bifter SVG Comic

October 10th, 2011

You’ll be pleased to know that the visual bugs on the Bifter website have now been fixed.

Please bear in mind though that the Bifter website is a demonstration of HTML5, CSS3 and SVG, thus its audience is predominately from the web developer sector. So it’s no surprise that both IE6 and IE7 users make up just 0.3% of Bifter’s web traffic.

Having said that, I think it goes without saying that any client work should always be inclusive for older browsers. On this occasion though Bifter doesn’t really fall into this category.

Thanks for the comments (both positive and negative) regarding the Bifter website. Although I don’t think the Visionaries (featured on the front cover) have had this much PR exposure since their heyday in the late 80s ;-)

Jay

October 11th, 2011

Haha, I am definitely NOT using CSS3 appropriately..until now. Thanks for the article.

sheff

October 17th, 2011

Nice article. It’s always good to be reminded that any technological enhancement is merely tool. A great tool can be used in inappropriate ways: I could use this hammer to try and change the channel on my remote control (hammer is a great tool but prob not the right one for the task). Keep UX as the focus and use CSS3 to enhance the completion of the task/experience etc.

baagdi

October 28th, 2011

I am fully agree with this article. we should not misuse of techno tricks coz it is still not full browser and device compatible. Use it wehere it is necessary. Thanks to the author.

Jason

May 28th, 2013

I agree with your notion of using CSS3 sparingly. I think it is important also to not that you should figure out your user base and which browsers they mostly use. Cross compatibility is really important. Thanks for the blog!

Leave a Comment

Subscribe to the comments on this article.