Monthly Archives: November 2009

Learning CSS Sprites

What exactly is a sprite? It’s a CSS technique that can make your website load faster. Instead of having a dozen images that are included on every page of the site (one for your logo, one for an RSS button, a few fore social media links, etc.) you combine them all into one big image. You can then use CSS to display just the portion you need in any given spot.

How does this improve loading times? The major bottleneck in the loading of a web page today isn’t download speeds so much as concurrent downloads. A web browser will only download two files at once from a web server. After the HTML is downloaded, the browser has to grab CSS, JavaScripts, and images from your server. You might have a lot of those secondary files, and only two will be loaded at once. If you combine your template’s images into one big file, they all get downloaded at once, instead of two at a time. Also, you may shave off a few kilobytes of file size in some cases, but that’s not as important.

Now how does this trickery work? Let’s use Apple.com as an example. They keep their header navigation in a sprite that looks like this:

Apple navigation header sprite

As you can see, the buttons are laid out in a row, with their alternate states underneath them. A sprite starts out as something just like that: an image full of little images. The real trick is making it spritely.

Continue reading →

Smashing Magazine Redesigns and Launches a Network

Smashing Magazine has redesigned again, further evolving their visual style rather than throwing away the old completely, but still bringing some new and interesting features into play. It’s still as ad-heavy as before, but that can be expected. At a glance, the navigational header…

Does “Pay What You Want” Work?

The collective internet mind vividly remembers the “Radiohead Experiment,” when the musical group Radiohead decided to put their new album on the internet for download, but with an odd twist. They let you value their product and pay the amount you desired. You could…

Version Control with Git

There’s an interesting tutorial up on Net.Tuts+ that caught my attention: Easy Version Control with Git. Git seems like a powerful tool, and one I’d definitely like to look into in the future. It seems like it can do a bit more than SVN,…

WordPress.org Crowdsources Plugin Compatibility

Does that plugin work with the latest version of WordPress? It’s hard to be sure until you install it. After all, a plugin may work perfectly fine across over several versions of WordPress, but the author might have been too busy (or indifferent) to…

Page 3 of 3123