 |
|
Website_Design
Site Unity
Organization
Typography
Page_Layout
Style Guide
Audience
Page Size
Related_Tutorial
Web Images
Scanning_Images
| Put the most important information at the top of the page |
If you think of a Web page
as real estate, the most valuable land is near
the top. Everyone sees the top when they first
arrive at a site. Visitors might have a tiny
screen, a sore wrist, a cranky disposition, and
an "I'm not gonna scroll" attitude; if
you don't want to lose them, you'd better put
everything they need at the top of the page,
within the first 300 pixels or so. |
||||||
| Decide on a standard width | You should decide on a
pixel width for your site before you start
designing individual pages. If you don't, then
some of the text that shows up on your monitor
will slide off to the side of your reader's
screen. Two common widths are 485 pixels
(Netscape Navigator's Macintosh default) or 600
pixels (Navigator's Windows default). The width
that's right for your site will depend on which
system most of your audience uses. You can even
tell visitors to resize their browser window to
the width of a horizontal line on your site's
front page. This site uses 600 pixels. |
||||||
| Read from left to
right
|
Most people in the Western countries skim documents from the upper left hand corner, to the right (as if reading text) and then down the page. This is why toolbars are generally found at the left hand side of the screen, and less significant credits are placed at the bottom. Use your readers natural tendencies, and place time dated material in the top right corner. | ||||||
| Design for skim readers | People read 50% slower on
a screen than on paper. If you intend on the
students for print out a document, then go ahead
and use lots of small text. This page uses the
left hand column of "pull quotes" to
allow the reader to skim the page over on the
screen, and then if the text is import to them,
they can print the page out to read every word. |
||||||
| Use simple, low contrast backgrounds | High-contrast background
patterns can make Web pages difficult to read, so
exercise restraint here (unless you actually want
illegible text--in which case, go nuts). In
general, you should aim for limited contrast in
the background pattern itself and greater
contrast between the pattern colors and the text.
The best test for readability is to have someone
unfamiliar with your text attempt to read it; the
second-best method is to try to read it yourself.
|
Website Design
Site Unity | Organization | Typography | Layout | Style
Guide | Audience | Page
Size
All Hints | Site
Map
Related Tutorial
Web Images | Scanning Images
 |
Contact Nancy Perrin, or John Rueter. PSU's FIPSE Project coordinated by Nancy Perrin and John Rueter, © 1998. Page constructed by Chris Miller. Last updated on June 23, 1998. For more see the About Page. |