Writing for the Web: An Overview
by Agatha Taormina

 

Table of Contents

Limitations of HTML
Types of Web Sites
Contents and Organization
Design

Limitations of HTML

HTML describes the way information is structured (heads, lists, captions), not how that information appears.

HTML gives the designer almost no formatting control; instead, HTML leaves the browser to decide how to handle layout and display.

Therefore:

  • Trust your browser;
  • Don't count on your browser.
Types of Web Sites
  • Informational--often sponsored by a university, a museum, a government, or any other public institution
  • Entertaining--often sponsored by an individual
  • Promotional--used to publicize a company and/or sell a product
  • Educational--used for online course delivery
In addition, whether the web site developer realizes it or not, web sites generally also:
  • Reveal a corporate or individual personality;
  • Demonstrate knowledge or lack of knowledge of the web and web design.
According to Don Siegel, author of Creating Killer Web Sites, the ultimate goal of most good web sites is to create a community to which people continue to return to purchase or communicate (32).

Thus, the real goals of the web site are to:

  • Entice the visitor to stay;
  • Train the visitor to explore;
  • Inform and educate the visitor about the product;
  • Satisfy the visitor.

Contents and Organization

Web sites are organized into groups of files called pages; these pages contain:
  • Text
  • Graphics
  • Color
  • Animation
  • Music and video
  • Forms in which to enter data
  • Hypertext.

Despite all the multimedia components of web sites, the page (as in printed page) concept still dominates the  principles used to design for the web.

Thus the home page tends to resemble a table of contents.

Though avant garde designers might consider the principles of print design to be stodgy, following them can, however, make your site easy to navigate.

Use steps to organize your web site.
  1. Determine your purpose.
  2. Gather your information.
  3. Divide your information into logical chunks called units.
  4. Establish a hierarchy of importance of these units.
  5. Use the hierarchy to determine the relationships among the units of information.
  6. Analyze the functionality of the site.
  7. Examine the site for aesthetic satisfaction.
Each chunk of information should be organized around a single topic.

Each page should use an inverted pyramid structure, i.e., a brief overview or summary of the most important points and presentation of the remaining information in descending order of importance.

Write for scannability.
  • Remember that the web experience seems to foster impatience.
  • Write informational rather than cute heads and subheads.
  • Use bold or colored text for emphasis.
  • Use hyperlinks to related chunks of information.
  • Use bulleted lists.

Be concise; use half the word count of similar information in a linear document.

Scannability and conciseness increase the usability of your site.

  • Scannable text calls attention to key information.
  • Concise text presents less information to process.
Write with credibility. Increase your credibility with:
  • Good writing;
  • High quality graphics rather than obviously canned clip art;
  • Outbound hyperlinks that indicate not only that you are aware of what else is out there but also that you are secure enough to invite and encourage readers to visit other sites.

Be objective. Objective text reduces the distracting effort to filter out bias.

Jakob Nielsen observes that "promotional language imposes a cognitive burden" on the reader to filter out hyperbole (Alertbox, 10/1/97).

Design

Unlike print, the web is not the same experience for all users.

Monitor size and resolution, browser choice, and modem speed all affect the web experience.

Fixed widths of pages should be no more than 590 pixels across.

Note that web essays keep columns narrow to preserve readability regardless of monitor size; otherwise visitors with large monitors could be confronted with long, therefore difficult to read, lines of type.

Aim for the lowest common denominator among your target audience:

  • Novice web surfers tend not to realize that there might be material below the initial monitor screen;
  • Novices may not be familiar with scroll bars;

Gradually add and test the bells and whistles of advanced design.

David Siegel describes three different generations of site design.

The first generation design is linear, comprised of text only.

The content is presented in a traditional top-to-bottom, left-to-right sequence. The chunks of information are separated by bland horizontal rules.

The second generation design is menu, icon, and technology-driven. It employs the home page as a table of contents.

Additions to the text in the site might include:

  • a tiled background to provide depth of field;
  • banners and color;
  • blinking text for emphasis (although remember that a very little blinking goes a very long way).
A third generation design is, according to Siegel "wrought by design" (Creating Killer Web Sites 29). The site intends to form a complete experience for the visitor.

The entry to the site, the front door, is a true splash page rather than a traditional home page with table of contents. It should consist of a center area with a core page for exploration.  However, it should load quickly, in 15 seconds or less.

Such a site will use a metaphor and/or a visual iconic theme with clear typography and an obvious and intuitive navigational structure.

The site's metaphorical interface "employs a visual metaphor that makes the screen appear as if it is something other than a computer screen full of text or pictures" (Ohl and Ward 25).

The traditional Windows desktop aspires to be such a site.

There are three levels of design.

The Big Picture

  • What navigational aids and design devices will the visitor require?
  • What identity do you want the site to project?
  • What other media, scripts, or forms must the site support?

The Look of the Site

  • Site design can be based primarily on typography as it is at the Yale C/AIM site.
  • Site design can be based on icons and color as it is at the National Geographic site.

The Feel of the Site

  • Feeling is a description of the comfort level conveyed by the site.
  • The site should utlize consistent and obvious cues to aid the navigational flow of the pages.
  • Provide a site map and/or a search engine for a large site.

There are three different basic approaches to web site design: static, fluid, and windoid.

Static design, advocated by David Siegel, is derived from the world of traditional print graphic design. In such a design the readability of the text is of  primary concern.  The static design employs:

  • pixel-specific tags
  • borderless tables to control layout

In general, WYSIWYG web page editors such as FrontPage and Dreamweaver aim to accommodate this approach to site development.

Fluid design, advocated by Glenn Davis, creator of the original Cool Site of the Day site, uses percentages rather than pixels to control the size of a page. 

With such a design resizing the browser window causes the page to adjust accordingly.

One advantage to this design is the way a page will adapt to a variety of browser sizes.

The windoid design employs a pop-up window with a size determined by javascript; this "windoid" contains the entire site.

Windoid design is related to a kiosk design in which the browser window completely disappears.

One problem of such a design is the tendency of javascript to crash some browsers.

Button: Web Design CenterButton:Top of PageButton: Top of Page

Web Design Center Readings
Last Revised: April 18, 2004
©  Agatha Taormina