NAD-Web and Graphic Design Logo



Setting Up Your Site's Navigation

Site navigation should always be consistent throughout the entire web site it allows the site's visitors to find what they are searching for quickly and easily.

Types of navigation:
You can click on each item if you don't like to scroll in the page.

Text links
Navigation buttons
Image maps links
Drop-down Menus - Javascript, CGI, etc.
Search function navigation

Below are lists of positives and negatives about each type

Text Links :

Most internet users know that blue, underlined text is a hyperlink. For this reason, it's a good idea to include text links in your web site design along with other graphic images.

Always use link colors that are familiar to your visitors,as much as possible.
Unvisited link are usually blue and visisted links are usually purple or maroon.

If you choose not to use the default colors, your text links should be unique they should not look the same as any other text in your web pages. For example make them boldfaced, a larger font size, use small vertical lines or square brackets around the link . Text links

Pros:

The biggest positive issue in using text links is the quick download time comparing to downloading navigation images or buttons also you can use some of those links as keywords.

When using large graphic images or splash on your web pages, it's a good idea to use text links for your navigation to lessen the download time of your page.

Cons:

Text links can be boring to look at, especially if you have a large amount of blue links sprinkled throughout your web pages. People like simplicity and ease of navigation. But, you can overcome that by placing them in a colored table cell or a colored sidebar, see example ( Light Blue Tips table ) on top of this page .

Back to Top


Navigation buttons

Graphic images add personality to a web site. Most web sites use buttons as a navigation menu. It's known to people that a beveled image (or button) is "clickable."

Pros:

Using navigation buttons gives your visitors a beautiful representation and they are easy to to use and help users navigate your site right away, Place the navigation buttons ina visible place like on the top or left part of the page.
Use colorized buttons that accent your site, people like to see splash of color along with a change in dimension.

Also when using navigation buttons you have alternative text in the HTML code,so if your visitors turn off the graphic images, your web site can still be navigated and this is good for search engine indexing also.

Cons:

Download time is a big factor when using navigation buttons. The navigation buttons' file size should always stay between 1K-5K in file size and dimensions between 60-165 pixels in width and 25-60 pixels in height.Usually people will not wait for long time for your big size navigation buttons to download.

Here is an example of navigation buttons


Back to Top


Image maps links

An image map is a single graphic image that is sliced into hidden pieces it allows users to access different web pages by clicking on different areas or pieces of that image.

Pros:

Sometimes a single image map is quicker to download than multiple navigation buttons. It's a chance for designers to show a bit more creativity in designing the image map.

Alternative text can also be added inside the HTML of an image map.

Cons:

Download time .One has to be carefull not to create a large size image map that is slow to download. Having a beautiful image map can show creativiy and attract customers, but if it took long to load there is a good chance of having potential customers click off your web site before a page has time to download.

Search engines will not follow the links inside of an image map, so it is very important to add an alternative means of navigation for the search engines on your web pages.

Here is an example of an image map each link will take the user to the appropriate page

Back to Top


Drop-down Menus - Javascript, CGI, etc.

Netscape Navigator since version 2.0, and in Microsoft Internet Explorer since version 3.01. supported the scripting language, Nowadays JavaScript can be programmed directly into your HTML pages, it can be used as a popular mean to navigate a web site. A drop down navigation can also be coded using a CGI script.

Pros:

Drop-down menus is web page real estate. Drop-down menus don't take up as much screen space as multiple graphic images.

As long as you know that the majority of your site visitors use browsers that support JavaScript, this is a very useful navigation tool.

Cons:

This type of navigation is that many early browsers do not support JavaScript. If you know that many of your site visitors and customers use old browsers that don't support JavaScript, then it would be best to use alternative forms of site navigation.

Also you have to choose a web server that supports the type of script you need to use on your website.

Here is an example of a drop down menu

Back to Top


Search function

Search function, is best used for large web sites that have databases and large inventory. For example, online storescan create a search function for their users to find the products they are looking for.

Pros:

Search functions help potential customers find the product or services very quickly. Site visitors can type in a search term and find what they are looking for within three clicks or so, also don't take up much screen space.

Cons:

Many search engines will not index items in the data base and you will have to have alternative html pages to be submited to the search engines. Also Maintaining both the data base and the (HTML) pages can be both expensive and time consuming.
Back to Top


If you have any specific questions about our web site design tips,
or if you would like permission to republish this design tip on your web site or newsletter,
please use our contact form or email us at webmaster@nadweb.net.

Home | About US | Get a Quote | Contact | Site Map

Reproduction of (Icons, Graphics, Text, etc...) in whole or in part
in any form or medium without express written permission
of NadWeb Designs is prohibited.

© 2005 Nadweb Designs, All copyrights reserved.
Click here for live support
Supported by Boldchat.com






web safe colors
Click Here to view
Web Safe Colors