CSS3 Case Study: The Highway Safety Research Center
Adapted from Stunning CSS3: A project-based guide to the latest in CSS (Peachpit Press)
To get a sense of many of the beneﬁts of CSS3, let’s look at how a real site could be tangibly improved by using CSS3 in place of older web design techniques. Instead of picking on some stranger’s site, I thought I would critique one of my own.
I designed and developed the CSS and HTML for the UNC Highway Safety Research Center’s site back in 2006. The illustration below shows the HSRC home page. It hasn’t changed much since I originally built it, and isn’t nearly as complex as some of the inner pages, or certainly as many other web pages out there, but even so, it has a lot of images for such a simple page. You can see that it uses lots of rounded corners, subtle gradients, and shadows.
I wanted to see how the current page would perform with all these images. So I downloaded it and tested it in Firefox 3.6, IE 8, and IE 6. The table below shows how many HTTP requests occurred and the average page loading time in each browser.
These loading times aren’t horrible, I suppose, but they could certainly be better. Especially in IE 6 — the poor thing is getting a pretty long wait. If I could get the number of HTTP requests down, that alone would make a big dent in loading times across the board.
A lot of these HTTP requests were coming from the tabbed navigation bar. Every tab is a separate image that contains three states:
the inactive state, the rollover state, and the current page indicator, as shown below. When I originally made this page, I was using the background image technique called “CSS sprites” where you combine
multiple images into one and move around the visible portion using
I didn’t want to compare the new CSS3 version I was going to make against this poorly optimized version, so I combined all the tabs into one big image, modiﬁed the CSS to use this new image, and tested this revised version of the page. The illustration below shows the results.
Taking a chunk out of the HTTP requests deﬁnitely improved the page loading times, especially in the case of IE 6. But keep in mind that this one big sprite image with all the tabs in it is was more difﬁcult to make and will be harder to maintain than individual images; it also made the CSS more complicated than before. That’s the tradeoff that you get any time you use sprites. But this page was a better comparison for a CSS3-enhanced version of the page.After CSS3
To create the CSS3 version of the page, I removed nine images and replaced them with pure CSS equivalents. Despite the changes, the page looks almost identical to the “before” version when viewed in modern browsers.
I removed the sprite image used for the tabs, and remade the tabs
without using a single image by using
I used this same technique for the two tabs in the footer, and replaced
the footer’s gradient background image with a CSS3 gradient. I also
used a CSS3 gradient to replace the background image in the project areas box and behind the “Latest News” text. Then I replaced the
small gradient at the bottom of the header with a
This isn’t every single instance where CSS3 could be added on this
page, but it does take care of the ones most easily and quickly ﬁxed
without causing much trouble to non-supporting browsers. The CSS
ﬁle size has increased slightly due to all the new CSS3, but not by too
much, because most of it replaces long background declarations. The
HTML is identical, except for changes to what’s linked to in the head.
The table below shows how this page performed. Even though using
The decrease in loading time that I measured was compared to the optimized “before” version that used the one big sprite image. On average, loading time went down by 15 percent in Firefox 3.6, 13 percent in IE 8, and 25 percent in IE 6. This is a limited example, of course; this decrease could be further magniﬁed by replacing more images, and it could be much larger on larger or more complex sites, where it’s not uncommon to ﬁnd several dozen or more “interface” images (as opposed to content images, like photos) on a single page. But the point is that CSS3 alone was able to make the page load signiﬁcantly faster, as well as improve its usability and accessibility a bit. This can translate into happier site users, and happy users are always good for the people behind the site too.
Ironically, even though IE 6 can’t see a bit of the changes we’ve made, its users beneﬁt most from the addition of CSS3 to the page. IE 6 users get to enjoy much faster loading pages, thanks to these CSS3 effects replacing images.
But how does it look in IE? Is it a horrible train wreck? See for yourself in the illustration below, showing IE 8, and take my word for it that IE 6 is practically identical. IE simply sees rectangular corners instead of round ones, and no subtle gradients. Does it look just as good? No, I don’t think so. Does it look horrible? Again, I don’t think so. Is there any reason IE users will know that they’re missing out on these visual effects? Not likely. And even if they did, do you think they would choose rounded corners over faster page loading speeds?
Note: The beta of IE 9 available at the time of this writing does show most of CSS3 effects I added. It may show even more by the time it’s actually released.
You could work around IE’s failure to see some of the visual effects by feeding it the rounded corner images and so forth, but is it really worth it? It’s a lot of extra work for you, and it takes away all the great gains we’ve made in page performance for IE users. It depends on the project; there are lots of times where it makes sense. I’m not saying you should never provide workarounds for IE or other browsers, but you have to consider the tradeoffs.
Don‘t miss the next Insight article on Graphics.com. Get the free Graphics.com newsletter in your mailbox each week. Click here to subscribe.
Excerpted from Stunning CSS3: A project-based guide to the latest in CSS by Zoe Mickley Gillenwater. Copyright © 2011. Used with permission of Pearson Education, Inc. and Peachpit Press.