The nature of a document is in the mind of the beholder. Once, document meant paper. Then, it became an electronic file printed on paper. Now, it's an electronic file published electronically. Here’s how to design documents that will work in any publishing medium.

Return to Newsletter

In the Beginning, There Was Simplicity

We were forced into it when word processing replaced typesetting, and writers gave up many of the amenities that made the published word, art. The computer—the tool that made it all possible—was the lowest common denominator. The first word-processed documents were visually very plain. And, it took several years before desktop publishing once again made it possible to create attractive printed work.

We were forced into simplicity again when the first online documents were limited by the capabilities of HTML. Like their word-processed predecessors, online documents were visually very plain. And, a print document that was saved as a Web page lost most or all of its formatting.

Now, You Can Have It All (Almost)

Today, many print-based word processors provide the option of saving a document as a Web page. Most features of the document survive the conversion. And, by aligning text using tables and text boxes, a print document and a Web page can appear to be virtually identical.

What Survives Web Page Conversion
Here are the features that survived when I saved a Word 2000 document as a Web page. The document was never intended for Web publication. It was a software reference manual:

• Generated Table of Contents
• Font styles (may depend on availability of fonts on the user's computer)
• Text colors
• Text aligned to center
• Bold and italic effects
• Heading levels
• Bulleted lists (were converted from custom bullets to default HTML bullet styles)
• Numbered lists
• Tables (both bordered and borderless)
• Text boxes
• Graphics (were converted in a separate directory to numbered gif's and jpeg's)

More information about:

Multiple Files

Formatting with Tables

Frames

What Doesn't Survive and Design Alternatives
Here are the features that didn't survive the conversion and ways to preserve them in the original design:

• Page breaks (Depending on the length of your document, you may want to divide it into separate files.)
• Indented margins, indented headings, tab-indented text (Use borderless tables to position text; for later browser versions you can also use text boxes.)
• Headers and footers (Use frames, but use them carefully.)
• Symbols (Insert the proper HTML symbol code after you convert your document. You must treat Wingdings like a font—if your reader has Wingdings, the symbol will display.)

"Today, on the surface, a Web page can look just like a print document. But beneath the surface, it can be simple or complex."

"To maximize online performance, you must design for simplicity of the HTML code so that your document will load quickly, be easy to maintain and be easy to enhance with JavaScript or animation."

Design for Simplicity Beneath the Surface

Today, on the surface, a Web page can look just like a print document. But beneath the surface, at the HTML level, it can be simple or complex.

To maximize online performance, you must design for simplicity of the HTML code so that your document will load quickly, be easy to maintain and be easy to enhance with JavaScript or animation.

You May Need to Sacrifice Convenience to Create a Simple File
While it's convenient to save your word processed document as a Web page, you may be saving extra code that makes your file unnecessarily complex.

Here is a comparison of the HTML code generated for two identical versions of this article by Microsoft Word (a word processor) and Macromedia Dreamweaver (a Web authoring package). The files used for this test were created independently in each of the packages tested.

Microsoft Word 2000 (approximately 600 lines of code, and Word didn't let me use a graphic behind the text for the Quick Reference Guide). Click here to view the Word document. (You must have Word installed on your computer.)

Macromedia Dreamweaver 3.0 (approximately 300 lines of code)

Scroll through the two samples and look at the difference in code complexity. Ask your programmer which file he or she would rather maintain.

Instead of a word processor, use a Web authoring package or create your document directly in HTML when:

• you need a small file
• you want the fastest possible load time
• you will add JavaScript or other programming to the online version.

More information about:

Headings

Use Good Design Principles

No matter where you publish or how you create your document, use good design principles. These will help the print reader as well as the online surfer:

• Use headings often. Try to picture the document online. Never have a screen full of text without a heading to break it up.
• Use subheadings even more often. Once the main heading scrolls off the screen, there is no frame of reference for the reader.
• Make your headings and subheadings specific. When writing a subheading, don't assume that your reader can see the heading it is beneath. (Specific subheadings also provide more keywords which may improve your document's rating by search engines.)
• Keep your paragraphs short. Never show your online reader a screen that does not include a heading or paragraph break.
• Use graphics sparingly, especially large ones. Graphics take longer than text to display. Use gif's instead of jpeg's whenever possible.

More information about:

HTML Tags

Navigation

Add Features for Online Ease of Use

If you will publish online, add features for online ease of use. If you develop your document in a word processor, you may need to add some of these features after it is saved as a Web document:

• Bookmark your headings. (In a Web authoring package, a bookmark is called a named anchor.) A bookmark identifies a heading as a destination for links.
• Make separate files for chapters and sections if you want readers to be able to print them separately.
• In each file, fill in the HTML heading (if you don't do this, your document will be listed as untitled by search engines). Also add meta description and keyword tags if desired.
• Create your title page and main menu. Try to make them fit within the first image that displays on your reader's screen, without scrolling.
• Link your main menu to its destination files and bookmarks.
• Create section menus if needed and link them to their destination files and bookmarks.
• Create any internal links. An internal link links a word or phrase to a destination.
• Create backward links from link destinations. Always give your reader a way to return to the file or point of origin after taking a link.
• Add alternative text for graphics. Then, if your reader chooses not to display graphics when reading your document, their titles or descriptions will still be visible.
• TEST YOUR DOCUMENT! Proofread it online. Take EVERY forward and backward link. Note the time it takes graphics to display. Read it as your reader would.

Quick Reference Guide

Today, functional design, visual appeal and code simplicity are all within your reach. Make them a part of your document planning and your design will work well in any format.