Designing Web Pages

A Presentation for the

1998 MUSPIN Conference

given by

Charlie Wrenn & James Holloway

TSU-NASA/NRTS Project

wrenn@coe.tsuniv.edu

holloway@coe.tsuniv.edu

Reference: How to Set Up and Maintain a World Wide Web Site, Lincoln D. Stein, ISBN 0-201-63389-2

Greatest Challenge to Writing Web Documents:

Keep the user oriented; provide a coherent structure in which the relationship of each page to the rest of the document is clear.

An important point to remember when writing web pages:

Types of Links:

Truly Hyper:

1. Every document is linked to every other document

2. Can lead to circular navigation

3. Frustrates the user

4. Difficult to maintain

Pure Linear Design:

1. Easy to follow

2. Users are actually more likely to read the pages

3. Boringggggggg!

4. Best used for reference manuals, short stories, prose

5. Easy to maintain

Tree

1. Single page serves as jumping off point to other pages

2. Easy to navigate - each page contains 3 links

3. The concept is easily extended to other layers

4. Easy to maintain

Your job:

Make sure that no matter where the user enters your document tree, she can always find her way back to the start.

Accomplish this by:

1. Creating a structure that makes sense

2. Placing textual and visual clues in your documents that make the structure obvious

Two categories of navigational aids are used:

1. Landmarks

2. A hyperspace compass

Landmarks:

1. Welcome Page - top-level page of your site

2. Home Page - entry point to a particular author’s

collection of documents

3. Title Page - entry point to a multipage document

4. Table of contents - set of links to a multipart document

5. Index/Search Page - document text search and retrieval

6. Comment Page - e-mail or other contact method

The Hyperspace Compass:

Six directions:

forward and back

next and previous

up and down

Forward and Back:

Refer to the series of pages that the user visits in the order in which they were visited.

Note: Avoid creating links labeled forward and back.

Next and Previous:

Used to navigate a series of pages that are linked in a linear way (i.e., subsections of a manual).

Up and Down:

Up takes the reader up a level to the next higher level of organization. Down takes the reader down a level in the tree, i.e., from a table of contents to the start of a chapter.

Note: Top is often used to take the reader all the way up to a main entry point such as a title page or welcome page.

Navigational bars are a useful tool for making navigation easy and obvious.

Pitfalls to avoid:

1. Don’t try to fight HTML’s word-wrapping by adding <BR> tags, extra blank lines, or long series of hyphens or stars. What will look good on your browser will look terrible on someone else’s.

2. Overlapping tags, such as <STRONG> Hi <EM> Mom! </STRONG> </EM> will always break somebody’s browser.

3. Series of <P> tags with no text between them will produce different results on different browsers. Avoid them.

Optimizing Performance:

The most beautiful, best organized, most interesting Web page in the world is utterly worthless if it takes too long to download.

Main principle for maximizing performance: keep it small and simple.

Keep graphics as small as possible. JPEG images tend to be smaller than GIF images; consider JPEG for thumbnails.

Focus your attention on reducing the size of the most frequently accessed documents.