About the Author

Michael Doig is a science teacher, web developer, and avid traveler who lives in Brooklyn, NY.

Bulletproof Tuesdays – Ch. 2 – Scaleable Navigation

In week two of Bulletproof Tuesdays we’re going to talk about scaleable navigation. Site navigation is an often overlooked aspect of web design, but it’s what visitors are going to use to get around your site. Done right it can give your site an overall ease of use, done wrong and your visitors will leave. In the book Dan talks about the now different navigation on LanceArmstrong.com.

The site used JavaScript and image based navigation, this is typically the type of navigation you’d get from slicing up images in Photoshop and exporting them from Imageready. While it might look nice on the surface, the result is actually tons of code, which is not particularly easy to update, non-scalable buttons, and just a general lack of flexibility. If you’re currently using this type of navigation, don’t worry there’s help on the way.

The Bulletproof approach is best explained on A List Apart in an article titled Sliding Doors of CSS. I used this same article to build the navigation on this site. Go ahead change the text size and watch the tabs effortlessly grow and shrink.

I’m not going to post any code on this topic because the Sliding Doors article pretty much covers it, but I’ll cover the basic idea. You’ll start with a standard unordered list such as:

Once you style them to float, they become horizontal. Two oversized images are used to create the tab backgrounds and this is where the scalability comes in. Because the images are larger than you need them to be, if someone changes the text size the two images slide open and adjust to the new text size.

The id=”1″, “2” etc. is used for for a current state tab. When the page is on that tab, the tab is highlighted. You can see this on my site as well.

The benefits are obvious, simple mark up, scalability, and update-ability make this a much easier and smarter approach to navigation. Check my style sheet or follow the Sliding Doors article and you’ll have scalable navigation in no time. Go around and see if your favorite sites are using this technique. Looking at other sites is also a great way to gather some design ideas.

If you have any questions feel free to leave a comment. Otherwise I’ll see you next Tuesday with Chapter 3.