We’ve returned from the west coast and finished this site’s redesign. Reload as needed. In some browsers you may want to refresh the style sheet as well.
This is our third redesign in 12 months. There’s something New Coke about toying so wantonly with an old brand, but this site is not only our podium, it’s also our workshop — a place to test new methods while no meter is running and mistakes are penalty-free.
We created the previous layout while writing Designing With Web Standards, conceiving it as a rough exercise in CSS design and semantic markup. As our book went to press, we continued to massage the layout, eventually developing the pale-on-pale, bleached-out look of late 2003.
We thought it would be fun to see how little foreground/ background contrast we could get away with, mainly because nobody ever does that. Having achieved it and lived with it, we understand why nobody ever does it. The one thing we liked was all the white space. We decided our next design would be equally liberal with white space, but break it up more intelligently.
Our goal for this third redesign of 2003 was to achieve a sharper, crisper, cleaner layout with strong contrast, a more nuanced interface, and the visual interest of portrait photography and (especially) real typography. We might clean up a few details in the coming weeks, and we might steal or write an image-switching program to add variety to the front page, but basically, we’re there.
Before last night, primary navigation was useless in IE5/Mac and unwarrantably “sticky” in Safari. Reader Erik Porter, who modestly asked that we not link to his site, suggested a slight change. Our primary “nav bar” is an unordered list, with background images applied to floated list items. We initially set height and width on the #menu li element and instructed links (#menu li a) to display block at 100% of that height and width. Following Erik’s hint, we removed explicit height and width declarations from the list items, and set them only on the links themselves. That fixed everything.
One subtle bug remains: in Opera 6, a vertical gap of a few pixels comes between the bottom of the header graphic “banner” and the top of the “nav bar.” We considered using the Owen Hack to feed a false positioning value to Opera 6 and no other browser, but decided it was not worth the bother on a non-commercial site read by web designers, developers, and managers — who, if they use Opera, are savvy enough to upgrade.
Keep watching the skies.