Wordsligner • Dissident • Webwright

Michigan Academy Web Site Redesign

Published 05 March 2005

This week I unveiled the new and improved Michigan Academy web site. The goals were ambitious:

  • Valid CSS and XHTML;
  • “Zoomable” design that could accommodate readers with poor eye site;
  • Elastic areas to accommodate screens of varying size;
  • Symbiosis with the Academy's current identity
  • Print similarly to the Academy's letterhead
  • Make the site accessible and attractive in all modern web browsers

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 XHTML Transitional instead of strict, because their web-based HTML editor allows the opening of pages in a new window, which invalidates the strict document type.

Site Features

Elastic Design

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 (ctrl++ or - on windows, ++ or - on Mac OS 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!

The page is also flexible to accommodate large screens and small. On an HP iPAQ1 the same web page has to fit on a 3.5" screen (240 × 320 pixels) as on an Apple Studio Display (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 The Man In Blue that allows me to create Resolution-Dependent Layouts. That, and a little bit of Pocket-Sized Design 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.

Graceful shadows and curves

Organic curves and 3-D 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.

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 HTML, for easier use by text- and speech browsers.

Drop shadows are a very popular design element in most 2-D 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 Onion Skinned Drop Shadows technique and some predictable template elements, I was able to nestle together those pesky corner elements.

Pretty, pretty printing

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:

<div id="print_logo"><img  width="0" height="0" />
Founded 1894</div>

And CSS resembling:

@media screen, tv, projection, handheld {
div#print_logo { visibility: hidden }
div#print_logo img { display: none }
@media print {
div#print_logo { position: absolute }
div#print_logo img { width: auto; height: auto }

In non-CSS browsers and in any medium other than print, the image will not be downloaded. The founding date will be visible to non-CSS browsers, but it will coincide with other location and contact information at the bottom of the page, and not seem terribly out-of place.

Positioning this hidden section in this way allowed me all so to declare it clear: both, in order to stretch the containing div's background to the bottom of both the navigation bar and the main content, regardless of which was longer.

Browse Happy

Regardless of web browser, the site should appear as intended, with one exception: IE 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 Mac OS 9 and cannot use a modern browser (my mother included), I recommend Netscape 7.02 or Opera 6.03—they are the only way you are going to get a decent web experience.

Sounds complex! What about the time?

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 BBEdit and some of its Great Grep Flavor™, I quickly ripped out all of the extra comments, whitespace and unnecessary characters, creating optimized versions for download, shaving an extra 4Kb off of the already small files which, even on a 56Kbps 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.

1Although the iPAQ is the best example for this article, Hewlett Packard has recently made some despicable decisions regarding its hardware products and, although I one several pieces of HP hardware, refuse to recommend the product or even link to its web site.