Navigation & Readiability

Navigation

There are several basic styles of navigation. In general, the styles are identified by position and orientation on a page. They include:

• Top
• Left Side
• Right Side
• Bottom
• Horizontal
• Vertical

Top and side navigation are the most common. Right side navigation is relatively rare. Because it is so rare, it should generally be avoided because Web visitors are not used to it.

Bottom navigation is used when pages are long. This eliminates the need for the page visitor having to scroll back to the top of a page to access a link.

Bottom navigation using standard text links is often used on pages where rollover navigation is used elsewhere. Search engine robots often find it difficult, or impossible, to follow the image-swapping effects of rollover navigation. Standard text navigation allows the robots to easily catalog a page and follow the links.

On complicated sites navigation can be divided into primary and secondary categories. In the example to the right, the top navigation is primary. It is identical from page to page.

The side navigation is secondary. Each group of sub pages under the various primary navigation categories has its own custom navigation on the side. While the primary navigation is accomplished by image mapping, the secondary navigation consists of text links. The text links can be easily updated if necessary.

Putting all the possible links, both primary and secondary, on one page would make the page far too complicated and nearly impossible to use.

Fonts

Text in Web pages is displayed by browsers using the fonts available in the viewer's computer. Most PC users have Arial and Times New Roman installed. Macintosh computers usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

NOTE: Cascading Style Sheets (a technique for controlling presentation of elements in Web pages) allows use of non-standard fonts using @font-face rules. Details about how this can be done are at the W3 Schools CS3 Fonts page.

The page on the right illustrates good use of fonts. The headlines and main topic headers use a sans serif font that is easy to read. The text body uses a serif font, such as Times or Times New Roman, that is easy to read in blocks of text.

However, many designers find the standard Times, Times New Roman, Arial, Helvetica fonts to be dull. They will try to improve a site by using alternative fonts. This can now be accomplished using both traditional HTML Web safe fonts and the @font-face rules that are mentioned above.

Text Presentation

Because the Web is primarily a visual medium, and the main method on information presentation is text, how text is presented is an extremely important consideration. Which font to use is only element that must be considered when building a Web page.

Normally, people do not read text one word at a time. Text is read in groups of words. The size of the text is a key element in determining how easy it is to read sentences. Text that is displayed too large is just as difficult to read as text that is too small.

Using the old font tag (which is no longer valid) the standard Web page font is "3." Sizes were specified smaller at "2" and "1," and larger starting at "4." Because the font tag and related size attributes are no longer used, alternate methods of setting font size are necessary.

Fixes font sizes are now specified using pixels. Proportional fonts sizes are determined by using ems or percent. Examples are on the right.

NOTE: Cascading Style Sheets use a different technique for specifying font size. For more information about CSS be sure to visit our Cascading Style Sheet online tutorial.

High contrast between text and background makes the text easier to read. Black text on white is the easiest. White on black, even though it is high contrast, is harder to read. Certain color combinations, such as red and blue, should be avoided because they result in extremely high perception problems.

Analyze A Web Page

On the right are four examples of Web pages. Here are your questions:

• One of the pages has a very complicated and "busy" background. The text blends in and is hard to read. Which page is it?
• One of the pages has low contrast between the text and the background colors. These color choices make it hard to read. Which is it?
• One of the pages has good contrast, good text alignment, and lots of white space. It is very easy to read. Which is it?
• One of the pages on the right has fairly good contrast. But the text alignment makes it hard to read. Which page is it?

Use your mouse pointer to touch the images on the right to discover the answers.