| Effective
Web Page Design: The Good |
Emphasize Readability
Be creative and original, but remember that your text will probably be the most
important information on your pages. Make sure that the text is large enough and clear
enough for viewers to read easily, and avoid backgrounds and color combinations that make
text difficult to read.
Emphasize the
Especially Important Information
Particularly on a course home page, the especially important information should be in
front of viewers as soon as the page loads. Some viewers may not even scroll down your
page, so you should make sure that they will see what you want them to see even if they do
not scroll down.
Use Logical and
Effective Navigation
Think organization. Viewers should not get lost in your web site. Effective navigation
will help viewers know where they are in your site at all times. In general, navigation
links appear either at the top of the pages or at the left borders. At large web sites,
the home page generally is linked to a series of primary pages, from which other pages are
linked. Viewers should not have to click more than three times to get the information they
need, and they should have no problem figuring out how to locate that information. Some
web designers like to use storyboards to plan and organize their web sites.
Keep Pages Short but
Deep
Web pages should not be too long. In the web environment, short pages that are
"deep" (with progressive links) are more effective than long pages.
Break Up Large Amounts
of Text
Viewers read web pages differently and more slowly than they read printed text. Text
on web pages is easier to read if it is broken up, with blank space, numbering or bullets,
tables, or horizontal lines.
Give a Title to Your
Page
Type both the URL and the title of your page when you choose "save" in
FrontPage. Titles are what appear at the top of the web browser when viewers access your
page and what appear in the list of bookmarked titles in web browsers.
Preview Your Web Pages with Different Browsers on Different
Computers
Web pages do not look the same on all computers or with all web browsers and browser
versions, so you should preview your pages with various browsers and computers to make
sure that the web pages look the way you want them to.
Use Browser-Safe Colors
You can use thousands of color variations for your web pages, but the majority of
these colors look different on different computers. However, 216 colors look the same
regardless of the web browser or computer. If you want to be guaranteed that the colors in
your web pages will look the same for everyone who visits your pages, you should choose
colors only from the 216 "browser-safe" colors. The 216 safe colors are
presented nicely at Lynda Weinman's The
Browser-Safe Color Palette.
Use Tables to Format Your Pages
Tables are extremely important for the formatting of web pages. A few of the tables on
this page are obvious, but all seven of the tables may not be so obvious. For example, an
"invisible" table separates the table containing this text from the table
containing the "Faculty Summer Institute" images. Under "Table
Properties," choose "0" for "Border Size" if you do not want
viewers to see the table borders. Effective and creative use of tables can help you format
web pages.
Keep the Content of Pages less than 640 Pixels Wide
Today, most web viewers use a screen resolution of at least 800 x 600 pixels, but some
viewers use a screen resolution of only 640 x 480 pixels, meaning that those viewers will
have to scroll to the right to view all of the content of web pages that are wider than
640 pixels. You can control the width of your page by putting the content in a large
table.
Keep Pages at a Reasonable Size
Very long pages and heavy use of graphics will increase download time, which can be a
significant problem for viewers with less than optimal Internet connections and computers,
which would include just about all of your home viewers. Previewing pages with a home
computer will help you get a sense of the download time.
Use Graphics
Viewers have come to expect graphics on web pages, and a few well-chosen and relevant
graphics can greatly enhance web pages. Notice the size of your graphics files, though,
and avoid large files, which will increase download time. Thousands of free graphics are
readily available at many web sites, and graphics can be easily downloaded to your
computer with a few mouse clicks. Do not just take any graphics from the web, though,
since they all are copyrighted. The producers of free web graphics grant permission for
others to use their graphics. (A good listing of available graphics is at The Free Site's Free Graphics Resources.)
Use Alternative Text for all Graphics
To increase download time, some viewers turn off the graphics on their web browsers,
meaning that only text and no graphics appear on their screens. For every graphic on your
pages, then, you should supply alternative text, which will appear instead of graphics
when graphics are disabled. To supply alternative text, when working in FrontPage Editor,
right mouse click on the image and choose "Image Properties." Then, type the
text into "Alternative Representation"and click "OK." Alternative text
for graphics will also appear when your web pages load and when the cursor rests over the
image in a browser. Alternative text can also be interpreted by programs that read web
pages to the visually impaired.
Include the Same Important Information on Every Page
On every page at your web site, you should include (1) A home page or e-mail link, (2)
a copyright notice, and (3) the date that the page was last updated. In FrontPage, you can
insert a WebBot called a "timestamp" that automatically changes the date every
time you update a page.
Make Sure your E-Mail Address Appears on Pages
When including your e-mail address on pages, type the address itself and do not simply
include a link such as Send me Mail. Web browsers
have to be configured to enable the user to send and receive e-mail, and many of your
viewers will only receive an error message if they click on something like Send me Mail.
Keep Your Pages and Links Updated
You have a worldwide audience for your web pages, and you may have a lot of visitors
curious about you, the information you present, and the college. Outdated information and
broken links will cause viewers to leave your web pages faster than you can say
"click."
Back up your Web Pages
This is not a matter of design but of common sense. Back-up copies of your web pages
could save you hundreds of hours of reproducing web pages if something terribly wrong ever
happens to the college server. When you finish working on a web page in FrontPage Editor,
click "save" as usual to save the page to the server. Then, click on
"File" and choose "Save As." Click on the folder icon to the right of
the URL space on the "Save As" screen and choose the destination where you would
like to save the file. Graphics in web pages are saved as separate files, so you may need
to indicate that you also want the graphics copies along with the page.
|
|