Rules for Web Site Design

<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BGCOLOR="#996666" text="#330000" link="#336600" vlink="#336600" alink="#ffcc66"> <CENTER> <P> <BR> <TABLE WIDTH="75%" BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR><TD BGCOLOR="#42426F"> <CENTER> <TABLE WIDTH="96%" BORDER=0 CELLPADDING=20 CELLSPACING=2><TR> <TD WIDTH="70%" VALIGN=TOP BGCOLOR="#ffcc99"> <BR><CENTER> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="5"><B>Malia's Sandbox<BR></FONT> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="4"> for HTML and Web Site Design</B></FONT> <BR> <BR> </CENTER> </TD> </TR> <TR><TD BGCOLOR="#ffcc99" >  <P><FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="4"><B> Rules for Web Site Design: The Technical Writer's Perspective </B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Imagine you are a technical writer who's been producing print documents for years. Today you get assigned a project to write a report for your company's web site. You could approach the problem as if the report would be distributed in print and it may work out fine. But you have neglected to make use of the powerful features of electronic publication such as hyperlinking. The document designed for print will be missing those elements needed for optimal readability, functionality, and usability. <P>Writing documents for the web entails one major difference than writing for print, the design of a print document is static while the design of a web document is fluid. Once a document is printed its design never changes. For this reason a document designed for print can include specifications for how it's supposed to look when printed. The way a web document looks when presented to the reader depends heavily on the capabilities of the equipment and software the reader is using to view the document. The same web document viewed by one reader could look very different when viewed by another reader. <P>This guide will provide design suggestions that are independent from the technology used for implementation. These suggestions are specific to Web document presentation though some may be useful for other forms of electronic presentation, such as an online help system. <P>This guide will not go into the detail of writing HyperText Markup Language (HTML) or the mechanics behind writing and designing a web site. There are several technologies currently available, such as the popular HTML, and many more up-and-coming. For design information that does go into technological detail, see the Recommended Resources at the end of this paper. </FONT> <P><FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="4"><B>The Rules </B></FONT> <P><FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="one">1.</A> First Develop a Plan </B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>As with any large document, documents written for the web require planning. This planning includes all aspects that a technical writer includes when planning any other document, such as content, purpose, and audience. In addition, since a web site may contain several documents, organization of those documents is extremely important. Site designers have adopted a technique used by programmers, the flow chart. The flow chart is a diagram that provides graphical representations of the documents that will be included in the site. The diagram below represents a very simple web site. <BR><IMG vspace=1 SRC="flow.gif" ALT=" " WIDTH="400" > <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="two">2.</A> Write/Design for Readability</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Reading text from a computer screen is much more difficult than reading from the printed page. Remember that most, if not all, of your web documents will be read from a computer screen. Make the reading as easy and comfortable for your reader as possible. Keep paragraphs short, shorter than you would for a printed page. Web documents require concise writing. Use white space liberally. Break large blocks of text with frequent headings and subheads and make use of lists wherever possible. <P>You can design your document to appeal to a reader by keeping the page length no longer than the amount of space available on a screen to avoid making the reader scroll through the document. Instead the reader would activate a hyperlink to turn to the next page. However, this technique excludes those readers who will print your document for later reading. <P>The document that is contained within a single file, instead of many, will take longer to download but will print much easier. The single file method can be made easier to navigate through by providing a table of contents in which each entry is a hyperlink to that section of the document. <P>Consider your document before deciding your presentation method. <P> </FONT> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="three">3.</A> Design for Functionality </B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>The World Wide Web is the perfect medium for creative designers and programmers to show their stuff. Much is very useful but some is not. Before including a "cool" technique on your web, consider how it contributes to the information you are presenting. One example that I've seen frequently is the counter, a number displayed on a page that tells the reader how many people have read that page. Unfortunately, the writers of these pages failed to consider why their reader may want to know this information. Actually it's more interesting to the writer, not the reader. If a writer wants to include a counter, he should make it interesting to the reader by including a statement offering some prize, such as free software or 50 dollars, to the 1 millionth reader. </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="four">4.</A> Design for Usability</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Usability means how easily the reader finds the information he is looking for. The most common and best usability tool is the navigation bar. Navigation bars divide the information presented on a web site into topics. These topics should have descriptive labels so that the reader knows exactly what he will find. Some sample topics from the Washington Post web site include Politics, Sports, and Style. Navigation bars also include tools to aid in navigation. Sound redundant? What if you were reading an article on the Paula Jones case and decided you wanted to browse through all other articles dealing with Paula Jones? You would use the navigation tool called Search. Other standard tools are site map and home. <P>In creating your documents, remember to include a navigation bar on every page. Unlike a printed document where the first page the reader sees is the title page, your web reader may first see a document on the lowest level of your organization chart. This reader likely followed a link from another web site referencing your information. By including a navigation bar you are telling the reader where he is, what other information is available, and how to get that information. </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="five">5.</A> Maintain Design Continuity Throughout Web Site</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Use the navigation bars and color scheme on your documents to establish an identity and stick with it. With navigation bars on every page it is the perfect place to include a logo. The logo can also serve as the Home tool. Identical, or nearly identical, navigation bars will constantly remind the reader where he is. Using identical color combinations in the background, column dividers, or text will reinforce this location. If a link to another topic displays a page that is very different visually than the previous page the reader will be mislead into thinking that he is looking at a different web site. Avoid confusing your reader. </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="six">6.</A> Keep Image Sizes Low</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Remember image etiquette. Determine the data transfer speed available to your readers. If your web site is located on a local intranet you do not need to worry about speed since all data will travel across a network. However, if any of your readers will be using a modem, speed is a big issue. The best way to reduce the amount of time your documents take to display on the screen is to reduce the file size of your images. As a general rule, the total size of all images on each page should be no larger than 30 kilobytes. An image that is used more than once on a page, such as a bullet, may be counted only once. <P>You can also use a common trick to display your information more quickly. For each image, define the width and height. The browser will reserve that space for the image and display the text more quickly. Your reader will have something to look at while waiting for the images. <P>Keep in mind that some of your readers may have set their browser to ignore images. This is common for readers using a modem. For these readers, either the word "image" will be displayed or nothing at all. However, you can include alternative text for each image so that the reader will have something descriptive to explain the missing image. Alternative text is especially helpful when an image is used to link to other information. If your navigation bar is made of images, then alternate text is extremely important. Otherwise the reader would be completely unable to find any information. </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="seven">7.</A> Design for Multiple Displays </B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Ultimately, the final design of your web documents will be determined by the browser your reader is using. You can never be sure that the way your page displays on your computer will look the same way to your readers. The differences could be subtle in which a heading may display 14 point bold on one browser but another browser displays headings as 12 point bold. Consider the marquee feature in which some specific text that you want to call attention to scrolls across the screen. Marquee only works if the reader is using Internet Explorer. On other browsers the text is statically displayed. More complex design features may loose complete functionality. Similarly, other design features may function well in one browser but have no functionality in another browser. <P>Screen resolution, measured in dots per inch (dpi), must also be considered. Your computer may have 600 X 800 dpi resolution. Naturally you would design your site to fit in your screen. However, if any of your readers use a monitor that can only handle 480 X 640 dpi the browser will try to squeeze your document into the smaller space and your design will go completely awry. The best idea is to design for the lowest common denominator, the 480 X 640 dpi screen. </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="eight">8.</A> Use Contextual Links Only</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Hyperlinks are made of two parts, the address of the referenced document and some text (or image) that activates the link. The most common mistake is to use link text that describes the reader's action such as "Click here for the latest Riven review." Any reader on the web will know that underlined text indicates a hyperlink. This has become standard for all links. Readers know that to activate the link they must click on it. Instead, take the opportunity to provide the reader more information to describe the referenced material, such as "Riven, the sequel to Myst, promises more challenging puzzles." </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="nine">9.</A> Test Your Pages</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>Nothing is more frustrating to readers than error messages. Do everything you can to make sure your readers don't see errors while reading your web. Four suggestions for testing are: <UL><LI>View your design from various browsers. <LI>View your design from various screen resolutions. <LI>Disable images from your browser and attempt to navigate your site. <LI>Activate ALL your hyperlinks or use available testing software. </UL> </FONT> <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B> <A NAME="ten">10.</A> Read the Web</B></FONT> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> <P>The best source for design information and inspiration lies on the web. The web is filled with examples of good, bad, and merely adequate design. Read it. Evaluate it. Borrow and adapt from it. <P> <FONT FACE="VERDANA, ARIAL, GENEVA" SIZE="3"><B>Recommended Resources</B></FONT> <P> <FONT FACE="VERDANA, GENEVA, ARIAL" SIZE="2"> Webmonkey by HotWired<BR> <A HREF = "http://www.hotwired.com/webmonkey">www.hotwired.com/webmonkey</A><P> Apple Web Design Guide<BR> <A HREF = "http://applenet.apple.com/hi/web/web.html">applenet.apple.com/hi/web/web.html</A><P> Sun on the Net: Guide to Web Style<BR> <A HREF = "http://www.sun.com/styleguide">www.sun.com/styleguide</A><P> IBM Human Computer Interaction: Design Guidelines <BR> <A HREF = "http://www.ibm.com/IBM/HCI/guidelines/web/web_design.html">www.ibm.com/IBM/HCI/guidelines/web/web_design.html</A><P> </FONT>  </TD></TR> </TABLE> </CENTER> </TD></TR> </TABLE> <P> </CENTER> <BODY>