This spring, the Orton Family Foundation decided to have us revise the site, to help address some functional concerns, adapt to feedback from users, and refresh the look and feel. (Under-the-hood, we also migrated from Zope to Pylons). A key part of the aesthetic for the new design was really pushing the book metaphor as much as possible. I wanted to share a couple of peeks into how we incorporated that mandate into the new design. (For another take on this project, check out this writeup).

For most pages, we ended up going with a very literal book metaphor:

For comparison, I’ve taken a shot of the original version.

We had a hard time making the homepage fit the open-book design, and ultimately opted for a very different layout:

The book metaphor carries over to the “stack” of almanacs, which are displayed edgewise. (For the sake of thoroughness, I’ve also posted the previous Community Almanac homepage).

Fun with Error Pages

Some of the most fun aspects of this project involved finding small ways to reinforce the book metaphor without being totally over the top, or working against the needs of an online application. Two of the pieces I’m particularly happy with are the error pages.

For the 404 (Not Found) page, we kicked around a couple of ideas, before hitting upon the idea of using the book image but with several pages torn out:

Once we’d come up with the design for the 404 page, the 500 (application error) page was a no-brainer:

Error pages in general don’t get a lot of design thought or attention, and these are probably the best error pages of any website I’ve gotten to work on. That’s not to say they’re the only interesting or cool element we’ve added to this relaunch – for bonus points, once the site launches this week, check out what happens when you turn the page.

In themselves, pieces like these are fairly minor. But nailing the details can help a good design become really great. We may not have been able to add every cool idea in this iteration, but I’m pretty proud of the work our team has done, and am excited to see it go live this week.

­Problem Summary

An element needs to support partial transparency – either an img tag, or an element with the background-image property set via CSS.

Use When

The page still needs to support IE6, and has elements which should be transparent.

Solution

Use CSS transparency, with appropriate selectors.

Example

CSS

* html .pngfix {
zoom: 1;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1 ? (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif") : (this.origBg = this.origBg ? this.origBg : this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='" + (this.currentStyle.backgroundRepeat=='no-repeat' ? 'crop' : 'scale') +"')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Note: this method is adapted from the approach documented at http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/. It improves upon it by using zoom to trigger HasLayout in IE6, rather than relying on position: relative.

You can either add the “pngfix” class to all elements which need to support transparency, or add selectors in your CSS file to target your desired elements. Prefixing the selectors with * html ensures that only IE6 will process the rule, preventing more-capable browsers from trying to parse IE AlphaImageLoader idiosyncrasies.

Limitations

This approach will not support repeated background-images – Internet Explorer will stretch the background image to fit. This can still be useful if your background is a solid color and you’re just using transparency for an overlay effect. It will also still be suitable if your background-image is full-width and has no vertical variation (for example, if you’re using a background image to fake columns).

Due to limitations with the AlphaImageLoader functionality, this approach will not work at all for elements which need to have the background image positioned. If that’s behavior you need (and you have to support transparency for IE6), you should consider adding an extra element and positioning that instead.

Problem Summary

An element needs to be expanded to contain all child elements, one or more of which may be floated (and thus removed from the normal document flow). ­

Use When

The page contains floated elements w­hich should not extend beyond their parent element.

Solution

Use self-clearing floats.

Rationale

While the “use a float to contain a float” approach will ensure that all elements are appropriately contained, it can trigger other renderbugs which this approach avoids.

Example

CSS

.selfclear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.selfclear {
display: inline-block; /* IE 7 */
}

.selfclear {
display: block;
}

* html .selfclear {
height: 1px; /* IE < 7 */
}

Note: this method builds upon the approach documented at http://positioniseverything.net/easyclearing.html.