The site uses an unprescedented amount of javascript. As I’ve come to realize, javascript is not the devil’s plaything. So long as you make it unobtrusive and degrade gracefully, javascript is a very robust programming language. You’ll note the scripts creating the pull-down navigation bar and the Scalable Inman Flash Replacement (sIFR—a.k.a. pretty fonts). Look to see more javascript coming through RyanCannon.com in the future; I’m working on a javascript implementation of Web Forms 2.0 amongst my other (read hundreds of) projects.

The reason this site performs so poorly in Internet Explorer is that it relies largely on transparent PNGs, something that IE does not play nicely with, although their developers have promised to do so in the next version. This puts them only three or four years behind the game, but what else can you expect from a monopoly?

If you are stuck without being able to see the new design, don’t panic: there’s still more for you after my reboot. Choose the academic theme to see the new design ported over from my undergraduate portfolio. All this with nary a change to my semantic markup. Isn’t CSS amazing?

Text-shadows for Safari

Although dropped for the revisions of CSS 2, I think the text-shadow property looks very good, and would like to see other browsers implement it. The addition of shadows adds to the blurry nature of the layout.

While only a fraction of our viewers will get that bonus, every little detail counts.

Hand made iconography

Thanks to some advice from Dan Cederholm’s site, I was able to hand-craft some icons. You may recognize some of my icons as inspired by common web images, but unlike Dan, I like my icons to be vector-based, so I can scale them easily. By the way, for web designers, I highly recommend his book.

Really nifty button-pushing

Dreamhost, my web hosting company demonstrated why they are the best for this project. Their form mail application allowed me to let our readers send email to authors without having to worry about having their email addresses harvested by spambots. Their One-Click Installs would allow a monkey to implement a WordPress blog (live, but unblogged). And, once we get a little bit more ambitious, we already have a live QuickTime Streaming Server, ready to send you, fair reader, some lovely tunes you might not be able to get otherwise.

The site still has some kinks to work out, but all told, Blur Zine is an exciting venture.

This blog should have run on 15 April 2005. Unfortunately, a nasty case of forget-to-save-and-crash took down a two-hour write up. My apologies.

• 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.

By Switching to G.C.F., you can test drive this experimental stylesheet. Unlike my other looks, G.C.F. offers a flexible layout: all of the widths on the page are a percentage of the window width, neither viewers with small or large windows will be given short-shrift; even the photographs tile appropriately for very large monitors.

My favorite facet of this look is unfortunately not supported in Internet Explorer, but in any other web browser, however, all of the background images align together, forming a cohesive photo across the page. Also, as this page scrolls, the background images stay in place, keeping that picture intact.

Compared to “Wolves & Tigers,≵ this look is currently feature-bare. I look to fleshing out some detail in the future.

All of this work is a giving of thanks to my dad and the amazing weekend sleeping under the stars in God’s country.

Similarly, the emerging Alma College site is exploding and close to finish. I’ve enjoyed working on and improving the site—I’ve learned more from this project than my self-guided study over the past few years. It makes me think more excitedly about a future in the industry.