Navigating Your Web

Did you ever experience the Hansel and Gretel Syndrome? You go to a web site and almost immediately get lost, wishing you had brought your bread crumbs along.

Hansel and GretelThe purpose of this topic is to provide you with some pointers and alert you to some pitfalls to ensure this doesn't happen to your site. We'll be looking at some obvious things you should do, some not so obvious things, and things which are not obvious at all ... traps.

First, I would like to recommend you read the topic called Frames vs, Tables. It's essential to have some understanding of the two basic ways to structure your pages, viz-a-viz their navigation elements. That'll be the first thing we look at here.

In the 'Obvious' category is making sure you have a comprehensive navigation scheme always in view, or not far away. It doesn't have to be totally comprehensive and allow access to the entire site, as mine does, but it should link to every major section, like a book's master table of contents. Then, within each section you would provide links to every 'chapter'. Of critical importance, once you leave the major navigation bar, you need a most obvious link to return the user to the starting point. You can call it Home, Main Page, Introduction, Main Menu, or whatever is just right for your site, but it must be very clear. The site I built for my son probably gets more compliments on its ease of use than its content (not necessarily a good thing, but I'll take whatever compliment I can get ). Once you get past his opening 'splash' page, which has a different navigation scheme from all the others,  the following shows a typical navigation scheme.

It's not glamorous but it gets the job done. Please recall two things about what we just saw. First we saw our links in the upper frame's navigation bar. This is not a good idea unless you can contain your total links to 10 or 12. Otherwise you would end up increasing the vertical size of the 'banner frame' and running your links across the page in several rows. We needed this type of design for his site because his product search screens required the full width of the page and I couldn't afford to have a navigation bar on the left.

The second thing to notice, and this is true of all the sites I design, is that I never allow the user to take a link that uses my site's window. I always open a fresh window if I'm inviting them to leave me, so that my site is still sitting there on their desktop. You don't know if the reader will come back, so it's good to have them make the decision to leave, not you. If your site is a frameset, you could always have the site you link to come up in your main frame, but that's often not a good idea because of available screen space. If I were the site being linked to, I would resent that and try to 'break free'. We'll look at that later in this topic.

Another point in the 'Obvious' category is the effect of scrolling. If your web site is tables-based and your pages are deep (like this one), remember that the navigation bar is scrolling upward as well as the information page and you begin to distance your reader from it. Some designers don't seem to give this much thought but it bothers me. I suggest you not let your pages run extremely deep and also place some basic navigation elements at the bottom, like or a series of text links. This is a situation where framesets have a strong advantage.

And finally, consider having a topic in your main index which provides a search of your site, a site 'map', or table of contents. This is useful for large or complex site structures. When navigation tools and bookmarks fail, it's a powerful way to help readers regain their bearings on a return visit.

In the 'Not So Obvious' category we have the special considerations of frames, java, and javascript, if they are supporting our navigation bar.

Browsers that either do not support or which have disabled these features will NOT run a navigation bar which requires the feature. In all 3 cases we have a special convention available to us whereby we can supply 'alternate HTML' to be used when the feature is not available. This is explained in my topics on Javascript and Java Applets. This is always critical for a Java applet and sometimes critical for Javascript. If our only use of Javascript is to enhance the navigation bar with mouseover effects, then there's no concern. If we're using Javascript itself to do the link, then there's a problem. Believe it or not, many users have disabled Javascript.

As for frames, we used to place alternate navigation in between <noframes> and </noframes> tags. This is generally not done any longer since frames have been commonly supported since around 1995. Basically we're giving the occasional user of an old browser the message that they'd better upgrade to see our site. I certainly don't have a problem with that at all and wouldn't waste development time on what has become a rarity.

Now we're in the 'Not Obvious At All' category, and I'll point out 4 special cases where navigation can be imperiled, with examples. These are:

  1. Finding your page 'trapped' in someone else's frameset.

  2. Finding your main page orphaned from the 'parent' frameset.

  3. Your entire web site or a directory has moved.

  4. A CGI script writes your HTML page, not you.

1. It's pretty easy to get trapped in someone's frameset. Some search engines will do this, like 'ask Jeeves'. It will also happen when another web site links to yours and either by accident or by design places your page into one of its frames. This messes up more than navigation and you'll want to 'break loose' if you know how. Have a peek at how silly this looks when it happens. I've got Netscape trapped in my frameset just to show an example.

The way out of this predicament is to place some Javascript like the following in the <HEAD> section of your page, whether it's a normal page or a frameset page. You'll see this in my index.htm file.

2. Having your frame become 'orphaned' will only happen when you're using framesets. Frequently a search engine will 'spider' your web site and select page frames based on content. If you're lucky enough to have your frame selected, you'll then be unlucky enough to have the viewer see the page like this.

If the user is resourceful, s/he could go to the URL or Location line of their browser and remove the page name to get to what looks like the main site. Sometimes it is and sometimes it isn't. So, why not help them out when this happens? Place the following in the <HEAD> section of any page that could be orphaned. (Don't use the name of my website, however. )

3. This situation is basically impossible to navigate. You've moved your web site and they're still bookmarked to the old one. Or, you've moved a directory to some remote location because of some necessity.

Here's where '.htaccess' comes in handy. You can read about '.htaccess' in the topic Web Site Security. One of its features is 'redirection'. Here's a block of text from my web server's online help facility.

 

You can also redirect visitors to a different directory using ".htaccess" files. Lets say for example, you have a directory on your site named "old-site". And recently, you've redesigned your site, and moved it's contents to a directory named "new-site". You can automatically redirect all visitors requesting a file from www.yourdomain.com/old-site, to go to www.yourdomain.com/new-site. To do this, you need a "redirect" line. The following is an example:
 
Redirect /old-site  http://www.mydomain.com/new-site

There are variations of the "Redirect" directive, which return a status code to the browser. For more information, see www.apache.org.

4. Very frequently a CGI application or script writes pages to your browser window. This happens all the time and is a good thing. Since you're not writing this HTML code, a good CGI developer will provide you the opportunity to provide some parameters to the script by actually editing the script and changing certain variables.

Best to just show you an example. Click the 'show me' button and I'll pop a window which takes you to a copy of my site. Click on Sites to Visit and search on any category. The 'results' screen is written by the DBMAN script, NOT by me. Go to the bottom and look at the two links. It's a built-in feature of DBMAN to allow the designer to provide a link back to the search page, whatever it's called, and also a 'quit' function which I've called 'Enough For Now'. Play with it if you'd like.

The point, as I'm sure you now see, is to investigate any script which writes its own pages and make sure it has the requisite links on them to prevent your user from getting lost. In my case, we always have the java navigation tool on the left, but many implementations may not and your user will be 'stranded'.

Hopefully these suggestions and tips are clear to you and the Frames vs. Tables and Web Navigation topics provide some perspective you didn't have before your visit here.