Michigan Academy Web Site Redesign
Published 5 March 2005
Hi! You've stumbled upon a blog post by a guy named Ryan. I'm not that guy anymore, but I've left his posts around because cool URIs don't change and to remind me how much I've learned and grown over time.
Ryan was a well-meaning but naïve and priviledged person. His views don't necessarily represent the views of anyone.
<p>This week I unveiled the new and improved <a href="http://www.alma.edu/michiganacademy/">Michigan Academy</a> web site. The goals were ambitious:</p> <ul> <li>Valid <acronym title="Cascading Style Sheets">CSS</acronym> and <acronym title="eXtensible HyperText markup Language">XHTML</acronym>;</li>
<li>“Zoomable” design that could accommodate readers with poor eye site;</li> <li>Elastic areas to accommodate screens of varying size;</li> <li>Symbiosis with the Academy's current identity</li> <li>Print similarly to the Academy's letterhead</li> <li>Make the site accessible and attractive in all modern web browsers</li>
</ul> <p>I also had to create the site in such a way that it could be maintained by  the Academy's staff using Alma College's Content Management System. This required the use of <acronym>XHTML</acronym> Transitional instead of strict, because their web-based <acronym title="HyperText Markup Language">HTML</acronym> editor allows the opening of pages in a new window, which invalidates the strict document type.</p> <h3>Site Features</h3> <h4>Elastic Design</h4> <p>Stretch it. Shrink it. Break it. I dare you. All of the positioning and sizing of the site is relative, allowing a user to increase or decrease the font size to fit their needs (<kbd class="key">ctrl</kbd>+<kbd class="key">+</kbd> or <kbd class="key">-</kbd> on windows, <kbd class="key">⌘</kbd>+<kbd class="key">+</kbd> or <kbd class="key">-</kbd> on <abbr title="Macintosh Operating System">Mac OS</abbr> in Mozilla-based browsers and Safari) without breaking the web page. Try this on some other pages and see what happens—hope you never need to surf with eye problems!</p> <p>The page is also flexible to accommodate large screens and small. On an <acronym title="Hewlett Packard">HP</acronym>
iPAQ<a class="note" id="ref1" href="/index.php#note1">1</a> the same web page has to fit on a 3.5" screen (240 × 320 pixels) as on an <a title="Apple - Cinema Displays" href="http://www.apple.com/displays/">Apple Studio Display</a> (30", 2560 × 1600 pixels). In order to do this, and protect users whose devices weren't smart enough to use media-based stylesheets, I had to adapt a handy piece of javascript from <a title="The Man in Blue: daring to use "web design", "standards" & "good looking" in the same sentence" href="http://www.themaninblue.com/">The Man In Blue</a> that allows me to create <a title="The Man in Blue > Resolution dependent layout" href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution-Dependent Layouts</a>. That, and a little bit of <a title="Pocket-Sized Design: Taking Your Website to the Small Screen: A List Apart" href="http://www.alistapart.com/articles/pocket/">Pocket-Sized Design</a> allowed me to quickly change between a small screen and standard screen views, both when the page loads and when the user resizes the window.</p>
<h4>Graceful shadows and curves</h4> <p>Organic curves and <abbr title="three-dimensional">3-D</abbr> shadows are pretty, but they are difficult for web designers to create because the web is an entirely box-based medium. In a web page, everything has to be rectangular, and those that appear otherwise often use cunning transparency.</p> <p><img class="lfloat border" style="width: 110px; height: 90px;" alt="" src="/assets/20050304.jpg" />Using arcs based on a vector drawing of the Academy's logo, I place some curves in the navigation bar. These are merely well-placed background images, in boxes set to pad the text the appropriate amount. In order to life the navigation bar above the main content area, I had to relatively position it. This has the added benefit of keeping the main content above the navigation in the <acronym>HTML</acronym>, for easier use by text- and speech browsers.</p> <p><img class="rfloat border" style="width: 110px; height: 90px;" alt="" src="/assets/20050304-2.jpg" />Drop shadows are a very popular design element in most <abbr title="two-dimensional">2-D</abbr> computer environments. On the web, they are created by adding a semi-transparent image and tiling it across one or two sides. The problem with these shadows is the inability to tile more than one side, or to adequately create a corner where two shadows come together. Using the <a title="Onion Skinned Drop Shadows: A List Apart" href="http://www.alistapart.com/articles/onionskin/">Onion Skinned Drop Shadows</a> technique and some predictable template elements, I was able to nestle together those pesky corner elements.</p>
<h4>Pretty, pretty printing</h4> <p>Printing the Michigan Academy's web site gives you a near-exact duplicate of their letterhead, including a print-specific logo and founding date. As most browsers do not print background images, these objects are actually images embedded and hidden at the bottom of the content area:</p> <pre id="line81"><code><div id="print_logo"><img </code>…<code> width="0" height="0" /><br />Founded 1894</div></code></pre> <p>And <acronym>CSS</acronym> resembling:</p> <pre><code>@media screen, tv, projection, handheld {<br />div#print_logo { visibility: hidden }<br />div#print_logo img { display: none }<br />}<br />@media print {<br />div#print_logo { position: absolute }<br />div#print_logo img { width: auto; height: auto }<br />}</code></pre>
<p>In non-<acronym>CSS</acronym> browsers and in any medium other than print, the image will not be downloaded. The founding date will be visible to non-<acronym>CSS</acronym> browsers, but it will coincide with other location and contact information at the bottom of the page, and not seem terribly out-of place.</p> <p>Positioning this hidden section in this way allowed me all so to declare it <code>clear: both</code>, in order to stretch the containing <code>div</code>'s background to the bottom of both the navigation bar and the main content, regardless of which was longer.</p> <h4>Browse Happy</h4> <p>Regardless of web browser, the site should appear as intended, with one exception: <acronym title="Internet Explorer">IE</acronym> 5 for Macintosh. Strange and unpredictable bugs cause a single, insignificant problem that is noticeable but not unusable. For those of you who still use <abbr>Mac OS</abbr> 9 and cannot use a modern browser (my mother included), I recommend <a title="Download Netscape" href="http://ftp.netscape.com/pub/netscape7/english/7.02/mac/macos8/sea/Netscape-mac-full.bin">Netscape 7.02</a> or <a title="Download Opera Web Browser" href="http://www.opera.com/download/index.dml?platform=mac&ver=6.03">Opera 6.03</a>—they are the only way you are going to get a decent web experience.</p> <h4>Sounds complex! What about the time?</h4> <p>It is true—calling three stylesheets (and one twice) and a javascript may seem like a lot for a reader to download. But, using the magic that is <a title="Bare Bones Software : PRODUCTS : BBEDIT" href="http://www.barebones.com/products/bbedit/index.shtml">BBEdit</a> and some of its <a title="BBEdit Grep Tutorial" href="http://www.anybrowser.org/bbedit/grep.shtml">Great Grep Flavor</a>™, I quickly ripped out all of the extra comments, whitespace and unnecessary characters, creating optimized versions for download, shaving an extra 4<abbr title="Kilobytes">Kb</abbr> off of the already small files which, even on a 56<acronym title="Kilobytes per second">Kbps</acronym> modem will take less than half a second. And once downloaded, these files stay cached, keeping extended viewers of the site from continual download headaches.</p> <hr /> <p><a class="note" id="note1" href="/index.php#ref1">1</a>Although the iPAQ is the best example for this article, Hewlett Packard has recently made some <a title="HP Secretly Rendering Printer Cartridges Unusable?" href="http://yro.slashdot.org/article.pl?sid=05/02/22/2224223&tid=123&tid=194&tid=218">despicable</a> <a title="DRM Tinkering with Intel's PXA270?" href="http://ask.slashdot.org/article.pl?sid=05/01/07/1137224&tid=118&tid=137&tid=172&tid=4">decisions</a> regarding its <a title="HP to Region-code Cartridges" href="http://it.slashdot.org/article.pl?sid=05/01/20/0226204&tid=173&tid=126&tid=218">hardware</a> products and, although I one several pieces of HP hardware, refuse to recommend the product or even link to its web site. </p>