Stylistic Choices for Navigation - Navigation Part 2

Stylistic concerns include whether to use images or text.

Using Images in Navigation

Reasons for using images in your navigation include:

  • Creating a set of stylized "buttons"
  • Using a typeface that is best presented as an image because the type is unlikely to be interpreted correctly by users' web browsers
  • Introducing image swapping approaches or mouse-over effects

There are tradeoffs you should consider when using images. Images have a download cost or impact, particularly for users of slower systems (using dialup internet service, or older computers). Some users still surf the web with images disabled, and the differently abled (such as visually impaired users) cannot see images. There are workarounds, such as including alternate text that displays if images are disabled, or is read aloud by a screen reader program, but using images remains a possible disadvantage to some users.

Also, navigation techniques using images often employ the use of JavaScript to swap images upon events such as a mouseover (defined as the graphic user interface (GUI) event that occurs when the user moves or "hovers" the cursor over a particular area of the screen). Many terrific effects can be had using JavaScript or VBScript. The downside is that some users, especially in rigid corporate environments, have such tight security settings applied to web browsers that all scripting may be disabled. In such situations, in the best case, the effect will not display. In worst-case scenarios, the user may be prevented from seeing the intended navigation choices.

Using Text in Navigation

If you use text in your navigation instead of images, you have none of the concerns indicated above. The links may appear to be bland, but they also will be functional and clear, and there is no risk of a browser interpreting unstyled text incorrectly.

Using text in horizontal navigations is very typical. Often, each text hyperlink will be separated by a bullet or perhaps a vertical bar (the character |, also called a "pipe" character). This character is located on the Shift position of the backslash key. It is typically wise to include more than one space before and after the pipe. We recommend using the ASCII non-breaking space character ( ) to create this effect. As an example, look at the horizontal links at the bottom of this web page.

Adding CSS to Text in Navigation

Increasingly, web developers employ the use of Cascading Style Sheets (CSS) to enable dazzling effects on a web page. Users of modern browsers can benefit from seeing these effects. If the CSS is carefully employed, users of old web browsers will not see those effects but will also not be prevented from viewing the intended content. Use of CSS is growing, but users of less CSS-compliant web browsers (the biggest example is Microsoft Internet Explorer versions 5 and 6) will (at best) not see the web pages as designed, and (at worst) may not be able to view the web site clearly.

It takes careful planning and knowledge of web design to navigate the tricky waters of web navigation.