Consistent Navigation

Traffic Ivy

Increase Traffic to Your Website

Get Instant Access

This is almost a no-brainer these days; it is difficult to not have a consistent look and feel with WordPress themes. You want your visitors to be aware that they are consistently using your site, independently of the path taken to get there. That means having a coherent look and feel to your site — such as a masthead and dependable global navigation.

That does not mean that different sections cannot have their own flair, but it needs to be coherent. It will be very disorienting for a visitor to read some of your content on one page and then click through to the next page with a totally different look and feel to it. Visitors will think they have left your site and you will not get credit for the great content you have created.

Likewise, each page in your site should have a dependable global navigation. Dependable means it does not change and does not move. Visitors should be able to explore your content without fear of getting lost. It may sound silly to a technologist like you, but the average user has a different relationship with technology. This global navigation is a safety line for your visitors to get back to where they came from.

Good global navigation also tells visitors where they are in the site. Specifically setting an "active" item in the menu and making it clear that it is lit up, or somehow distinguished from the rest of the global navigation. This enables a visitor to glance at the navigation and immediately see where they are in your site with respect to the other sections or pages. The Sandbox theme does this automatically; when you use the built-in sandbox_globalnav () function you will automatically receive a current_page_item class in your menu items like so (this is the rendered HTML):

<li class="page_item page-item-27 current_page_item"> <a title="Register Me" href="/register-me/">

Alternatively, if you are creating navigation yourself using WordPress's built-in is_page () function, you can achieve the same result (this is the PHP code in the template file):

<li class="benefits

<?php if(is_page('benefits')) { echo "current_page_item";}?>"> <a title="benefits" href="/benefits/">

In both cases some nice CSS on the current_page_item class would differentiate this menu item from the rest. We are firm believers in the user feedback functions of the anchor element. First, mousing over the element should provide some sort of feedback beyond switching the cursor to a hand. Usually this means a highlight or darkening of the font, background, or border. Second, the currently active navigation section should be similarly delineated, but different. These two tenets, when used together, create a nice global navigation that visually presents a multitude of information on where the visitor is in relation to the rest of the site and where he can go to read more. Some sample CSS might be:

div#menu li a { bac kground: #333 ; color: #efefef; display: block; padding: 5px 10px; text-align: center; text-decoration: none;

div#menu li a:hover { background: #EE5900;

div#menu li.current_page_item a { background: #841BD5;

div#menu li.current_page_item a:hover { background: #A80499;

This works in Firefox and Internet Explorer 6 through 8. In Figure 10-1 you can see how this plays out in the web browser. If you browsed this site in real life you would see that the global navigation across the top is in the same place on each and every page of this test web site. You will also notice that this screenshot is of the "A Page'' menu item, and that navigation item is visibly different from the other menu items to indicate that it is the active page.

Notice we are referring to it as global navigation. That does not mean that every page in your site has to be listed in the main menu. It can, but it does not have to. Sections can have a local navigation block once you are inside them, but the main sections should be accessible via the main menu. This is what makes navigation dependable. It reinforces what the visitor can expect on your site and the methods used to navigate it.

A consistent style and dependable navigation comfort your visitor and reinforce the validity of your content.

Was this article helpful?

0 0

Post a comment