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.

Another less known theory is that spiders get full when crawling a page, semantic coding practice will allow for cleaner and more lightweight code. For instance, when crawling a badly coded page with lots of line styles and JavaScript (E.g. content not useful to a spider) the spider may become full too quickly and leave – missing you important content contained further on within the page.

Validating your site to at least xHTML Transaitional 1.0 (the test strict version, compared to xHTMl 1.0 Strict) is highly encouraged and is an area often ignored by developers. Below, I’ll quickly outline some of the common validation errors and how to easily fix them:

cannot generate system identifier for general entity X - 99% of the time this relates to errors with entity references such as ampersands in URLs. E.g. having an url like product.php?id=2&mode=view would result in this error as the ‘&’ wasn;t used within the url.

required attribute “alt” not specified –  simply find the line number and add an alt tag for the image. The presence of an alt tag is required for both transitional and strict doc types.

XML Parsing Error: Opening and ending tag mismatch – Depending on how organised you are when coding this fix can take a matter of seconds or a lot longer. It relates to unclosed block level tags, such as a table or div. One plus point is that fixing such an error often results in several validation errors being fixed at once.

required attribute “TYPE” not specified – This relates to no type attribute being specified for things like script and style tags. Solution – use the type tag like this: <script type=”text/javascript” language=”javascript” src=”scripts.js”>

There is no attribute “HEIGHT” - xHTML does not allow for the presence of the height attributer. To resolve, add an inline style or better, specify the height within the css rule for that element.

NET-enabling start-tag requires SHORTTAG YES or document type does not allow element “META” here – caused by incorrect use of short tags for the page’s doctype. For example if you have specified an HTML doctype then you use use <br> instead of <br />.

ID ‘someDivname’ already defined – caused when you have used two dividers on the same page, with the same id. Solution, uses div class instead of div id if you need multiple dividers on one page.

Missing a required sub element of HEAD - almost definately caused by missing xHTML required tags from the head section. E.g. have you included a title tag (required in all HTML documents.