Best Practice Website Navigation
Christine Harrell

The goal of a website’s navigation is twofold

• Help visitors find what they need quickly
• Provide a path for search engine spiders to index your site

2 Click Rule of Thumb

When setting up your navigation strategy, don’t take viewers more than two clicks away from any page on your website. Sites with large quantities of content or product will most likely need to add sub menus to both the top and side navigation to ensure that visitors remain within 2 clicks of any page on the site.

Determine you Levels

Many sites can organize products and contents using two levels of navigation. Sites with large quantities and varieties of products and content may need 3 or more levels of navigation. Try to remain consistent throughout the site the number of navigational levels.

Top Level Navigation

Top level navigation is generally located either across the top of the page and should remain consistent no matter what page of the site is active. The concept of top level navigation is simple enough but should be created with the idea of how to organize the subcategories within the main categories.

Top Level Navigation Contents

Your top level navigation will vary depending on the level of detail need of your content or products. Top menu navigation for many sites often represents tabs such as “shopping,” “about us” “help,” “shopping cart,” etc. However, for large e-commerce or news sites with a variety of categories, top navigation may represent what would be the “departments” within a department store with the company and contact information available as a link in the page footer.

Top Navigation Bar

A top navigation bar is extremely visible and also limited in terms of real estate but valuable for that same reason as viewers know they can look to the top bar for an overview of the site contents. While is possible to stack multiple tabs along the top navigation bar like Amazon has done, this practice can quickly become cluttered and confusing. Side Navigation When there are a variety of options within a main category a secondary category menu is necessary for organization. With sites that need only 2-3 layers of subcategories, a side navigation bar is an effective organizational technique.

Multiple level drop downs function similar to Microsoft Office products and expand multiple navigational layers from a single top or side navigational point. When using this type of menu you’ll need to allow enough space to ensure that the sub menu boxes don’t run off the page.

Dropdown or fold out navigation

When content and products require 4 or more layers of navigation, you may want to include dynamic menu elements such as dropdowns and slide outs that open when a link is hovered over or clicked. Sites with large quantities of content or products can use a combination of top bar and side menu navigation and dynamic elements to ensure the 2 click rule. When it comes to readability by search engine spiders, plain text links are the most effective but if may need to be combined with some dynamic menu options if navigation becomes too complicated.

Breadcrumb Navigation

Breadcrumb navigation leaves a category “trail” generally across the top of the page as visitors travel deeper into categories. Should a visitor wish to back to any more general category, they need only to click the category rather than having to click back or start at the top level category and drill down again.

Creating dynamic navigation menus

Dropdown and slide in menus are created using a variety of languages such as DHTML, Flash, Java Applets, and JavaScript. Each has its own set of pros and cons in the area of usability and search engine indexing. Pros and cons of dynamic navigation menu languages

DHTML Menus

DHTML, or Dynamic HTML, may be the friendliest choice when it comes to search engine visibility if the code is not placed in external JavaScript files. However, DHML can function differently depending on the user’s browser choice. Check browser compatibility before choosing a DHTML menu building utility. To test whether or not search engines will be able to index the DHTML menus on your site, try disabling JavaScript and test which parts of your menu are still visible and which pages you can reach. If you can’t get to them, a spider won’t be able to either.

Flash Menus

Can create beautiful menus but can’t be ‘seen’ by search engine spiders. Search engines read HTML code and currently aren’t able to find the important code embedded in Flash files.

JavaScript Menus

Spiders can’t see and won’t index the links that your JavaScript menu points to. Because of a combination of simpler technology and a large volume of spam and abuse of Java based scripts, spiders will either ignore anything inside of the script tag or read it as text visible to a reader.

Add a Sitemap for Search Engine Readability

While not a replacement for logical page navigation a sitemap is a very useful tool for visitors and overcome the barriers created by dynamic menus. A sitemap should be linked through a text link on every page so that spiders can find it quickly. Sitemaps should mostly free of any images or clutter and provide a text link map to every page on your site.

nGenuity Solutions is committed to helping small businesses become successful in the ever changing online world. Drop us a line if you've got an internet business success story, a horror story, or are just plain frustrated and have a question. With your permission, we will post your story below the article so that others can learn from your experiences!