GUIDELINES

Use a consistent layout White space is good Visually organize the page; employ horizontal rules Keep pages short Include elements of contrast Use all stylistic elements in moderation Use a consistent layout Your documents reflect you, your organization, and your information. By consistently using the same layout you are creating a unified whole, an identity. With the use of a consistent layout it is easier for the reader to know when they are reading your text and not someone else's. The creation of a template file can be helpful here. The template file would consist of your standard headers, footers, logo, signature, last data updated, as well as any other stylistic features you may incorporate. White space is good White space is the empty areas of a page. It adds contrast and provides a place for you eyes to rest. White space is not wasted space. "White space is not wasted space." For this same reason, stay away from all capital letters. Capital letters are usually the same height and width. This creates a block effect reducing the white (negative) space around letters. Instead, use a combination of lower and upper case letters because it increases the amount of white space around the letters. Visually organize your pages In other words, group similar concepts on your page together. Employ proximity. Don't put our email address at the top of the page and the URL to your personal home page at the bottom. Both items are electronic pointers relating to you. Group them together. When there is more than one type of information on a page, delimit the page with white space or horizontal rules. Keep your pages short In general, people do not like reading text from a computer screen. Using the popular vertical scroll bar of graphical WWW browsers it is very easy to get lost in a document. In general keep you pages shorter than two or three screens in length. By keeping your pages short and to the point, the attention span of your readership will increase. Put another way, break up long pages into shorter ones. Include elements of contrast A boring looking page is completely filled with text. It contains no white space, no change in fonts or font sizes, no lists, no pictures. It is boring. Elements of contrast breakup the monotony and make our page more dynamic. Elements of contrast include emphasizing some text with styles like <em></em> or <strong></strong>. Other examples include the use of very heavy horizontal rulers or very large headers. With the current version of MacWeb and MacMosaic you as a information provider can distribute preference files defining the size of style of fonts you want your readers to use. This gives you the ability to select different font families for different parts of your documents. Unfortunately, this is an extremely uncommon practice and difficult to actually implement. Another method for accomplishing the same goal is the use of cascading style sheets and described in Version 3.2 of the HTML standard. Use all stylistic elements in moderation Be a stoic Greek, "All things in moderation." "Be a stoic Greek, 'All things in moderation.'" The use of too many headers gets old and the reader feels like you are shouting. Too many emphasized elements loose their distinction. To many graphics take too long to download no matter how fast your computer or network connection is.

EXAMPLES

Consumer Information Center New York Times on the Web HotWired

SEE ALSO

Dave Raggett, "Introducting HTML 3.2" - "HTML 3.2 adds widely deployed features such as tables, applets and text flow around images, superscripts and subscripts while providing backwards compatibility with the existing standard HTML 2.0." <URL:http://www.w3.org/pub/WWW/MarkUp/Wilbur/> Dave Raggett, "HyperText Markup Language (HTML) " - This is a useful guide to other HTML pages. <URL:http://www.w3.org/pub/WWW/MarkUp/> HTML Writers Guild, "Advice for HTML Authors" - "This is a list of advice for HTML authors, aimed at helping people produce quality HTML. It is intended to educate HTML authors to the elements of good and bad HTML style, focusing on some common problems with current HTML on the Web. It does not seek to ``control'' Guild members, but rather to encourage them to adopt these practices in their everyday HTML construction." <URL:http://ugweb.cs.ualberta.ca/~gerald/guild/style.html> HTML Writers Guild, "HTML Writers Guide Website" - "Welcome to The HTML Writers Guild Website, the first international organization of World Wide Web page authors and Internet Publishing professionals. Guild members have access to resources including: HTML and Web business mailing lists, information repositories, and interaction with their peers." <URL:http://www.hwg.org/> James "Eric" Tilton, "Composing Good HTML" - "This document attempts to address stylistic points of HTML composition, both at the document and the web level." <URL:http://www.cs.cmu.edu/~tilt/cgh/> Jan V. White, Graphic Design for the Electronic Age, (Watson-Guptill : New York 1988) Kevin Werbach, "Bare Bones Guide to HTML" - "The Guide lists every tag in the official HTML 3.2 specification, plus the Netscape extensions, in a concise, organized format." <URL:http://werbach.com/barebones/> Microsoft, "Microsoft Site Builder Workshop: Authoring" - This set of pages outline how to take advantage of HTML extentions with Microsoft's Internet Explorer. <URL:http://www.microsoft.com/workshop/author/> Microsoft, "Microsoft Site Builder Workshop: Design/Creative" - Here you will find examples of page layout possibilities for HTML and Internet Explorer. <URL:http://www.microsoft.com/workshop/design/> Mike Sendall, "HTML converters" - Here is a list of applications converting documents into HTML. <URL:http://www.w3.org/pub/WWW/Tools/Filters.html> NCSA, "Beginner's Guide to HTML" - "The guide is used by many to start to understand the hypertext markup language (HTML) used on the World Wide Web. It is an introduction and does not pretend to offer instructions on every aspect of HTML. Links to additional Web-based resources about HTML and other related aspects of preparing files are provided at the end of the guide." <URL:http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html> Netscape Communications Corporation, "Creating Net Sites" - This is a page to Netscape HTML extensions. <URL:http://home.netscape.com/home/how-to-create-web-services.html> Robin Williams, The Non-Designer's Design Book (Peach Pit Press: Berkeley CA 1994) Roy Paul Nelson, Publication Design, 5th ed. (Wm. C Brown: Debuque IA 1991) Tim Berners-Lee, "Style Guide for online hypertext" - "This guide is designed to help you create a WWW hypertext database that effectively communicates your knowledge to the reader." <URL:http://www.w3.org/pub/WWW/Provider/Style/Overview.html> W3, "HyperTetxt Design Issues" - "This lists decisions to be made in the design or selection of a hypermedia information system. It assumes familiarity with the concept of hypertext. A summary of the uses of hypertext systems is followed by a list of features which may or may not be available. Some of the points appear in the Comms ACM July 88 articles on various hypertext systems. Some points were discussed also at ECHT90 . Tentative answers to some design decisions from the CERN perspective are included." <URL:http://www.w3.org/pub/WWW/DesignIssues/Overview.html> Yahoo!, "HTML Editors (Yahoo!)" - This is a list of HTML editors and guides to other lists of editors. <URL:http://www.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/HTML_Editors/> Yale Center for Advanced Instructional Media, "Yale C/AIM WWW Style Manual" - This is one of the more scholarly treatments of the subject. <URL:http://info.med.yale.edu/caim/StyleManual_Top.HTML>

Version: 1.5
Last updated: 2004/12/23. See the release notes.
Author: Eric Lease Morgan (eric_morgan@infomotions.com)
URL: http://infomotions.com/musings/waves/