Effective Web Design:

How to Format Your Wiki Page According to the Laws of the Net

This page is intended to inform students participating in the British Literature Wiki about effective web page design. Besides having informative, well-researched material, the wiki pages should be aesthetically appealing and able to convey meaning through their appearance as well as their words. This page will attempt to assist you in accomplishing this balance. The remainder of this page will demonstrate through its design in hopes to not only tell, but show. There are four subheadings in this page: Fonts, Font Styles, Page Layout and Design, and Appropriate Documentation. And under each subheading you will find a format suggestions as well as why each respective suggestion is effective.


Key Points:
  • Use Verdana for Headings
  • Use Georgia for Paragraphs

Determining fonts depends on the way the particular piece of text is used in a document. For example headings and paragraphs often use different fonts to create a pleasing contrast. When composing for Web pages (like this wiki), it is also important to understand that the way a reader reads off the screen will play into your choice of fonts.

Verdana is a font that was created to increase text legibility on the computer screen. Verdana is the preferred font for titles on the Web because its characters are spaced apart enough to ensure that the letters do not run together. This spacing forces a deliberate reading of each letter in each word of the title, ensuring that no word is skimmed and that the title stands out above the remainder of the text. This page uses Verdana in its headings and subheadings

Developed by Matthew Carter in 1996, Verdana--alongside Georgia--has what the typographers call "exaggerated x-heights" (Lupton). The "x-height" describes the highest point of a lowercase letter "x" in the printed/typed word. What this means is that regardless of numerical point size, one text can appear larger than another primarily because of its x-height (Horton).

Georgia, the font in which these paragraphs have been written, is the serif counterpart to Verdana and is the ideal font for the body of the page. Regardless of the screen size, Georgia maintains clarity, which allows the reader to seamlessly flow through the text. And although it appears quite similar to Times New Roman, it is preferred on screen because the characters possess a more open quality.

Notice the contrast between this sentence (in Times New Roman) and the rest of this paragraph, which is in Georgia.

While Times New Roman would look good on the printed page, because of the way a computer screen renders pixels in creating the images of the letters, some of the quality is lost on the screen. Georgia was specifically designed, however, to take advantage of the way compute screens project text, thus allowing for its crisper appearance.

Exemplary Page: Eighteenth-Century Grammars

Font Styles: Bold, Underlining and Italics

These font styles, or type styles, can add meaning to a page without changing the font itself (Kramer). Oftentimes, though, their implementation is obnoxious and it begins to look like a collage of magazine clippings. It is important to use these styles sparingly. Make a mental note about which style to use for a specific purpose: bold for emphasis, underline for important topic ideas, and italics for times when the finger quotations occur in speech--or something to that effect (Kramer). Also, do not combine more than one style. Because if this is your "important" thought, then do not expect to emphasize text with this or this or this alone.

Page Layout and Design

The color of text against a background is an important factor in the readability of a web page. Tests have shown that black text against a white background is more legible than white text against a black background.
Below is an example of poor contrast:

This white text is difficult to read against a gray background.
Active v. Passive White Space
Active white space is the term used for space between text or imagery that serves a purpose in creating a more readable page. Passive white space is space that does not serve any purpose. It is simply empty space that decreases the appeal of the page.

Images added to a web page can greatly enhance or hinder the page (Scratchmedia). It is important to choose images that add to the page's meaning. For instance, a photo of a night sky will not enhance "A Description of a City Shower" regardless of how appealing the image is alone. The position and size of the images is also important. Imagery is a feature to enhance, not overtake a page. In which case, one should make certain that the image's size is relative to the amount of text to which it is referring. Also, it is best to position the image to the left or the right of the page. Centering images tend to imply that they are the most important aspect of the page when the text should be. Vivid colors are also helpful when using an image to enhance a page. "Ah Sun-flower" is a good example of how imagery can enhance a wiki page.

Exemplary Pages: Classical Education in the Eighteenth Century for overall page layout
, Ah Sun-flower for imagery, and Companion Poems for good use of active v. passive space

Appropriate Documentation

Appropriate documentation is extremely important in all areas of scholarly work. Not only are there laws prohibiting unauthorized use of a borrowed source, but it is morally necessary to give credit where credit is due.

When creating a wiki page, each source from which one gains information must be cited--and cited properly. Citation is required when summarizing, quoting, or paraphrasing a source. If unsure about whether or not citation is necessary, cite it anyway. It is better to over-cite rather than under-cite. Also, too, be careful about citing images. It is not sufficient to reference Googleimages as a source just because Google was used to locate the image. Instead, go to the site that provides the image, and cite that.

Citation for the wiki pages should be treated in the same manner as though writing an English paper. Proper MLA formatting involves in-text parenthetical citation as well as a reference section at the end of the page. Each source cited in the final "References" section should be listed alphabetically, too. In addition, when citing titles, italics are preferred to underlining. It is more
aesthetically cohesive in a web document.

If unsure about how to cite various resouces, and the MLA handbook is unavaible, the Owl at Purdue is an excellent source that provides information on the proper MLA format in addition to others like the APA and the ASA.

For this wiki, the preferred set-up for the citation section appears as follows:


A book:
Horton, Sarah and Patrick J. Lynch. Web Style Guide: Basic Principles for Creating Websites. 3rd Ed.

A journal article:
Kramer, Robert and Stephen A. Bernhardt. Teaching Text Design. Winter 1996, Vol. 5, No. 1 (35-60)

A Web page:
Lupton, Ellen. Thinking with Type. http://www.papress.com/thinkingwithtype/index.htm
Scratchmedia Ltd. Imagery: Using Images in Web Page Design.
http://www.webdesignfromscratch.com/web-design /imagery.php
University at Albany Libraries. Basic Web Page Layout and Design.

An image:
Put a descriptive caption under the image. Use that description (or the first important word of it). List the image alphabetically by its descriptive caption in your References along with the source of the image.

Notice how the references here are alphabetized by authors' last names. If there is no author (as may happen if you're citing a Web page, use the title of the page or the title of the article in place of the author's name. The last names (or titles) listed here correspond to the names (or titles) you use in the parenthetical citations in the body of your page.