Web Style Guide: Part 1

<BODY BGCOLOR="#000000" TEXT="#c0c0c0" LINK="#FFFF00" VLINK="#808080"> <TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD> <P ALIGN="CENTER"><IMG SRC="../images/mhb1.jpg" ALT="Magic Horizons Title Graphic" ALIGN="BOTTOM" WIDTH="398" HEIGHT="162"></P> <H2>Web Page Style Guide</H2> <P>This web page uses a number of tricks with HTML to increase useability, and to make the page look better. In the interests of making the life of the next person to maintain this site easier, I'm documenting them here.</P> <HR> <DL> <DT><A NAME="toc"></A><A HREF="#biases" TARGET="Main">Philosophy And Authorial Biases</A></DT> <DT><A HREF="#organization" TARGET="Main">Overall Site Organization</A></DT> <DT><A HREF="#doclength" TARGET="Main">Document Lengths</A></DT></DL> <HR> <H4><A NAME="biases"></A>Philosophy And Authorial Biases </H4> <P>I am a firm beleiver in the principle that the <EM>T</EM> in HTML is the most important letter of the acronym. The Internet is still predominantly a <EM>text</EM> medium, and this web page reflects it. </P> <P>I have made use of several extensions to HTML, but only in a context where if a browser fails to recognize them, the content of the page will still be usable and attractive.</P> <P>The overall goal of any web page is to make the information in it readily accessable. Thus, the extensions chosen for this site were chosen with an eye towards increasing navigability, rather than flashiness or sales.</P> <HR> <P><FONT SIZE="5"><EM>The overall goal of any web page is to make the information in it readily accessable.</EM></FONT></P> <HR> <H4><A NAME="organization"></A>Overall Site Organization </H4> <P>The Magic Horizons Web Site is organized around a three-tier hierarchical table of contents structure. The front page of the web site has the button bar along the bottom of the page, which links to the three table of contents files. This is the first tier.</P> <P>The table of contents files contain links to each of the documents listed in them, plus the button bar back to the main page. This is the second tier.</P> <P>For long articles, such as this one, there's a link-list at the top of the page with links using the NAME attribute to the subject headers throughout the document. This is the third tier.</P> <P>A pair of secondary navigation methods are provided through the documents <A HREF="../new.html" TARGET="_top">new.html</A>, which lists the documents in this web site in the order in which they were last modified, and <A HREF="../faq.html" TARGET="_top">faq.html</A>, which gives a guided tour to most of the documents on this site. This allows the maximum utility for both new users and frequent visitors, while the primary navigation method enables the use of this site as a reference tool.</P> <P>Many documents will have contextual links, such as the links in the paragraph above, to allow jumping around to points of interest. Documents which have been broken up into multiple web pages for those with slower modem speeds have links to the next document in the sequence and the previous document in the sequence, at the bottom of each page.</P> <P>Finally, for those with a frames-capable browser, the sidebar keeps the buttons of the first tier navigation system readily accessable.</P> <H4><A NAME="doclength"></A>Document Length </H4> <P>People read text off of a monitor at roughly 60% of the speed of reading text off of a page. Coupled with the increased eyestrain of reading off of a monitor, versus reading off of a page, this makes long documents impractical on a web page.</P> <P>A contributing factor in keeping document lengths short comes from several studies that show that nearly 40% of all readers of an online document never use the scroll bar, meaning they only get the first screenful of content. Over 75% of users won't scroll past the third screenful of information. Coupled with the old typesetter's paradigm of keeping text at 50 characters per line, and this gives you roughly 250 words to make your first impression with a web page, less any space you use for a title graphic, and about 800 words total for an entire document.</P> <HR> <P><FONT SIZE="5"><EM>Over 75% of users won't scroll past the third screenful of information.</EM></FONT></P> <HR> <P>Two ways to get around this problem have been implemented in this web site. The first is putting using the third tier of subject-level tables of contents at the top of each document.</P> <P>The second is putting organizational links at the bottom of each document, to the previous page, the next page, and the table of contents at the top of the page.</P> <P>These links exist to help users navigate the through the web page, particularly if they've been thrown into a page without reading the document that was <EM>intended</EM> to be read before the current one. Unlike a book, an online document is not strictly sequential. Rather, with Internet search engines, the closest analogy is starting <EM>War And Peace</EM> by starting on page 87, jumping to 33, going from there to page 417, going from 417 to 291, and then jumping to page 15 of <EM>Anna Kerenina</EM> without realizing they've changed novels.</P> <P>Because of the noncontiguous nature of online documents, care should be taken to write them in such a way that a they're accessable if read in any order. At the very least, if a document <EM>must</EM> be read in a certain order (such as a detailed instruction set), there should be a definite pointer to the first document in the set, as well as the previous and next links.</P> <P></P> <HR> <DIV ALIGN="CENTER"> <TABLE BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A HREF="style1.html" TARGET="_top"><IMG SRC="../images/part1g.jpg" ALT="[Part 1]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style2.html" TARGET="_top"><IMG SRC="../images/part2n.jpg" ALT="[Part 2]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style3.html" TARGET="_top"><IMG SRC="../images/part3n.jpg" ALT="[Part 3]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style4.html" TARGET="_top"><IMG SRC="../images/part4n.jpg" ALT="[Part 4]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD></TR></TABLE></DIV> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A><IMG SRC="../images/left_h.jpg" ALT="Left End Of Scroll Bar" WIDTH="32" HEIGHT="116"></A></TD> <TD><A HREF="../info/info_toc.html" TARGET="_top"><IMG SRC="../images/info_h_n.jpg" ALT="[Logistics]" ALIGN="BOTTOM" BORDER="0" WIDTH="45" HEIGHT="116" NAME="info"></A></TD> <TD><A HREF="../game/game_toc.html" TARGET="_top"><IMG SRC="../images/game_h_n.jpg" ALT="[Game Info]" ALIGN="BOTTOM" BORDER="0" WIDTH="60" HEIGHT="116" NAME="game"></A></TD> <TD><A HREF="../misc/misc_toc.html" TARGET="_top"><IMG SRC="../images/misc_h_n.jpg" ALT="[Miscellaneous Information]" ALIGN="BOTTOM" BORDER="0" WIDTH="62" HEIGHT="116" NAME="misc"></A></TD> <TD><A HREF="../faq.html" TARGET="_top"><IMG SRC="../images/faq_h_n.jpg" ALT="[Frequently Asked Questions]" BORDER="0" WIDTH="58" HEIGHT="116" NAME="faq"></A></TD> <TD><A HREF="../new.html" TARGET="_top"><IMG SRC="../images/new_h_n.jpg" ALT="[What's New]" ALIGN="BOTTOM" BORDER="0" WIDTH="52" HEIGHT="116" NAME="whatsNew"></A></TD> <TD><A HREF="../index.html" TARGET="_top"><IMG SRC="../images/home_h_n.jpg" ALT="[Magic Horizons Home Page]" ALIGN="BOTTOM" BORDER="0" WIDTH="59" HEIGHT="116" NAME="home"></A></TD> <TD><IMG SRC="../images/right_h.jpg" ALT="Right End Of Scroll Bar" WIDTH="22" HEIGHT="116"></TD></TR></TABLE> <P>Problems with the page? Email <a HREF="mailto:burnside@itis.com">Ken Burnside</a>.</P></TD></TR></TABLE></BODY>