PK5 Reference Files
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.
  1. 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.

  2. 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, for example).

    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 "size"):

    • The Quick Brown Fox Jumped Over the Lazy Dog (Times size 2)
    • The Quick Brown Fox Jumped Over the Lazy Dog (Arial size 2)
    • The Quick Brown Fox Jumped Over the Lazy Dog (Verdana size 2)

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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 phone numbers.

  8. 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.

  9. 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.

  10. 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).

  11. 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.

  12. 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.


TopPK5 SchedulePK5 Reference IndexPK5 Home

Last Updated 12 April 2010