Supporter: Paul Souders

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.

Read more ▸

Last week I spoke about Haiti with 2nd through 5th graders at Willamette Primary School in West Linn, Oregon. We had a great discussion about Haiti's unique historical situation, the role poverty and governance play in disaster relief, and the relief to development cycle. These are complicated themes we talk about a lot here at Mercy Corps, and we tend to kind of take them for granted. It was a fun — and challenging — endeavor to distill these tricky subjects into a 45 minute curriculum for eight-year-olds.

Moreover, I'm no educator. I spend most of my day staring at a computer monitor, and when I do give the rare presentation, it's always to a room full of grownups; so I wondered if my usual strategies would work for kids. Lucky for me, my "usual strategies" are kind of loose-limbed. My only preparation is to know what I'm talking about, and to make about a dozen slides with (mostly) pictures, and a few lines of text. I always have an agenda but never an outline or notes.

Text on slides is intended to reinforce the agenda: usually ideas I want everyone to hold onto. Photos are props for discussion, e.g. "tell me what these people are doing" or "how are these two photos different?"

So by design I gave a slightly different talk to each class, one that evolved organically around questions kids asked, or themes we pursued collectively. Afterward, I wrote up my experience as "speaker's notes."

My presentation is embedded on this web page, and is publicly available on Google Docs (You can view my notes in the by opening the presentation in another window and choosing Actions > Speaker's notes.

If you're an educator (or just need to explain Haiti, development, global poverty, and Mercy Corps to someone in under 45 minutes!), you're welcome to use this presentation. And if you have feedback or suggestions for improvement, please leave a comment below.

Read more ▸

Via their blog, my colleagues Nick MacDonald and Anna Young note an interesting study:

Traffic accidents in the developing world kill as many people each year as malaria and cause twice as many deaths as war and other violence combined. James Habyarimana and William Jack tried a novel approach to reduce this deadly toll in an experiment in Kenya. They posted signs in a random sample of 1,000 minibuses encouraging passengers to speak up and criticize reckless driving. The result: insurance claims for the sample fell by as much as two-thirds, and claims involving injury or death fell by one-half.

I noticed a little synchronicity between this study and a recent one I saw about Portland, Oregon, Mercy Corps’ hometown. The Portland Bureau of Transportation (PBOT) notes that in 2008 Portland had the lowest number of traffic fatalities since 1925 — part of a twenty-plus year trend in declining traffic fatalities. The improvement in traffic deaths in Portland is due to very different factors than in Kenya (PBOT cites programs that encourage walking and cycling). But I’m struck by three truths that sometimes escape our notice:

Some problems truly are global.

Every year, more than a million people die in automobile collisions, and as many as 24 million are injured. In the U.S., traffic fatalities number about 37 thousand.

The solutions might not be quite as universal.

For countries like Kenya, limited infrastructure and driver education contribute most to the rate of traffic accidents. Reducing traffic accidents in these places requires improving roads and signage, and promoting comprehensive driver’s education and testing.

Wealthy countries like the U.S. are victims of their own success: roads and cars are so safe that few people transport themselves by any other means. On the one hand, more road miles mean more traffic deaths, simply as a statistical artifact. But our roads lack natural speed and attention controls present in places like Nairobi: pedestrians, cyclists, mopeds, tractors, beasts of burden. Portland is finding that by encouraging some of these traditional means of transportation has a positive side effect for motorists: it encourages us to drive safer.

Sometimes the big problems are the mundane ones.

Every other year or so, we whip ourselves into a small panic over new and exotic ways to die: SARS, Avian Flu, Swine Flu. Spectacular deaths like shark attacks grab headlines. Violent conflicts and natural disasters attract our attention. But the real work of making life better for millions of people is strikingly mundane: clean water, civil society, economic development. Maintaining this boring stuff makes life better for millions of people. Selling these ideas to our donors is like selling vegetables: everyone knows they’re good for you but no one eats enough of them. Our donors’ responses to emergencies are inspiring and heartwarming, but the hard work of making the world better is like eating your vegetables: it happens every day and with little glory.

Read more ▸

In a recent New Yorker article, Malcolm Gladwell wonders why more basketball teams don’t employ a full-court press. Instead of dropping back to your own net and defending, you press the other guys on the inbounds pass and at the mid-court line. You don’t defend 30 percent of the court (inside the 3 point line), you defend the entire court. This surprising strategy gives underdogs a fighting chance: it keeps the stronger team always on the defensive, and makes greater virtues of speed and endurance (as opposed to ball-handling and shooting). Gladwell’s article has sparked a little interest among webheads, like Martin Kelley of O’Reilly Media, who sees the web enabling a sea change in marketing and communications:

“Traditional marketing campaigns are batch: we plan out a commercial, pick its theme, hire directors, do audience testing and months later air it on broadcast television. Even low-budget nonprofits operate this way: they create a schedule of newsletters to distribute by postal or electronic mail, with carefully constructed branded templates and standardized lengths and formatting ... Many of the most adept citizens of the new web culture don’t sit down to write pre-planned blog posts. Twitter has taught us to capture the moment, to express the thought now and just move on. ... Most of the ubiquitous ‘how to make money on Twitter’ posts fail to make the difference between real-time and batch processing. If you’re real time, you’re part of a conversation and building a community that might be virtual and asychronous but is authentic in its own way.”

The rise of social networking gives organizations with underdog marketing resources (like, um, certain non-profits) a stellar chance to press the full court. In Ye Olden Days (ca. 2005), marketing was planned around calendars (monthly, quarterly, etc.) or for “windows” like Holiday, Mother’s Day, Back-to-School. But with flexible and rapid media tools like Facebook, Twitter and blogs at our disposal, Mercy Corps can substitute speed and effort for ad buy dollars. My colleague Floyd has already written about how our newish design makes this much, much easier.

But more importantly, these tools allow us to turn a liability into an asset. Mercy Corps’ world doesn’t always obey the calendar. We can’t predict when or where the next cyclone or earthquake will strike. We can’t hope that military conflicts will helpfully schedule themselves between the Dads-and-Grads and Fourth-of-July windows. But each of these events represents a unique moment to communicate, with little filtering, what Mercy Corps is doing. Not some abstract brand promise, or mission statement, but the daily reality of our recipients and fieldworkers: yesterday we delivered aid packages to displaced people in the Mardan and Swabi Districts of Pakistan. And here are the pictures. They might not be the studio-quality portraits the art director I used to be would have chosen for the Memorial Day E-Blast, but they show what is actually happening right now.

I came to Mercy Corps almost two years ago after a decade working in the for-profit sector. I’m a great believer in commerce, but I can’t recall ever getting as worked up about printers or software or t-shirts the way I am about giving blankets to cold children. I have a (perhaps naive) faith: the best way to “sell” Mercy Corps to our constituents (and trust me, non-profits have to make the same marketing and branding and sales decisions as for-profit companies, but with the hitch that we don’t actually deliver products to the people who give us money), is to talk about what Mercy Corps is doing.

Read more ▸