Navigation

In the first years of the Web, the look of web pages was rather grey (and not only because the backgrounds were grey, as they were): pages usually had few images,the text always set in Times or Helvetica, predictable, boring page layout and navigation. The hypertext of the first generation of web pages was similar to the one you may find in a simple Windows help file. Today’s web designer have a much bigger freedom and many more resources. They have many options to design the structure of navigation of the website, and they can add the necessary graphics to offer a richer and varied experience than with bare text and hyperlinks.

In order to establish the navigation system, we must think a while about the structure of the Web or instead use a program that automates navigation building and management, or some CMS. Before doing anything with the computer, it is advisable to work in the structure sketch with pencil and paper: which sections will we include, what pages are in each each section... later, we will be able to choose a suitable navigation scheme. The programs that admit a visual development of the structure of a website are specially pleasant to use in this phase, since it is possible to create a “organization chart” and to move the sections and documents around in the diagram, in order to find the most logical scheme, with the best usability.

Using images in a navigation system

The images have a great impact within the web pages, not only like illustrations, but also like a resource to attract the reader’s attention. We can take advantage of this quality to use the images like a navigation aid in our Web site.

As it happens to so many things, the vulgar abuse of certain kinds of images (cheap clipart, bad colour combinations or nonsense animations) can distract instead of focusing the attention selectively. The designer must choose in a sensible way the appropriate images and use them with an acceptable dose. Thus, an image will serve to direct the attention to certain links in the page, without unnecessary additional explanations. For example, if we want to offer the visitor the option of visiting a page where we list the new features, nothing better than to include a small image (some icon) to indicate it.

Image maps.

All the present day navigators admit image maps for navigation (as the example above of these lines. In his rather simple version, there is a single image which has several regions that connect to different pages. These regions are defined by coordinates, and may have rectangular, elliptical or polygonal shapes, with the specified dimensions. One of these image maps can be replaced by sliced, partial images that link with the corresponding pages. The advantage of a map, in this case, is that we need a single image and it can also be easier to replace it. The image maps have many creative possibilities. In the last few years, however, image map systems have been all but abandoned in favour of effects of mouseover effects or Flash-based navigation systems, as well as pull-down or drop-down menus and other navigational devices. Anyway, image maps can still can solve attractive and imaginative schemes of navigation: they can symbolize different parts from a building or parts of a body, an object, in a visual metaphor of navigation through the web. And there are alternative techniques to create image maps, based on CSS, which solve some of the accessibility issues of traditional image maps. See, for example, the article in A List Apart “The night of the image map”.

With regards to the design, one of the greater advantages of the image map is the independence of the restrictions in the format of the page. It is not necessary to be limited by the guidelines of positioning of the text and the tables or divisions. If we create an image map, taking care of the size so it’s not a very big file, we’ll have a good way to establish an attractive and original navigation. And even if the visitors have disabled the automatic loading of the images —something less and less frequent— although the image map loses its visual appeal, the links will still be there, active: make sure that you always include an ALT tag for each of the active regions, indicating it is an image map; in addition, with the modern navigators, when passing over the region where there is a link, a message pops up telling the name of the currently moused over link. You may try it with our own example.that we have assigned this one: you can verify it with our examples. You can read a more in-depth description of image maps in a separate article.

Some web graphics programs, like Fireworks, are specialized in the creation of navigation elements. To create a button like those in the example there are many options to choose and it’s fast and easy.

Navigation bars.

The navigation bars or “navbars” probably are the most used navigation system. They consist of text-only or image “buttons” linked to different pages. If the navigation bar is made of image buttons, it is usually prepared first in the graphics editor, and later the links are added in the html editor; some programs are able to do both tasks in a single step.

More sophisticated versions of the navigation bars exist, with drop-down elements, folder trees and auto-expandable shemes, et cetera, like in the menus of a program. Some navigation systems take advantage of different kinds of scripting, like dynamic HTML Javascript and / or CSS based, Java or Flash.

To create a bar of navigation with an advanced program as Netobjects Fusion is simplicity itself, because it applies the chosen style to the sections of the Web that we indicate, and it updates any change that we do in the group without errors; you’ll never have mistakes with the names of the pages or their location. The system is totally flexible and incredibly easy. If we don’t use Fusion or another program which is able to use templates to manage navigation, the obvious solution would be to create our own template, which could contain the fixed elements of navigation which are repeated throughout a section. In order to create the template in a program that doesn’t have a specific option, we may simply create the model, and save it with a name such as template.html. In order to create the pages from this template, we open it, we add content and at the time of saving, instead of choosing the Save... option (which would overwrite the template), we chose Save as... and we give it a different name. The template can be used again to create new pages that have a series of fixed parts.

Mouseovers: image and text replacement

One of the visual clues more used for hyperlinks —too much used, perhaps— is so-called mouseover: the image changes for another in the instant the mouse passes over the original one. This is not only visual candy, but it really helps the user indicating where he is and that he has found a link to somewhere else. This effect has interesting creative opportunities for the designer, and it’s possible to find nice examples of its use in many websites. To create one of these mouseover or rollover image effects, it involves some JavaScript code; at first that was the only way to produce it; now most visual web editors lets you include rollover images. In Golive, Dreamweaver or Netobjects Fusion it’s a matter of choosing the images for each state (mouse out, mouse over) in a dialog box and the program automatically creates all the necessary code. In Frontpage Express or Composer you cannot create this kind of effect visually and you really should’t learn all this programming if you aren’t going to earn your bread writing this kind of code. You might use some freeware utility for it. For example, First Page 2000 is an excellent html editor which includes, among many other modules and tools, a specialised tool to create mouseover images.It will can generate all the code and later you only have to copy and to paste within the web eidtor that you use normally.

An alternative way to include mouseovers is an effect that produces an image change, in addition, that takes place in another image: a swap image behaviour. This effect has many possibilities too. It may be used to display information that remains hidden until the mouse moves over a button that links to a certain page or section. Thus, the page may host more information than it’s immediately apparent after the webpage has loaded. This information is “awaken” as we change the position the mouse. It lets us examine in an interactive and entertaining way does the page we’re visiting offer. It is an interesting possibility, and open to experimentation; you’ll find many good examples. See for example the start page in www.efuse.com.)

