Search This Site:

 

Website Navigation - Website Navigation Structure

Adding navigation to your website is a MUST! After visiting many genealogy sites over the last few months, one thing I have noticed is that a number of them include only a button and button. This is especially true if the site has been created with a genealogy database program. The more complex your site, the more important  good navigation is. Make your navigation easy to use. Remember, your navigation is the road map to your site and people will not always enter via your "front door." A search engine could take them anywhere within your site. Will they be able to find there way around?

Google's information for Webmasters states "Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link."

Position of Navigation Structure -

• Decide on the position of your navigation and be consistent throughout your site.
  • Top or close to the top (Genealogy Web Creations uses this type of site navigation)
  • Left side of your page (Family Genealogy Online uses a left side site navigation)
  • Right side of the page
  • Bottom of the page (Genealogy Web Creations uses this type of site navigation)

Style of Navigation Structure -

• Decide what type of navigation you will use -
  • Text links - biggest advantage is quick download time and it is the most search engine friendly. Text navigation can be primary navigation OR an additional navigation method. This site uses plain text links throughout. The top and bottom menus are examples as is the right side menu (when used).
  • Plain text links within a table. Screenshot of plain text links inserted in a table or a styled list Screenshot
  • Graphic images as navigation buttons. If you use graphic buttons, you should also offer a plain text menu. Screenshot of graphic buttons
  • Dropdown menus. If you chose to use menus created with javascripts, you should always provide an alternate plain text menu. Example: GNC Web Creations - notice the dropdown menu at the top with a full text menu at the bottom of each page.

Appearance of Navigation Structure -

• Be consistent with the color of navigation menus. As you browse through this site, the color and style of the menus never changes.
• Be consistent with the appearance of navigation structure. Primary navigation goes first and secondary navigation should be placed just below primary navigation.  Screenshot of primary and secondary links.

 

Navigation Tips -

• Let the viewer know where they are on your site by using breadcrumbs or informative page titles. How many times have you seen Index, Home or New Page 1 as the title in the browser title bar. Add the title to the current page between the title tags in the head section of your code.

• Internal linking - placing links to internal pages within the content of the page.

Example: Research by Barbara Eakley asks the question "Could Sarah's maiden name have actually been COX?" Documentation for the Cox Graham link. {Link opens in new window}

• Titles of navigation links should be short, descriptive and intuitive and refer to the target page. Don't use Click Here. Instead use brief but meaningful link text that explains what the link offers. Example:

Instead of To download W3C's editor/browser Amaya, click here. Use To download Amaya, go to the Amaya Website and get the necessary software.

Additional References -

• Website Navigation - Website navigation is important to the success of your website visitor’s experience to your website. The website’s navigation system is like a road map to all the different areas and information contained within the website. by S. R. Emerson
• Website Navigation from HTMLSource
• CSS Based DropDown Menus - DropMenu is a small, easy to implement script for creating DropMenu menus. Unlike most other similar scripts available, DropMenu is search engine friendly. DropMenu does not cause problems when validating your pages or style sheets. Easily create horizontal or vertical menus, style your menus your way. If you know html you can use DropMenu.
• Nifty Navigation Using CSS

Using Includes for Navigation Structure

• Do you have content that you want to appear on more than one page, like your navigation structure? You can use includes - included content - to make inserting and updating your navigation structure simple. If you are using FrontPage or Expression Web to design and maintain your website, the FrontPage Include Web Component or Expression Web Include can be used. If you are hand coding your pages, you can use Server Side Includes.
  • Step-by-step instructions - FrontPage Includes Tutorial.
  • Step-by-step instructions - Expression Web Design Time Includes
  • Step-by-step instructions - Server Side Includes Tutorial - SSI.
  • How to Make a Navigation Menu

Home | About | Contact | Tutorials | Resources | Portfolio | E-books | Templates | Site Map