Designing a CSS Sprite navigation bar – Part 1

Hi and welcome to this week’s web design video blog. A few weeks ago we talked about CSS Sprites and looked at the benefits of using them when designing websites. Starting today, we’re doing a 2-part tutorial on how you can use CSS Sprites to produce a fast loading, SEO friendly navigation bar.

Designing and saving the CSS Sprite

The Output Sprite ready for the second part of the tutoral. Click to enlarge.

In the video, we start by producing the Sprite image for our navigation. In the example, we have prepared a navigation based on a former video blog ‘How to create an Apple style navigation‘.

To create the two different ‘States’ of the sprite, we duplicate the navigation and darken the background. We then position the second State below the original. White space is then removed by using Photoshop’s Trim feature. Once cropped, we ‘Save For Web’ the graphic and store it ready to use in our navigation. Our end result is the GIF Sprite opposite.

• Download the PSD file from the video.

The HTML

Now that we have the CSS Sprite GIF ready, we need to produce the HTML frame to hold our new navigation. Like we mention in the video, it is important to ensure that Search Engines can crawl all the content of your site, particularly the navigation. The best way to structure your navigation for both SEO and practicality is to use a ‘List’, the HTML term for ‘Bullet Points’.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Now that you have your Sprite and your HTML List, the only thing missing is the CSS. In next week’s video blog we will complete the tutorial by combining the HTML List and Sprite with CSS to create our completed navigation bar.

And in next week’s video we will complete the navigation bar by styling it with CSS and by bringing in our Sprite. Thank you for watching this week, don’t forget to watch next Friday’s video when we will be completing our CSS Sprite navigation bar.