We've tidied up the website

Before and after images of the newly refreshed website

It's been not quite a year since we redesigned MercyCorps.org using Drupal. I've been watching the new design in action for the last 11 months. I noticed a few places where the new design wasn't quite performing the way I had hoped. So I've spent the last month or so refactoring the design using two new design principles. (Well, they were new to me).

First, I developed a new geometry for the site structure based on the 960 grid system. (Thus, this little project came to be called "the 960 project" here in the Web Cave.) Simply put, I changed the width of the site from about 994 pixels to 960 pixels. 960 is one of those magic numbers that's easily divisible by lots of numbers — so it's easy to break the site up into two or three or four (or, theoretically, twelve or twenty-four) columns. This saves us a lot of trouble calculating the widths of columns and fudging the width of the last column by a pixel or two get everything nicely aligned.

Since I was already mucking around in the HTML and PHP, I decided to go full-tilt and clean up the stylesheets that govern the look and feel of the website. I did this more-or-less according to principles of object-oriented CSS. This concept is a little more abstract and harder to explain — and really new to me. To generalize, I use some style selectors (usually classes) to tell me what a thing looks like (its color, font size, margins); other styles (generally IDs) that tell me how it behaves in the layout (its width, height, text wrap, etc). I reserve special style selectors (usually default HTML tags) to tell me what a thing is (its semantics: is it a paragraph, a subheading, a list item?). I try really hard not to mix too much appearance into layout or semantics, and I try not to make cosmetic selectors carry semantic water.

Refactoring the stylesheets had a curious side effect: it became very easy to enforce design discipline. My first step was to define the cosmetic and layout selectors, so when it came time to clean up the HTML, I could just mix and match those classes into the HTML to achieve a desired effect, usually without having to write a special custom selector. It was like: for a decade building websites had been a little bit like pottery, where each new effect or style required throwing a bunch of wet clay onto the wheel, and thinking it from the ground up. But now it's as if I'm working with a box full of several standard-size Legos that I can mix and match. This might seem like it's constraining, but it's turning out to be surprisingly liberating. I can easily experiment with an element's appearance in the Drupal template, just by adding or changing classes.

These two processes — transitioning to the new layout grid, and cleaning up the styles — has created kind of mini-redesign. The new(ish) Mercy Corps website features:

• A standard color palette. We previously had almost 20 kinds of "brown" — where we only really needed six.
• A brighter palette and cleaner pages. Because pages are more efficiently organized, I didn't need a lot of lines and background colors (all brown, apparently) to divide up the content.
• Larger fonts and more whitespace.
• Larger photos.
• And yet, improbably, most pages aren't any longer, despiting being fit into a slightly narrower (by 34 pixels) frame.

Finally, I hope all these changes — subtle though they may be — improve the user experience. We have a lot of great content on our site, almost every piece of it connected to something else. I feared our website was underselling those connections by pushing them out to the margins of the page. I hope those connections bubble up, keeping you engaged with us.

I've also made public the small (and rough) Google presentation I used to sell the 960 project to my colleagues. It explains the deficiencies of the old design in greater detail, and includes some conceptual diagrams of the 960 layout.