Website Blueprints/ pg. 5

CHAPTER 4: NAVIGATION

So you've got your pages all done and looking great. Now how the heck do you link them together? With hyperlinks.
      Hyperlinks are the only way for the reader to move from one page to another without typing in the address in the "Address" bar. But you probably already knew that (I sure hope you did).




In order for your reader to move from one page to another without much effort, you should provide links to all the other pages on each page, for a navigation bar. You don't need to necessarily provide all the other pages, but you should at least provide a link to the main/start page.
      Why? Well, your main page should include links to all the other main pages. For our quantum physics page, we have a main page which goes off into three main categories. The start page should provide links to each of the category pages.

You should also take care that the reader is not clicking forever to get back to the main page. As a general rule of thumb, a reader should be able to get to any page of the entire site in three clicks. It's sometimes hard to follow that rule, but it can reduce the annoyance factor for the reader. They want to get the information, get out, and go to one of their favorite sites.


Another effective way to provide the reader with links to all aspects of your site is the hierarchy of links, as I call it. Similar to the outlines that you created for research papers or notes in class. This method does take more space, and can be more intense for you the programmer (since you have to write so much more code), but it's great if it works. Of course, not every site is meant for the hierarchy of links; it works better with very large sites. Typically, this method, shown on the side, is used for a navigation bar, and never used in the home page.
      The easisest way to do this is with a list (if you don't know about lists, see Chapter 4 of HTML Is Your Friend). However, for a smaller chart, you could do it by hand, using special characters for the bullets and using non-breaking spaces (HTML string  ); that is how I made the links on the side here. Compare it to the flowchart.











If you have frames and link to a different website, don't have that site appear within your frames. It's very annoying.



When you are using images for linking (standard images or imagemaps), be sure to provide text links as well; some of your readers may not be able to support image(map)s, or they may have turned off images on their browser. They won't be able to see the image or the link. However, if you provide text links, everyone can see those; then the user can at least navigate through your site. The text doesn't have to be vey large or prominent; a good font to use for this function is arial, set to size 1.

Navigation with frames can be particularly tricky. When you create the links, be sure to specify the target frame, or else the whole layout may go awry. This is another downside to frames; every hyperlink must be specified. If you don't, the results can be disasterous.
      Another consideration with hyperlinks in frames is the "Back" link. Using the browser's "Back" feature can result unpredictably. If you provide a "Back" link with every page, so that the reader can move from one layer to another, your readers will have less headaches.








Frankly, I'm lazy. I don't like to move my mouse-hand very much. So provide plenty of "Top" links, so i don't have to scroll myself.

If you have an rather long (vetically) webpage, and even if you don't, provide links that will bring the reader back to the top of the page. This way, the reader doesn't have to move his/her hand too much.
      The way to do this is with hyperlinks and anchors (for a more detailed explanation, see Chapter 6 of HTML Is Your Friend). First, you put an anchor at the top of the code. This way, the links to the anchor will bring the reader right to the top of the page. Look below for the bit of code.

<html>
<body>
<a name="top"> <!--this is the anchor-->
...more code...
<a href="#top">Top</a> <!--the hyperlink-->
</body>
</html>



There is nothing more annoying that broken links. Those are the hyperlinks that don't work, either because the file/site you linked to moved, or because you made a spelling mistake. In anycase, make sure your site doesn't have broken links. This doesn't mean you have to make a daily vigil, but check every month or so.


Since you can help your reader navigate through your great page, you now must learn about images.