Clarity and Focus in Blog Layouts

Working my way through the process of typesetting my old blog posts for the print-on-demand edition of Thoughtport had one unforeseen outcome. I began to appreciate the simplicity and clarity of seeing my words typeset on a clear white page without any digital clutter surrounding them.

When I returned to writing on the Blogger platform, I found the online presentation of my content too busy and distracting. Up to then, I had always used some variant of the conventional two-column blog layout. This was a primary column containing the posts with a sidebar column of ancillary information, navigation, and outbound links. I adopted that fundamental layout structure on the first day of this site. Over the years I had updated and adjusted the types of content displayed in both the sidebar, and in what became a deep footer. But I had never taken a top level review of what I should include and what I should remove. Were the sidebar functions in any way helpful, or were they distracting from my primary content?

I read all my blog subscriptions within the Reeder RSS aggregator app. This imposes one standard visual treatment on to all blogs. So I had become unfamiliar with the design layout of the HTML versions of the blogs I read regularly. I did some ad-hoc research to see what was working well.

Gemmell follows his own design principles in the layout of his blog.

Jeffery Zeldman’s layout seems perfectly optimised for reading on a tablet.

Although John Gruber still uses a sidebar.

Having decided to simplify the design of my blog to deliver some of the positive features I observed in the clarity of my book layout, I was fortunate to then read this wonderful post by Matt Gemmell: ‘Designing blogs for readers.’ (I recommend you read his whole article.) He advocates a merciless editing of blog layouts to focus on legibility and content.  I found that, whether consciously or otherwise, many of the writers I admire had adopted many of his recommendations in the presentation of their material. Gemmell’s arguments convinced me to go much much farther in redesigning this site than I had considered. These images of my previous blog layouts illustrate how much I have changed this site’s design over time.

How this blog looked way way back in 2006. Jiminiy!

Still very busy in 2010 presenting too many distracting links.

This was the last layout I used before introducing the new clarified treatment.

In the end, I removed everything from both the secondary sidebar and the deep footer this time. I changed the harsh white background to a soft creamy white and replaced all of the san-serif typefaces with a serif faces typeset at a larger size. One significant outcome of this new design is that this site is now far more tablet-friendly.

The new reconsidered layout brings my content to the fore and optimises for attentive reading. By reducing distractions and providing some necessary stillness, I hope that I have improved your engagement with my writing.

Quite meta I know, but here is a screen-shot of this post in the new layout.