<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>The Web Writer</title>
<style type="text/css">
<!--
h1 { font-family: Optimum, "AvantGarde Md BT", Arial; font-size: 24pt;
font-style: normal; font-weight: lighter; color: #E88C00}
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13pt; font-style:
normal; font-weight: lighter; color: #989480}
h3 { font-family: Optimum, "AvantGarde Md BT", Arial; font-size: 14pt;
font-style: normal; font-weight: normal; color: #E88C00}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style:
normal; font-weight: normal}
.qrg { font-family: Optimum, "AvantGarde Md BT", Arial; font-size:
16pt; font-style: normal; font-weight: lighter; color: #FFFFFF}
.sample { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
font-style: normal; font-weight: normal; color: #E88C00}
.link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
line-height: normal; font-weight: normal; color: #E88C00}
ul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style:
normal; font-weight: normal}
blockquote { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12pt; font-style: italic; font-weight: normal; color: #E88C00}
-->
</style>
</head>
<body lang=EN-US link=#E88C00 vlink=#E88C00 class="Normal" bgcolor="#ffffff"
alink="#989480">
<table width="81%" border="0" cellpadding="7"
align="center">
<tr valign="bottom">
<td>
<h1 align="left"><a name="Top"></a>Designing
For Print and Online Publishing</h1>
</td>
</tr>
<tr valign="top">
<td height="59">
<h3 align="left"><font color="#989480">Developing
Pre-Internet and Print/Internet
Documents</font></h3>
<p align="left">By Linda Moore</p>
</td>
</tr>
</table>
<br>
<div align=center>
<table border=0 cellspacing=0 cellpadding=5 width=617 align="center">
<tr>
<td width=197 valign=top class="Normal" bordercolor="#E88C00"
height="53">
<p align="left"> </p>
</td>
<td width=400 valign=top class="Normal" bordercolor="#E88C00"
height="53">
<p>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.
</p>
</td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="14">
<p><a href="writer.htm">Return to Newsletter</a>
</p>
</td>
<td width=400 valign=top class="Normal" background="WebGraphics/orangegradient.gif"
height="7">
<p> </p>
</td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="264">
<p> </p>
</td>
<td width=400 valign=top class="Normal" height="264">
<h3>In the Beginning, There Was Simplicity</h3>
<p> 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.</p>
<p>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.</p>
</td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="26"> </td>
<td width=400 valign=top class="Normal" height="26"> </td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="457">
<p> </p>
</td>
<td width=400 valign=top class="Normal" height="457">
<h3>Now, You Can Have It All (Almost)</h3>
<p>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.</p>
<p><font color="#E88C00">What Survives Web Page Conversion</font><br>
Here are the features that survived when I saved a Word 2000 "print"
document as a Web page. The document was never intended for Web publication.
It was a software reference manual:</p>
<ul>
<li>Generated Table of Contents
<li>Font styles (may depend on availability of fonts on the user's computer)
<li>Text colors
<li>Text aligned to center
<li>Bold and italic effects
<li>Heading Levels
<li>Bulleted lists (were converted from custom bullets to default HTML
bullet styles)
<li>Numbered lists
<li>Tables (both bordered and borderless)
<li>Text boxes
<li>Graphics (were converted to numbered gif's and jpeg's)
</ul>
</td>
</tr>
<tr>
<td width=197 valign=middle class="Normal" height="273">
<p align="right"> </p>
<p align="center">More information about:</p>
<p align="center"><a href="%3Cfont%20color=%22#E88C00%22%3Ehttp://www.web-source.net/symbols.htm%3C/font%3E"><font
color="#E88C00">Symbol
Codes</font></a></p>
<p align="center"><a href="h%3Ca%20href=%22http://qsilver.queensu.ca/%7E3jku/wingding.htm%22%3Ettp://qsilver.queensu.ca/%7E3jku/wingding.htm%3C/a%3E">Wingdings</a></p>
</td>
<td width=400 valign=top class="Normal" height="273">
<p><font color="#E88C00">What Doesn't Survive and Design
Alternatives</font><br>
Here are the features that didn't survive the conversion and ways to
preserve them in the original document design:</p>
<ul>
<li>Page breaks (Depending on the length of your document, you may want
to divide it into separate files.)
<li>Indented margins, indented headings, tab-indented text (Use borderless
tables to position text; for later browser versions you can use text
boxes.) </li>
<li>Headers and footers (Use frames, but use them carefully.
<li>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
</ul>
</td>
</tr>
<tr>
<td width=197 valign=middle class="Normal" height="2"> </td>
<td width=400 valign=top class="Normal" height="2"> </td>
</tr>
<tr>
<td width=197 valign=middle class="Normal" height="571">
<p><font color="#E88C00"><i>If you run this test
in a different word processor
or Web authoring package, please send me your file. I'll report your results
here.</i></font></p>
</td>
<td width=400 valign=top class="Normal" height="571">
<h3> Design for Simplicity Beneath the Surface</h3>
<p>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.</p>
<p>To maximize online performance, you must design for simplicity beneath
the surface so that your document will load quickly, be easy to maintain
and be easy to enhance with JavaScript or animation.</p>
<p><font color="#E88C00">You May Need to Sacrifice Convenience
to Create
a "Simple" File</font><br>
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. </p>
<p>Here is a comparison of the HTML code generated for this article by
Microsoft Word (a word processor) and Macromedia Dreamweaver (a Web
page authoring package). The files used for this test were created independently
in the package tested. </p>
<p><font color="#E88C00">Microsoft Word 2000</font>
(xxx lines of code;
takes xx seconds to load at 56 kbps)</p>
<p><font color="#E88C00">Macromedia Dreamweaver 3.0</font>
(xxx lines
of code; takes xx seconds to load at 56 kbps)</p>
<p>Use a Web authoring package or create your document directly in HTML when:</p>
<ul>
<li>you need a small file</li>
<li>you need the fastest possible load time</li>
<li>you will add JavaScript or other programming to the online version.</li>
</ul>
</td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="8"> </td>
<td width=400 valign=top class="Normal" height="8"> </td>
</tr>
<tr>
<td width=197 valign=middle class="Normal" height="358">
<p align="center">More information about:</p>
<p align="center"><a href="heading.htm"><font
color="#E88C00">Headings</font></a></p>
</td>
<td width=400 valign=top class="Normal" height="358">
<h3>Use Good Design Principles</h3>
<p>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:</p>
<ul>
<li> Use headings often. Try to picture the document online. Never have
a screen full of text without a heading to break it up.
<li>Use subheadings even more often. Once the main heading scrolls off
the screen, there is no frame of reference for the reader. </li>
<li>Make your headings and subheadings specific (even though this may
seem redundant in print). When writing a subheading, don't assume
that your reader can see the heading it is beneath.
<li>Keep your paragraphs short. Never show your online reader a screen
that does not include a heading or paragraph break.
<li>Use graphics sparingly, especially large ones. Graphics take longer
than text to display. Use gif's instead of jpeg's whenever possible.
</ul>
</td>
</tr>
<tr>
<td width=197 valign=top class="Normal" height="3"> </td>
<td width=400 valign=top class="Normal" height="3"> </td>
</tr>
<tr>
<td width=197 valign=middle class="Normal" height="548">
<p align="center">More information about:</p>
<p align="center"><a href="multiple.htm"><font
color="#E88C00">Multiple
Files</font></a></p>
<p align="center"><a href="keyword.htm"><font
color="#E88C00">HTML Tags</font></a></p>
<p align="center"><font color="#E88C00"><a
href="navigation.htm">Navigation</a></font></p>
</td>
<td width=400 valign=top class="Normal" height="548">
<h3>Add Features for Online Ease-of-Use</h3>
<p>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:</p>
<ul>
<li>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.
<li>Make separate files for chapters and sections if you want readers
to be able to print them separately.
<li>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.
<li>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.
<li>Link your main menu to its destination files and bookmarks.
<li>Create section menus if needed and link them to their destination
files and bookmarks.
<li>Create any internal links. An internal link links a word or phrase
to a destination.
<li>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.
<li>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.
<li><b>TEST YOUR DOCUMENT!</b> Proofread it online. Take <b>EVERY</b>
forward and backward link. Note the time it takes graphics to display.
Read it as your reader would.
</ul>
</td>
</tr>
<tr>
<td rowspan="2" valign=top class="Normal" width=197 bgcolor="#CC9966"
background="WebGraphics/orangekeyboard.gif">
<h1 class="qrg" align="right"><font color="#FFFFFF">Quick
Reference Guide</font></h1>
<p><a href="print_qrg.htm"><font color="#000000">Click
and print for a
handy reference</font></a></p>
</td>
<td width=400 valign=top class="Normal"> </td>
</tr>
<tr>
<td width=400 valign=top class="Normal" height="12">
<p>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.</p>
</td>
</tr>
</table>
<p><font color="#E88C00"><a href="#Top">Top</a></font></p>
<p><font color="#989480">© 1997-2002</font>
<font color="#E88C00">Linda
Moore: Instructional Designer, Writer, Editor</font><font color="#989480"><br>
P. O. Box 5158 Dearborn, MI 48128</font><br>
<font color="#989480">Phone: (313) 277-8542 Fax: (313) 277-8541
</font><a href="mailto:%20lmoore@gr-lakes.com">Email:
lmoore@gr-lakes.com</a><font color="#E88C00"> </font>
</p>
</div>
<div style='border:none;border-top:#949880 .5pt;padding:1.0pt 0in 0in 0in'></div>
</body>
</html>