Web Style Guide: Part 4

<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>Graphics On The Web Page</H2> <P>As the web page has grown, and my own access to better quality graphics has improved, this web site has gone through three graphical makeovers, as well as having been JavaScript enabled.</P> <P>I am indebted to <A HREF="mailto:ewtapley@students.wisc.edu">Eric Tapley</A> for his graphics work, and his gentle application of a sense of aesthetics to my skull with a crowbar.</P> <HR> <DL> <DT><A HREF="#graphics" TARGET="Main">Graphics And Links</A></DT> <DT><A HREF="#maps" TARGET="Main">Image Maps</A></DT> <DT><A HREF="#javascript" TARGET="Main">JavaScript</A></DT> <DT><A HREF="#wishlist" TARGET="Main">Things I Wish I'd Thought Of</A></DT></DL> <HR> <H4><A NAME="graphics"></A>Graphics And Links</H4> <P>The first decision made, graphically, was one of "theme" for the web site. An organic/wood/earthtones theme was chosen, both because of the medieval subject of the game that this web site services, and because many people find the internet, with all of its technical gimcrackery, to be somewhat intimidating. By appealing to the warmth of organic color schemes and textures, we hope to make visitors to this web site more comfortable.</P> <P>Because of the muted colors of the graphics, a black background was chosen. Black offers the widest dynamic range for visual contrasts, and allows for softer edges on graphics, once again, making for a more organic feel to the graphics and to the web site as a whole. Keeping face with the softer color schemes and textures on the web site, the text color was chosen for a balance between high contrast and readability.</P> <P>In order to support subtler color depts and shading, the graphics on this web site are almost exclusively JPEG images, saved with 16.7 million colors. Because of this, there can't be any animations or transparencies, which in turn precluded the use of a background image. When the PNG graphic standard becomes the default image format of the Internet, rest assured that some of these things will be changed.</P> <P>All of the content-based graphics on this site use the ALT attribute to provide text for non-graphical browsers. ALT text for a link is surrounded by brackets. Graphics that are decorative, such as the <EM>Magic Horizons</EM> logo, also have ALT text, although the need for it isn't as pressing.</P> <P>The individual pages on this web site were optimized for a 640x480 browser window. Because of this, the maximum width of a graphic is 420 pixes, and the effective maximum is about 400 pixels. Sidebar graphics have a maximum width of 75 pixels, and very rarely went wider than 72.</P> <H4><A NAME="maps"></A>Image Maps</H4> <P>This site makes use of a few image maps, notably on the <A HREF="../game/map.html" TARGET="_top">Map of Port Mahon</A> and on the navigation scrolls used in the sidebar and at the bottom of each page.</P> <P>The map of Port Mahon is a client-side image map, as specified in the HTML 3.2 specification. Care has been taken to create ALT text where needed at the clickable areas on the map. The map points to a pair of brief gazettes on the local terrain and monsters around Port Mahon.</P> <P>Client-side image maps were chosen over server side image maps because they're simpler to set up, easier to maintain, and have a mechanism to make the image map itself useable to non-graphical browsers. (The ALT tag mentioned above.) There's also a noticeable improvement in performance and speed.</P> <P>The other "image map" is a faux image map, consisting of a graphic that's been cut to certain dimensions and each component placed into a table cell. The table was set with the BORDER, CELLPADDING and CELLPADDING attributes set to "0". This allows the pieces of the graphic to abut one-another, making it look like one contiguous image. In order to avoid the blue outlining that usually accompanies an image used as a button for a link, the IMG tag had its BORDER attribute set to "0" as well.</P> <P>The faux image map was chosen for the highlighting functions written into JavaScript.</P> <HR> <P><FONT SIZE="5"><EM>This allows the pieces of the graphic to abut one-another, making it look like one contiguous image.</EM></FONT></P> <HR> <H4><A NAME="javascript"></A>Embedded JavaScripts</H4> <P>The gold highlight effect on the sidebar and bottom scroll bar graphics are done with an embedded JavaScript. The Javascript is loaded just prior to the table containing the pieces of the faux image map, rather than between the <HEAD> and </HEAD> tags. The JavaScript takes a certain amount of time to be parsed and interpreted by the browser; it's better to have the script embedded just prior to where it will be used than to delay the loading of the initial content of the page by letting it load at the top. </P> <P>Initially, the script was loaded at the bottom of the page, but this caused JavaScript errors when the browser encountered "ONMOUSEOVER attributes in an HREF attribute that called for a function that hadn't been loaded yet.</P> <H4><A NAME="wishlist"></A>Things I Wish I'd Thought Of</H4> <P>There are a number of things I wish I had either implemented earlier in the development process of this web site, or wish I'd been able to get to work.</P> <DL> <DT>Base HREF</DT> <DD>This defines the basic HREF for all links on a given page. For the MH site, a suitable base HREF would have been sage.doit.wisc.edu/~burnside/mh. This makes all the links significantly easier to implement; it is, however, a decision that should be made at the beginning of the design process, as it can bollix relative URLs if not done carefully.</DD> <DT>Base TARGET</DT> <DD>This defines the basic TARGET attribute for all links on the web site, but its overridden by the TARGET attribute of an individual link. The base TARGET for the MH web site would have been _top. I may implement this on new pages as they're added, but retrofitting all the existing pages for it isn't worth the effort.</DD> <DT>Server Side Includes</DT> <DD>This is a way to get the server to insert commonly used pieces of HTML, such as the button bars on the bottom of the page. The utility of this becomes evident when the number of pages using this common element exceeds two or three. With a server side include, I could just update the button bars once, rather than having to propogate the changes across 80+ files. An added benefit of doing server side includes is that the HTML is cached separately from the rest of the page, making the loading of subsequent pages significantly faster, particularly if JavaScripts are included.</DD></DL> <DL> <DT>Pointers to External JavaScripts</DT> <DD>It is possible to use the <SCRIPT> tag to point to an external script through the SRC attribute. One of the major headaches with this site was trying to get that to work. There being a deadline closing in, I chose to embed the script rather than point to an external source file. As time permits, I may go about and try getting this to work again, as it allows the script to be cached as a separate file, making the delay on loading subsequent pages shorter.</DD></DL> <HR> <DIV ALIGN="CENTER"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="JUSTIFY"> <TR> <TD><A HREF="style1.html" TARGET="_top"><IMG SRC="../images/part1n.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/part4g.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>