One of the most important aspects to your website visitors’ experience is the navigation - how they get from place to place on your site. Too many times navigation is poorly thought out and can lead turn your visitors off. Here are a few simple rules for implementing effective site navigation.

1. Keep It Simple
   Don’t overwhelm your visitor with too many navigation choices. Present them with links to just the main content areas of your site. You can then provide links to deeper pages from withing those main content areas, or within your sitemap.
    
2. Think Inside the Box
   Your visitors will feel more comfortable if your navigation is in-line with common practice. If your menus are too unique or flashy, they could be confusing to your visitor, or possibly not easy for them to recognize as your navigation.
    
3. Show Them Where They Are
   With the nature of the web, it is common for visitors to arrive at you site on a page other than your home page. Your navigation should indicate to the visitor where they are on your site. If the visitor is on your “about us” page, the navigation should have some way to indicate that, whether it be showing that menu item in a different colored box, bolding the menu option, or placing an arrow beside the menu option just to name a few.
    
4. Make It Obvious To Your Visitor
   Your menu options should make it very clear where they will take your visitor. I have seen several sites that use icons or images only for the navigation, and while they may look nice and make sense to you or your web designer, your visitor may have no idea what that icon represents. Also, your text should be meaningful; don’t try to find unique ways to say things in your menu.
    
5. Keep Them Low Tech
   Avoid using flash or javascript for your navigation if possible. While most visitors browsers support these technologies, not all do, and it’s generally not necessary to use “high tech” for something that should be so simple. Also, this has implications beyond just the visitor. Search engines don’t follow javascript or flash links, so by using these technologies you are hiding most of your content from the search engines.
    

Following these rules should help make your visitors comfortable moving around your site.

I was going to include examples, but I think it would be simpler if I just point you to the great collection of bad navigation design I found at Web Pages that Suck.

There is an issue with Internet Explorer adding white space when it isn’t really wanted (at least in my opinion). I haven’t noticed the problem with Firefox. The situation occurs when a line break exists in the html, but other than that there are no spaces or other elements that “should” display on the page in the browser. For example, let’s say I have several images that I want to appear side by side on the page and have no space between them, as when slicing images. My code might look like the following:

<img src="images/logo_left.gif" />
<img src="images/logo_right.gif" />

which would result in:

I think you see what I mean by unwanted space. One fix is to make sure there is no whitespace (carriage return, line feed, or space) between the image tags in the html, which is simple but can make for sloppy code and would look like this:

<img src="images/logo_left.gif" /><img src="images/logo_right.gif" />

It doesn’t look all that bad here, but if you have a lot of images, or a lot of parameters to include with your image (noborder, height, width, etc), it can make the underlying html pretty sloppy. But, you can get the layout you want:

However, I prefer a simple CSS solution. In my stylesheet, I add the following class:

.imageNowrap {
white-space:nowrap;
display:block;
float:left;
}

I can then add this class to each of my images (except the last image in the row), like so:

<img src="images/logo_left.gif" class="imageNowrap" />
<img src="images/logo_right.gif" />

and again get the desired result, this time with cleaner, more readable html. If your images span several rows, then something like this will work (remember to keep the <br /> on the same line of html as the last image on the row):

<!--// ROW 1 //-->
<img src="images/logo_top_left.gif" class="imageNowrap" />
<img src="images/logo_top_right.gif" /><br />
<!--// ROW 2 //-->
<img src="images/logo_low_left.gif" class="imageNowrap" />
<img src="images/logo_low_right.gif" /><br />
I am sure there are other solutions, so I would be happy to hear them.

UPDATE: 13 Feb 2008

I had a visitor contact me stating that he had used this solution with success on one page of his site, but the solution failed to work on another page. After reviewing his source, I noticed something critical that I thought I would pass on here. The page that was not working did not have a DocType specified. For this solution to work, be sure that the first line of HTML includes the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">