Article
Build Your Site Navigation With CSS
A Word About Visitor Preferences
It's easy to place the <a href> tags for your menu system in the <body> section. But actually getting them to look the way you want involves a bit of trial and error. Ideally, you want each link to look the same except for the text content. So the width, color, alignment, etc. of each text link needs to match the others.
That means you'll have to take some control away from your visitors by defining the font and setting an absolute font size. Relative font sizes that scale in relation to surrounding text and visitor preferences are just too risky.
We're working here with a pretty tight layout that will be broken -- maybe even illegible -- if a visitor tries to view it with the browser's text size set to the largest or smallest available value. Often, the best answer is a compromise: set absolute font values for navigation systems, but make sure they're large enough to read clearly. 12 pixels is the minimum, in my opinion. Then, you can let visitor preference rule for the rest of the page content.
Still, even with that much careful planning and control, you can never be sure that your links will work in all browsers for all visitors. One factor limiting wider adoption of CSS is inconsistent browser support. In this article I've tried to stick with techniques supported by IE 5.x and up, Netscape 6.x and up, and Opera 6.x and up.
Is All This Work Really Worth It?
You bet. You'll benefit in many ways, and so will your visitors!
Less image files mean less download time! Visitors with slow connections see your pages more quickly and more reliably. You may have a fast broadband Internet connection, but others aren't so lucky. Although use of high-speed lines is increasing, the vast majority of users worldwide still connect via dial-up.
All browsers support text links, but some browsers don't adequately support JavaScript or display images (think about WebTV and text browsers). A complex DHTML menu structure may be completely inaccessible to a WebTV visitor. Visitors with slow connections may prefer to surf with images turned off. And sometimes, the problem is on your end. The server may not send the image to the browser or a coding error may prevent it from displaying properly.
Visitors with severe visual disabilities often listen to Web pages using screen readers or Web page readers. An image-based navigation system is hard to decipher if you can't see the images.
It's a lot easier to change the text in a link when the link is actually in text format rather than an image format. Suppose your boss decides that the "Contact Us" link should actually be labeled "Email Us" instead. If it's a text link, you change one word. If it's an image link or button, you have to modify the entire image file yourself or pay the graphic designer to do it for you.
Some search engine algorithms (like Google's) particularly prize keywords placed inside link text. Keywords are words or phrases that you expect people to enter into a search engine to locate your Website. You can give your site a slight boost on the results page by using your site's targeted keywords inside link text. You can use keywords inside ALT and TITLE attributes on image links (and you should!), but text is more important.
Most search engines claim that their spiders are capable of crawling through every level of a Web site and indexing every page. This is called "deep spidering" because the spider reads content even if it's located deep inside the site. But the spider has to find the internal pages before it can index them.
Think about what a spider really is: basically a simple text browser. Spiders can't see your images and sometimes have problems following JavaScript hyperlinks. So that great DHTML drop-down menu system on your site may look wonderful, but it also may be slamming the door on search engine spiders. They can't index what they can't find!
...Still not convinced? Try out these techniques on some sample pages of your own and consider how they might be integrated into your site design. Used together, text links and CSS are such a powerful tool for site design and promotion that you may never use image navigation again!