Home | Web Page Design Club | Web Design Video Course

Website Navigation - HREF links

HREF links - Plain text links or image links

Usability studies have shown that a menu should contain no more than 7 or 8 links. The more choices you give a visitor, the more difficult it is to make a decision, and you don't want to give your visitors the impression that your site is difficult to navigate.

The main advantage of plain text and single image links is that they can be spidered by search engines.

If you use images as links, there are 2 things you need to do.

  • Make sure that the image file size is very small or they take too long to load on a web page. (You can find out the file size of an image by right clicking and selecting "properties".)

  • You should use the ALT tags to describe the links, because some people browse with images disabled.

When you have relatively few links mouse rollovers can enhance the visual appeal of the site. Basically this method requires you to put some JavaScript in your pages which pre-loads the rollover images, and then add "onMouseover" events in your image links. When a user's mouse rolls over an image, the image is replaced by the rollover image. When the mouse rolls out ("onMouseout") of the image area, the 2nd image is replaced by the first again.

Again web page usability can suffer if image size is too large, since the images and the JavaScript need to be pre-loaded, which results in longer page-loading times.

Text rollovers are a good substitute for image rollovers, and are much easier to make and implement. The following would create a rollover effect for a single link (however does not work in Netscape v4.x and earlier).

Instead of the above, you can use a CSS stylesheet. Inside the <head></head> tags of your web page, insert the following:

<style>a:hover{color:orange;}</style>

This would make all <a> links change color when you roll over them, in this case to orange. If you wanted to confine the rollover effect to your menu links or one link in particular, you would use a class or id attribute for the link, and this is explained in the chapter on CSS.

You can go one step further and specify the font-size, font-weight (bold or standard), text-decoration (underlined or not) and color if you want. You can also put this in an external stylesheet so that you can use these as a standard scheme site-wide instead of only on one page. See the section on CSS stylesheets to learn how to do this.

If you have a large number of pages you need to find a way of providing easy access to all areas of your site (usability) but also maintain a high level of visibility.

Many sites lose visitors and potential customers through poor navigation. A visitor should be able to find what they are searching for with no more than 2 or 3 clicks. If you have a large number of links you should break them down into blocks of related links. You should also consider splitting your site into mini-sites if the topics are different enough.

The problem with large menus is that they now present a choice of more than 7 or 8 links, which would move us away from our ideal usability. One way to get around this is to create dynamic menus which change according to the web page being displayed, or which can expand and contract when the mouse clicks on them.

There are a number of ways to achieve this but some are better than others for your web site visibility.

 arrowdown Dynamic sites

web page design club

Home | About Us | Contact Us | Privacy