Basic Principles of Good Web Page Design
What are the basic principles of good design for academic web pages,
especially for researach papers? The answer is a simple design that
combines a clear, dignified appearance, quick page-loading, ease of
screen readability, and economy in printouts. The following points expand
on the PK5 Student Paper Template on how
to achieve these objectives.
The Quick Brown Fox Jumped Over the Lazy Dog (Times size 2)
- First, if your paper was originally produced with a word processor
(such as Word) for a printout version, bear in mind that your
paper's html version will always need to be revised from the
original word-processor version to remove or revise those elements that
are printout-specific. Simply using the word processor's "Convert to
HTML" command will not be enough.
For example, if your Word version used a separate title page, this
should be omitted from the html version, as the title page is 90% "blank
space" that would be counterproductive on screen. Begin your web paper
with the title, author, course and term centered at the top, with the
title normally in font size 5, the author in font size 3, and the course,
term and other information in font size 2.
Similarly, if your print version included a table of contents, this
either should be omitted for the html version or, for long, detailed
papers (more than 30 text pages, for instance) where a "contents" section
would be justified, converted into a concise body of internal hyperlinks
to the relevant sections of your paper.
- For ease of readability on screen, consider using mainly the
non-serif arial or verdana fonts, with the basic text as font size 2 and
section headers (subtitles) as font size 3 (the <H4> command is an
easy-to-use option to changing "font sizes" for section headers/titles).
Use mixed-case (not ALL CAPS) for both the paper title and all
subtitles. The text should be single-spaced, with double-spacing between
paragraphs. Remove any extra spacing between paragraphs or paper segments
that may have been included in the printout version for "layout" purposes.
Separator bars (horizontal rules) are recommended to distinguish between
the title information and the text of the paper itself (as with this page,
Arial is recommended as a concise, easily readable font for text-heavy
papers. Verdana is recommended for pages which have relatively
less text and more 'white space'. 'Times Roman' is not
recommended, as it is not as easily readable on-screen as Arial or
Verdana. In papers where an Arial size 2 font has been used for the basic
text, Verdana size 1 is a good choice for graphics captions and the like.
Note that fonts differ in proportion as well as face (and
"readability," as can be seen in the following (all of which are the same
The Quick Brown Fox Jumped Over the Lazy Dog (Arial size 2)
The Quick Brown Fox Jumped Over the Lazy Dog (Verdana size 2)
Marginal or "white space" can be provided for easier readability on
both sides of the paper by either using a centered table for the text (the
more complicated way) or by using the <blockquote> command once
at the beginning of the text, and then turned off at the end of the text
(the simplest way). Indented quotations may also use the
<blockquote> command. Item lists should either use the
<UL> (unordered list) or <OL> (ordered list)
commands to clearly distinguish each list item.
Simple colors which produce good text contrast and visibility
(beige, light yellow, light blue, etc.) should be used for the text
background (if you prefer something other than plain white). Black is
safest for longer texts (it is always clear, and will not result in
excessive depletion of color ink cartridges) but navy blue or other
clear, contrasting colors may be used for shorter texts, titles,
subtitles, highlighted details, etc. Never display white type on a
black background for an academic paper or other document that readers may
wish to print, as the text will not show up on a printed page.
At the end of the paper, use a separator bar to distinguish between
the close of the text and beginning of the Works Cited, Notes, Appendices
and similar material. Use another separator bar to distinguish between
the end of your paper and hyperlinks back to the top of your paper, to
other higher-level page(s) or to other files which are related to your
paper. Make the text descriptions of these links explicit as to where one
will end up if one clicks on them.
The end of the paper should have a version number (if you have
changed the original paper) and either the date of original posting or
date of the last update or both.
Your home page (or other higher-level page to which your papers are
linked) should clearly identify you and provide contact information for
how you may be contacted 3 make it easy for publishers to locate you
if they need to get your permission for them to reprint your scholarly
work, and then for them to know where to mail those royalty checks! Your
identity should include your full name, basic academic affiliation and
credentials (a short c.v. would do nicely) and your e-mail address and
Reference sources must be carefully cited, using in-text citations
which refer to full bibliographical details in your Works Cited section at
the end of the paper (see the PK6 Citation References
directory for examples. Provide embedded hyperlinks to any on-line sources
you have cited, and make sure your links connect to the right page and
place in the remote source. Identify the hyperlinks with the title or
description of the page being linked to, not with the URL alone.
Make sure that the spelling and grammar in your paper are correct;
these are among the most visible "quality indicators" of on-line material.
Before putting your paper on-line, check it, edit it and check it again.
Create pages that appear on-screen quickly. Don't load them with
big graphics. Where images are used (when relevant to the paper) size them
to fit an 800x600 display (generally, maximum image width should not
exceed 700) and provide height and width data so they will load more
quickly. Do not link sound files to run when a page is first loaded:
always make audio files a clickable elective (unless you have an
entertainment site, or the pages are a multimedia presentation where sound
files are intrinsic for each page).
Do not use "frames" for academic papers. Use the maximum screen
space for the paper itself. Moreover, frames still often produce browsing
problematics, such as browsers getting "stuck" in the frames. Many web
readers have thus grown to hate "frames" (no matter how well designed they
may have been). Instead of frames, use clear page hyperlinks to
upper-level and related information, preferably in a standard links
section at the bottom of each page.
Perhaps needless to say, pop-up windows, continually-scrolling text
at the page bottom (or elsewhere), and other such "video arcade" effects
will seldom qualify for the "simple, clear, dignified appearance" cited
above as appropriate for academic web pages, no matter how cleverly
done they may have been. It is best to experiment with special effects on
separate pages from your academic material.
PK5 Reference Index
Last Updated 12 April 2010