It might come as a surprise, but I don’t read a lot of design blogs. In fact, the one site I visit most is Daring Fireball, a blog devoted primarily to the discussion of Apple (with a side helping of Stanley Kubrick trivia). His ability to piece together stories and articles is always enjoyable, and though he tends to keep his posts relatively short his more verbose posts are always insightful and cut through the bullshit. That all said there’s one big problem I have with Daring Fireball: it’s not responsive.
In 2014, responsive design seems like a must. Gruber himself states that 41.62% of his traffic comes from iOS yet he has no tablet or mobile optimized views for his site. For a site that talks a lot about technology and the web, doesn’t this seem obvious like an obvious move? So I decided to pull a “no one asked you to” redesign to see if I could improve the reading experience of Daring Fireball on tablets and mobile.
Calling this a redesign is a bit disingenuous. I’d say it’s a refinement or a variation on a theme, not quite what most of us think as a redesign. The site as long as I’ve read it has been a solid, dark grey (#4a525a) with a small sidebar and a narrow main column with lots of post in it. It’s so simple in fact that it started to become daunting. How do you better something so minimal?
The largest change was adding a new font to the mix, namely Helvetica Neue. The site currently uses Verdana but I figured with it’s Apple-centric content that it should take a page from Apple’s design book and introduce a cleaner, more contemporary font choice. With that decision made I brought in a hierarchy between titles and content, using thin weight of Helvetica Neue in a larger font size for the titles and a regular weight for the body copy. Style choices like the underline under titles and the left border on blockquotes were kept consistent with the current “vibe” of DF. The page headers were modified slightly with the star, logo (which I did kern slightly wider), and author lockup kept clean and the introduction of a hamburger menu to hide the sidebar.
I think the success of this idea is that it still feels like Daring Fireball but with some practical upgrades. The site works well on desktop (though the fonts are a bit small for my taste) so translating it to tablet and mobile was more about restraint and being honest to a style. Sometimes taking small, meaningful steps can lead you down a more successful path.
For those who curious I’m attaching links to my PSDs for this. There’s a retina version of the iPad and iPhone versions, feel free to dig in and see how OCD I am about my layers.