The Washington Post iPhone app is wrong

Every designer has been there. You design a site, mockups are delivered, the site is coded, implemented into a content management system, then launched with fanfare and acclaim. Woohoo!

Months later, you revisit the site to see how it’s progressed, and it’s broken. Images aren’t cropped correctly, titles are longer than anticipated and are wrapping, and other weirdness. It’s frustrating. So I want to vent. I don’t have anything to do with this example past being an avid user, and passionate about design.

First, you need to know:

1. Spacing between lines of text is called line height, or leading. It should be used to visually separate text so that it is readable, and through the visual cues of spacing, establish relationships between blocks of text.

Here’s a side by side of boutique DC design firm nclud‘s mockup looks like (left), and the current Washington Post iPhone app (right):

Sure, the app has a lot of changes. Client work goes like that, things get massaged into needs from different decision makers. While I think the mockup is wonderful, and provides a better experience, this is what really irks me:

The red line indicates spacing between title and a short description, while the blue line indicates line height on those singular items. The line height makes for a much nicer, clearer experience on the original, but the live version is all screwed up. It’s all I can see.

Let’s be clear, this is a really useful and good application. It was clearly designed by people who know what they’re doing, and is managed and updated by people who are undoubtedly passionate about it. But please, make it pretty again.