Case Study: The Highway Safety Research Center CSS3

To get a better sense of many of these CSS3 benefits, 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, we thought we would critique one of our own.

Before CSS3
Figure below shows the HSRC home page. It hasn’t changed much since we 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.

We wanted to see how the current page would perform with all these images. So we downloaded it and tested it in Firefox 3.6, IE 8, and IE 6. Table below shows how many HTTP requests occurred and the average page loading time in each browser.

The home page for the Highway Safety Research Center

The home page for the Highway Safety Research Center

These loading times aren’t horrible, we suppose, but they could certainly be better. Especially in IE 6—the poor thing is getting a pretty long wait. If we 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 . When we originally made this page, we were using the background image technique called “CSS sprites” where you combine multiple images into one and move around the visible portion using the background-position property. But we weren’t using sprites as aggressively as we could have.
we didn’t want to compare the new CSS3 version we were going to make against this poorly optimized version, so we combined all the tabs into one big image, modified the CSS to use this new image, and tested this revised version of the page. Table below shows the results.

Each tab image is made up of three states of the link.

Each tab image is made up of three states of the link.

Performance in revised page

Performance in revised page
Taking a chunk out of the HTTP requests definitely 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 difficult 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, we 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.

CSS3 abilities overrode the need for nine images, previously used in the numbered spots shown.

CSS3 abilities overrode the need for nine images, previously used in the numbered spots shown.

we removed the sprite image used for the tabs, and remade the tabs without using a single image by using border-radius and CSS3- generated gradients . With these changes to the tabs, they’re now using real text, instead of an image of text, making them more accessible.

The image tabs (left) look almost identical to the tabs made with CSS3 (right).

The image tabs (left) look almost identical to the tabs made with CSS3 (right).

We used this same technique for the two tabs in the footer, and replaced the footer’s gradient background image with a CSS3 gradient. we also used a CSS3 gradient to replace the background image in the project areas box and behind the “Latest News” text. Then we replaced the small gradient at the bottom of the header with a box-shadow on the navigation bar.

We used border-radius to remove the rounded corner images from the top and bottom of the project areas box, the bottom of the list inside it, and the “Latest News” heading block. For both the “HSRC Project Areas” and “Latest News” heading text, we got rid of the images and instead used @font-face on real text. The font we chose isn’t identical to that used in the images, but the one used in the image doesn’t allow @font-face embedding in its license, and the new one is pretty close. For the three bottom borders under the “HSRC Project Areas” text, we used box-shadow, which can create the appearance of multiple borders without having to use an image.

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 fixed without causing much trouble to non-supporting browsers. The CSS file 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.

Table below shows how this page performed. Even though using @font-face added two HTTP requests, the overall number still decreased significantly because we got rid of nine images. we also got rid of the JavaScript we were using in IE 6 to support alpha-transparent PNGs; it was no longer needed since there are no longer any alpha transparent PNGs.

Performance in CSS3 page

Performance in CSS3 page

The decrease in loading time that we measured were 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 magnified by replacing more images, and it could be much larger on larger or more complex sites, where it’s not uncommon to find 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 significantly 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 benefit 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 Figure , showing IE 8, and take our 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, we don’t think so. Does it look horrible? Again, we 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?

The page looks fine in IE 8 and earlier, even though these browsers don’t understand the CSS3 we added

The page looks fine in IE 8 and earlier, even though these browsers don’t understand the CSS3 we added

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, and we’ll add IE workarounds several times and in several ways here. We are not saying you should never provide workarounds for IE or other browsers, but you have to consider the tradeoffs.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics