Web Site Navigation
by Steve Dougan
email this articleSummary : One of the most important elements in website design is effective, user-friendly navigation. The types and styles of website navigation systems are as varied as the websites they are on. It is a good idea to visit other websites when planning your navigation to see how others have done it. Visiting websites will give you an objective look at the dos and do nots of different types of navigation systems and give you the opportunity to consider your websites navigation from that perspective.
The most common location for the navigation menu is on the left side and/or across the top of the webpage. Most people looking at a web page scan from the top-left across the page to the right, then diagonally down to the lower-left and finally across to the right, essentially a Z scan. It just makes good sense to have the menu in a location that is most noticeable.
It is also important to keep the size of the menu to a minimum. Small, precise and easy are critical elements of menu design. Thinking outside the box may be great in many areas, but not in the menu system for your website. If your visitor has trouble determining how to get to where they want to go, they will simply leave.
On smaller sites that do not have a lot of pages, the menu can easily and clearly be displayed on the left of the page. For larger sites with many categories, and many pages within each, a little more creativity is needed. Often websites of this nature will list the main categories across the top of the page, and then in the left menu on each of the pages will be listed the related links for that category.
The top category menu should be consistent throughout the website for the benefit of your visitors. Another common method of navigation is a drop-down menu. These tend to be located across the top of the page. When the mouse is moved over the main headings, a list of the pages and/or sub-categories drops down and can be viewed and accessed.
Embedding links within the body text of your webpage is another effective method of affording visitors easy access to other relevant content elsewhere in your website. An example of this can be seen below.
Bravenet has a dynamic menu builder that you are welcome to use to build your menu system quickly and easily. Visit the DHTML Menu Generator. In addition, our archive of JavaScript contains a variety of navigation menu scripts that you can use on your website. View the JavaScript menu scripts at:
http://resources.bravenet.com/scripts_archive/javascript_dhtml/menus/ .
If you would prefer to build your menus in text only, take a few minutes to review our Cheat Sheets online at http://resources.bravenet.com/quickref/ for quick and easy reference material to assist you.
These types of menu systems will cater to the greatest spectrum of your website's visitors. However, it should be considered that there are older browser versions still being used and not all menu systems will be compatible with older versions. It is important that no matter what type of work you do on your website, you would be well advised to test the code in as many varieties and versions of web browsers as you can to ensure your site will be viewed as you had intended.
Another consideration is that of accessibility by assistive technologies. For example, the blind use readers that literally read the code and content of your webpage. For those individuals, clear code and clear simple language is the best. All images should have alt text, all links should have titles that the readers can relay to the visitor and allow them to better navigate your website.
The added bonus of doing this type of coding is search engine spiders like it best as well. While it may be more work and effort to use good, clean, clear coding and descriptions in your navigation systems, it does have the benefit of making your website more accessible to everyone, including those all important search engine spiders.
