Intro

People frequently seek information on the World Wide Web, but two key parameters should be kept in mind when preparing materials for Web dissemination:

• People are in a hurry and want results quickly. They don't linger in one place very long; they really benefit from good Web page design and site organization; and they get frustrated by poor design, unclear navigation and slow-loading pages.
• They don't (can't, won't) read really long documents onscreen.

Which is to say: People don't access and digest information on the Web in quite the same ways they do on paper. In a way, though, the basic principles of good writing apply to good Web design: be clear, concise and coherent. Here we go!

Part A: "I've never done a Web page. Would you put my stuff on the Web?"

If submitting a document not prepared as Hypertext Markup Language (HTML), Extensible HTML (XHTML) or Portable Document Format (PDF), here are our basic requests:

1. Pretty much any word processing program is fine for our purposes: Microsoft Word, WordPerfect, AppleWorks, Pages, Nisus Writer and so on. Either a Windows or a Macintosh version of the word processing program is fine, too. Send us your files as e-mail attachments, preferably as plain text (.txt) or rich-text format (.rtf) attachments. (If you submit by e-mail and we don't recognize your name, we may correspond further for e-security reasons.)
2. Submit one electronic version of your document as originally formatted, so that the Web editor has a reference point for Web page layout. For example: filename.doc All original formatting "extras" (tables, italics, boldface, graphics) are stripped out when you save a document as a raw text file (aka, filename.txt), hence the need for a copy of the original.
3. In addition to the original format, save and submit your document as a text file (filename.txt) or as a rich-text file (filename.rtf). Saving with or without line breaks is fine.
4. If the document is a multi-part document, submit a clear outline or table of contents, if one isn't already part of the original.
5. If your document was produced in a desktop publishing program such as PageMaker, QuarkXPress, or Adobe InDesign, getting all the pieces ("stories") extracted and saved as text files is a bit of a pain. The faster option is to save your document as a Portable Document Format (PDF) version, usually done by "printing" your document to the Adobe Acrobat Distiller. The result would be something like: filename.pdf
6. If your document is really long (more than 20 pages), we should talk.

Part B: "I've done Web pages. Here's my stuff, all ready to go."

These days, thanks to slick Web design software programs (Dreamweaver, GoLive, FrontPage), you can produce Web pages without knowing a lot of HTML code, although we strongly urge Web publishers to gain at least a passing familiarity with HTML. At some point, some page you design won't look the way you expected and being able to edit the HTML code will be a most handy skill.

True, everyone has their own design preferences, but for materials posted on the SABES site, the following tips, guidelines and protocols constitute our "house style."

Hypertext Markup Language (HTML) General Details

Note: We strongly recommend coding Web documents according to the latest Extensible Hypertext Markup Lanugage (XHTML 1.0) standards.

The HTML rules were first set and are periodically revised by the World Wide Web Consortium (W3C), a nonprofit organization of good-hearted techies. Their guidelines help provide a considerable measure of basic Web usability. The latest version of HTML is 4.01. An effort is underway to migrate Web design standards to Extensible Markup Language (XML), but we won't worry about that detail right now.

Although HTML 4.01 (and any earlier version) is intended as a uniform set of standards, the different Web browsers — Mozilla Firefox, Netscape, Microsoft Internet Explorer, Safari, Opera — can render HTML code in somewhat different ways, which is all the more reason to produce Web pages that are as "valid" as possible.

Page Layout

To ensure that your page will fit on any size monitor on any platform (Windows, Mac, Linux), we encourage setting a page width of 800 pixels, our standard page width.

Font Face, Size and Color

For menus, navigational bars, tables of content, tables and short pieces (one-to-two screens), a sans-serif font is easy on the eyes. We like Verdana, Arial, Helvetica.

For longer pieces, a serif font (Times Roman, Garamond, Bookman) will make for more pleasurable reading on paper, which is most likely where the document will be printed and read. If you don't designate a specific font, the Web browser default for screen display and for printing usually is Times Roman.

As of HTML 4.0, the font tag has been "deprecated", meaning it's no longer favored, although it likely is supported by most Web browsers. The W3C recommends the use of style sheets for setting the font. For those who still use the font tag, the SABES standard for basic page text on short pages is:

font face="Verdana, Arial, Helvetica, sans-serif" size="2"

For long text documents (articles and such), we don't specify a font; we just go with the browser's default setting.

For blocks of text, we strongly prefer black text (text="#000000") on a white background (bgcolor="#ffffff"), which gives the best contrast both onscreen and on paper. Our hypertext links are displayed in a tasteful blue-purple (link="#660099"), while visited links are displayed as an attractive olive green (vlink="#336600").

Other Text Formatting Details

As with writing on paper, use paragraphs to help structure your information.

Headings: Use judiciously. Also, putting headings in boldface helps make a page more readable.

For emphasis or titles: italics often are difficult to read onscreen. We favor using boldface for these two purposes.

Underlining: Don't ever, ever underline text! On the Web, underlined text is universally understood to be a link. We don't want to confuse site visitors.

Attributes

All attributes (width, height, border, cellpadding, cellspacing, font face/color/size and so on) should be in quotes. As you're laying out tables and setting font choices, the popular Web design programs (Dreamweaver, et al.) tend to set quotes around attributes automatically.

Tables

Because HTML is rather limited in its formatting capabilities (it's hard to do indents, you can't really set margins, getting text to flow around a graphic is tricky), Web designers frequently turn to tables to help structure a page. Plus, those powerful Web design programs make table generation remarkably easy.

Please try not to have really long tables, which tend to break in odd places when such a page is printed. If you are presenting a lengthy amount of information in a table format, break the info into subsets, if at all possible, with each subset enclosed within its own table. Although it's possible to have tables within tables (known as "nesting"), such an approach to page design should be used carefully and sparingly.

Other table preferences:

• Limit table width to 800 pixels.
• Don't set a table (or table cell) height, which often results in unused space towards the end of the table. Unfortunately, Dreamweaver automatically calculates such heights when you're laying out a table. Oh, well.
• Borders: Having no visible border (border="0") results in a clean-looking page, but sometimes having borders separating the table elements can aid in the presentation of information. Your choice, really.

Note: If specifying a particular font, tables present a special challenge, as the font needs to be set for each table cell (as part of the "td" tag).

Lists

Two options: Ordered (numbered) or unordered (bulleted). Your choice.

Graphics

In general, two options: GIF for line drawings and graphics; JPEG for photographs.

Many graphics contribute little to the information a Web page conveys and serve mostly to slow down the screen display and printing of that page. Then again, we live in an image-rich world and discrete, appropriate use of graphics can make a page more engaging. All of which is to say: Don't go overboard with graphics.

Other graphics preferences:

• Keep your graphics small in file size: under 20 kilobytes (Kb) each; 50-75 Kb total for a page. Graphics can be optimized in large part by limiting the color palette and color depth. For Web uses, 256 colors (aka, 8-bit) generally are sufficient.
• Set width and height attributes for each graphic, to speed page-loading.
• Use an alternate tag to aid visually-impaired site visitors who may be using text-reading software: alt="[Book cover]"

Authorship and Currency

Part of the joy and sorrow of the Web is that there's no centralized "editorial control;" pretty much anyone can put up pretty much anything. The relative ease and fluidity of Web publishing is truly grand, but extremely many Web resources give no indication of who produced the resource, nor when it was produced. We like our site visitors to have such information. So, please name the authors-producers-contributors for your document and indicate when the document was last revised.

Comments, Suggestions, Questions?

We'd love to hear from you! And we look forward to submissions from the adult literacy community. Send correspondence and/or documents to:

References

The Alertbox: Top Issues in Web Usability, Jakob Nielsen.
www.useit.com/alertbox (weekly)

Northeast Literacy Tech: Web Developers, Jeff Carter.
literacytech.worlded.org/nelrctech/webpub (2002)

The Top Fifteen Mistakes of First Time Web Design, Holly Burns.
doghause.com/top15.asp (January 1997)

W3C: Getting Started with HTML, Dave Raggett.
www.w3.org/MarkUp/Guide (February 2002)

W3C: More Advanced Features, Dave Raggett.
www.w3.org/MarkUp/Guide/Advanced.html (August 2000)

Web Design Group.
www.htmlhelp.com (2002)

Web Style Guide (2nd ed.), Peter J. Lynch and Sarah Horton.
www.webstyleguide.com (2002)

Webmonkey: The Web Developer's Resource, Lycos/Wired.
hotwired.lycos.com/webmonkey (2001)

What Makes a Great Web Site? Andrew B. King.
www.webreference.com/greatsite.html (1999)