| << Previous Page>> << Next Page>> |
This page discusses navigation styles, fonts, and contrast. These are all important considerations for any page design.
|
There are several basic styles of navigation. In general, the styles are identified by position and orientation on a page. They include:
|
This page uses vertical |
||||||||||||||||
Top and side navigation are the most common. Right side navigation is extremely 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. Often navigation links are created using an effect called a "rollover." This effect often appears as a link changing shape or color. It is accomplished by having a primary image swapped for a secondary image when a mouse pointer passes over it. But because rollovers are hard for some browsers o view, and some visitors to use, text links are positioned elsewhere on the page, often at the bottom. |
This page uses top horizontal navigation |
||||||||||||||||
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. |
This page uses primary
navigation at the top and |
||||||||||||||||
|
|||||||||||||||||
|
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. |
Check Your Fonts You can discover which fonts your browser can use. Click on a sample below and a new window will open. If the font in the new window matches the sample, it is installed on your computer and your browser can use it!
|
||||||||||||||||
The page on the left 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. The will try to improve a site by using alternative fonts.
|
 |
||||||||||||||||
|
|||||||||||||||||
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. | Large text is hard to read because people can only read one or two words at a time. Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances. |
||||||||||||||||
| The default text size for a Web page is "3." It can be specified within the HTML of a Web page. If it is not, the browser automatically displays the font at size 3 unless the user has changed the settings. As with fonts, it is usually necessary to specify the size of the text so that the browser settings do not over ride the designer's intentions. | This text is specified as "default." This text is specified as "3." This text is specified as "4." This text is specified as "2." |
||||||||||||||||
| Text size ranges from 1 to 7. 1 is the smallest, 7 the largest. HTML also allow setting relative sizes. Included are +1 through +7 and -1 through -7. These sizes are not specific, but, are relative to the browser default size. | This text is specified as "+1." This text is specified as "+3." This text is specified as "-1." This text is specified as "-4." |
||||||||||||||||
| 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. |
|
||||||||||||||||
One of the pages on
the right has fairly good contrast. But the text alignment makes
it hard to read. Which page is it? Check a box and click "submit."
One of the pages has
a very complicated and "busy" background. The text blends
in and is hard to read. Which page is it? Check a box and click
"Submit."
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? Check a box and then
click "Submit."
One of the pages has
good contrast, good text alignment, and lots of white space. It
is very easy to read. Which is it? Check a box and then click "Submit."
|
|
| << Previous Page>> << Next Page>> |  |