Imagination is our power

Planning Web Page Navigation

Navigation is crucial to website success…

Without it working well, visitors will not move around the site, and information you want them to see will be left unseen. There are many different options available when designing a navigation system. Here, you will find an analysis of some of the options to see how they can help or hinder your website.

The first decision to be made is how the navigation panel will fit in with your website design. There are three basic options – horizontal, vertical or floating. Where a horizontal navigation bar is used, there will be a limit on sideways expansion options. Unless links to new pages are contained within a drop-down menu, horizontal navigation is very restrictive. Make sure you include a horizontal navigation bar towards the top of the page. If it is placed at the bottom it will not be obvious to all users, and this may present problems.

Vertical navigation bars

Vertical navigation bars are generally more common, and can be added to the right or left of a page. Most visitors expect it to appear on the left. The major benefit of vertical navigation is that it can in theory be extended indefinitely. This makes the system more flexible, and is the preferred option in websites where the content and structure is dynamic and subject to frequent change.

Floating navigation

Floating navigation is the placement of navigation panels anywhere else on the page, apart from the top or side. This needs to be justified by the overall page design, as it is unusual and could present problems to visitors.


Flash has been used for navigation in many websites where a hi-tech finish is required, and where style is of the essence. It provides excellent quality and freedom in adding animation to a navigation system. There are two main problems in using Flash for website navigation. Firstly, when viewed using Microsoft browsers it is necessary for the visitor to click on a flash button to activate it, and then click again to follow the link. This is a major problem where a large proportion of users may have minimal computing skills. The second problem is that few search engines can follow links or read text contained within Flash, and as a result search engine optimization benefits are reduced.


JavaScript has long been the technology of choice for website developers who want to use dynamic navigation bars that drop down or fold away. The drawback is the same as with Flash in that search engine spiders get lost in JavaScript. Search engine optimization in this situation is second to style considerations.

Image maps

Image maps provide excellent facilities to create a navigation bar without the shape being determined by the technology. Normally a navigation bar will consist of a vertical or horizontal row of buttons or links. With an image map, an image is used to provide a background prompt for navigation choices, and a series of ‘hot spots’ are defined in HTML to link these choices to other pages. The technique provides excellent flexibility in design, but again is hidden from search engine spiders.

Text hyperlinks

The best navigation option with regard to ease of use and being search engine friendly has to be text hyperlinks. The technology is simple and won’t let you down. There is some scope for effects if combined with a style sheet, and you will get immediate improvements in search engine optimization as the text links can be indexed.

When designing a website you want it to look good. Style must not be added at the expense of successful navigation. Whichever system you use remember that it has to work for visitors, it has to work for search engines, and it has to be expandable.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: