In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL,  Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):

Google CSS Sprite

Youtube, does things slightly different and uses a absolutely massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.

The CSS is relatively simple. Take the example of a simple unordered list with a different image for each item. I made a very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list:

<ul id="sprites">
	<li><a class="exclamation" href="#">Top Product</a></li>
	<li><a class="hot" href="#">Sizzlin Offers</a></li>
	<li><a class="offer" href="#">Special Deals</a></li>
</ul>

..and the CSS:

#sprites li {
 	list-style-type:none;
	font-size:1.1em;
	display: inline;
}
#sprites li a {
	background-image:url('yada.png');
	background-repeat:no-repeat;
	padding:5px 35px;
	line-height:35px;
	text-decoration: none;
	color: #333;
}
#sprites li a:hover {
text-decoration: underline
}
#sprites li a.hot {background-position:0px -165px}
#sprites li a.exclamation { background-position: 0px 0px; }
#sprites li a.offer { background-position: 0 -82px; }

The final result is a horizontal list, using a single image for the icons – no CSS hacks required for correct display in all the latest browsers! I won’t bother explaing the HTML or CSS as is self explanatory and very simple.

I personally find CSS sprites most useful for application icons as I can easily add a new icon class and set the background position accordingly. For instance, I’m currently working on a project that uses a lot of the fabulous famfamfam silk icons and have used a sprite similar to that on their site. While this is a lot of work initially, my recent discovery the sprite generator has limited this work load.

Sprites can be used a for avriety of things, including simple image rollovers – see a quick example I put together using a simple hyperlink and a single background image (image from devianrt). When I hover on the logo the background-position property simply shifts the spirite to right. You can view the result right here!

As with everything, you can take this idea a stage further and apply some JQuery to the mix to create an amazing Flash like menu.

301 Redirects Prevent 404 Errors

Google treats www.website.com and website.com as two totally different websites. This is very bad for your (or even a client’s) website as it may lead to duplicate content and different pageranks to those sites.  This is how Google “canonicalizes” the url and is very bad from an SEO standpoint.

In essence, a web server could return totally different results for each of those pages. I have also encountered the situation where clients have set their preferred domain in Google webmaster tools, have given out the opposite version for SEM and wonder why they don’t see results You can easily check the above by using the “site:” operator in Google search. E.g. site:www.website.com and site:website.com

You can use “mod rewrite” rules as a powerful method for redirecting many URLs from one location to another.  This is a simple server level technique for handling redirects. The way people handle this canonicalization issue is purely a personal choice, although the below method can be altered for directing to the none www version of the url.

The .htaccess file is simply an ASCII file created with any normal text editor. You need to save the file as ‘.htaccess’ (no filename, .htaccess is the extension!). Open you newly created .htaccess file in your favoured text editor and add the following lines of code, replacing domain.com with your domain:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule (.*) http://www.domain.com/$1 [R=301,L]

Upload the .htaccess file to the root folder of your website and you’re done. All your traffic will be permanently redirected from a non-www version of your website to a www version of your website. To do the opposite (direct all traffic to the non www version use the below code in the .htaccess file):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.domain.com
RewriteRule (.*) http://domain.com/$1 [R=301,L]

I am a full-time developer for an internet company located in Staffordshire (Midlands) of the United Kingdom. I have been designing and coding websites for over 2 years using PHP, ASP, JQuery, XHTML, CSS and JavaScript. I have been lucky to work on a wide variety of projects from small intranet sites, personal websites and full e-commerce storefronts. I am currently available on a limited basis for interesting freelance work. I also offer the following services (although you can contact me via email to discuss web services not mentioned here):

• SEO / Website Marketing / Offsite SEO
• Bespoke Website Design/Development
• Website Updates