CSS rollover effects.

Finally, we can create mouseover effects with no images, that is, with text only. It is possible using style sheets; it will work only for Explorer 4 or later, Mozilla and Firefox or Opera. With CSS it’s also possible to create a combination of image backgrounds and non-visible texts that simulates a mouseover effect with no side effects on the page accessibility. See A List Apart for several of these techniques, including the articles CSS sprites and Image replacement Techniques.

Visual and textual maps of a website.

A sitemap, visual or textual, like a summary of all the contents of a Web, allows the visitor to quickly locate what he’s interested in and to save unnecessary trips through the site. When we prepare a visual map, it is necessary that the structure is shown clearly, and it makes clear which sections belong to each branch. See our own sitemap as an example.

The sitemap is usually a special page in a website, because it may be a rather big diagram to show in each page or section. You can create it based only in text, or using some kind of visual help or metaphor, for example folder icons (open or close) indicating each level. You can take this metaphors as farther as you like. For example, you create the website of a food manufacturer, and you mark each section with different kinds of food product.

Generating the complete list of pages and keep them ordered showing their structure means a lot of work, especially for large sites, and it’s well worth having some kind of automation for this task. There are online services that will do it for you, like Freefind (http://www.freefind.com.), a website that also offers other services such as searches within your website. There are some utilities you can use in your own computer, for example the excellent Xenu’s Link Sleuth or several plugins for HTML Kit. If you use Netobjects Fusion there are several special components to create sitemaps.

Drop-down menus

This kind of navigation system has a distinct advantage: it needs only a very small space on your screen, and at the same time you may include in it as many links to sections and subsections as you wish, organized jerarquically. There are different kinds of drop-down systems. The simplest of them are based on some Javascript code and it’s linked to a form. It’s also possible to create drop-downs with Flash, with some Java applets or dynamic HTML. Probably the most spectacular drop-downs are those made with Flash, but the system is far from intuitive or simple (although you can use some templates or components that need only some customizing and adding the link names.) If you visit sites like www.dynamicdrive.com you will find many freely downloadable scripts for navigation systems, and you only need a bit of tweaking to adapt the names in the links to your own needs. It’s possible to create drop-down menus only with CSS, like it’s explained in the Suckerfish Dropdowns article in A List Apart, but if you want to be on the safer side and cater for all browsers, the most realist solution involves a tiny bit of Javascript. The technique and other related is very well explained in ALA, together with downloadable examples and templates.