Tag: google

CSS Sprites and Accessibility

Yahoo’s Best Practices for Speeding Up Your Web Site lists minimizing HTTP requests as the very first recommendation. One of the ways they suggest doing that is by using CSS sprites (which I mentioned previously in Clever Ways to Save Bandwidth).

I recently applied this technique to a series of social media icons. Here’s an example:
http://osric.com/chris/css-sprites-social-media-icons-example.html

The example page uses a single image to display 8 separate icons from the following single image:

CSS sprites of social media icons

Be careful when using background images as links. Continue reading CSS Sprites and Accessibility

Clever ways to save bandwidth

When I worked for MLive.com, one of our practices was to leave out quotes around attribute values (except for alt attributes). This was to save on bandwidth costs. In spite of the fact that the page was no longer valid HTML (technically), all target browsers rendered the pages properly.

That might seem like nitpicking, but with over a million pageviews a day, all that ASCII can add up. Personally, I would prefer valid HTML, but I bet the financial side of that decision was pretty interesting. Continue reading Clever ways to save bandwidth