simonlife

Early in September, I volunteered to re-design the Cornell Symphony Orchestra (CSO) website, and now, two months later, the makeover is finally complete. Or almost complete. There’s still a ton of content to add, and I’m afraid it’s the kind of content that is the most difficult to integrate from a design perspective: pictures and other multimedia.

This is a screenshot of the old design, which I didn’t actually find to be that ugly compared to some of the really shoddy jobs I’ve seen. At least it had a clear header and a standard two-column layout for content and navigational elements. Ultimately, it mostly suffered from cumbersome overall navigation and some pretty wild markup. I thought it was kind of funny that each page had an XHTML 1.0-compliance button at the bottom, when in fact the W3C validator thought otherwise. Nothing against the original designer of course; I’ve committed my own share of markup missteps before.

High Contrast Design

The first thing anyone will notice about this design is its use of a predominantly dark background. In fact, not only is it dark, it is downright black. Black with mostly white (hexadecimal #c0c0c0) text. The concerns regarding dark backgrounds are well documented, and so I went into this design process knowing I’d be treading on thin ice, so to speak. In particular, viewing a site with a black background on a laptop with a slightly dusty display and extreme sunlight interference is quite a strain on the eyes. While my design is perfectly readable in most conditions, the truth of the matter is that the text will never be as readable as dark text on a light background.

This is a sacrifice I made consciously; I wanted a more “artsy” aesthetic for the website, removed from the academic rigidity of most .edu websites. Such an aesthetic can be achieved with a lighter background for sure, but as I worked, I grew more and more attached to the way the blackness gave the impression of emptiness and open space.

In the future, I may provide the option to use an alternate stylesheet with an increased text size.

Abandoning 800×600

I gave up on supporting the 800×600 desktop resolution. I realize some people are still using low resolution displays, but it didn’t seem practical to support such a small and confining screen width when it is so poorly represented in the user-base. This is, of course, an assumption that most of the people viewing the website are students, faculty, alumni, and members of the Ithaca community with computers (or displays) no more than five years old.

Return of the Tables

Until charged with designing this site, I hadn’t coded an HTML table in at least a few years. My personal homepage certainly doesn’t have any kind of tabular data. With content consisting of member lists, schedules, and calendar events though, it was unavoidable that I would have to remind myself about how to style a table. As it turns out, with the caption and thead elements, HTML tables are quite a powerful construct for stylizing tabular data.