Designing blogs for readers - Matt Gemmell

I’ve been blogging for almost eleven years, and I’ve been writing at this domain for almost nine. In that time, I’ve used several different blogging platforms (blosxom, b2, one I made myself called Thistle, WordPress, and now Octopress), and I’ve redesigned my blog about once every couple of years.

I recently redesigned this blog once again, and as I did so, I thought about how my perception of blogs in general has changed over the past decade.

In my first few years of blogging, I tended to use every possible widget and feature. For Thistle, I implemented all kinds of things: a comments system, categories, dated archives, themes, support for multiple authors, ‘sticky’ (pinned to the top) posts, various syndication formats, and much more.

I had sidebars packed with clutter. Twitter and Facebook didn’t exist yet, so there were no tweet-streams or follow buttons, but I certainly had lists of recent posts, popular posts, and my own favourite posts. I had drop-down category lists (with counters, and category-specific feeds), trackbacks and pingbacks, and buttons to message me on AIM or ICQ.

I had calendar widgets that indicated which days I’d blogged on. I had “Log in” links for the admin area. I had a theme-chooser (for the visitor to use) at one point. I’m reasonably sure I had left and right sidebars for a while. My footers, to my lasting shame, even had some faint grey text indicating how long it had taken to generate the page.

Fast forward to today, and my past self would be perturbed by this blog’s current design. He’d probably ask if the CSS was broken, like the smart-arse that he was. My tastes have changed considerably since I saw fit (around 2003-2004) to head my blog with a desaturated photo of myself holding a katana – but even then I’d already removed most of the unnecessary functionality.

I realised that I’d been focusing on my own obsession with what was possible, rather than what’s actually useful for the reader. A year and a half ago, after much soul-searching, I made the jump from dynamic to static blogging, and kept the default Octopress theme with only minor tweaks.

Better, but still with a noticeable pane of actual content, framed on two sides by cruft. The line-length was also excessive, making it tiring (for me) to read. The current appearance, however, comes a lot closer to the essence of what I want. It looks like this:

I was talking to my friend Evgenia about blogs recently (do say hello, and encourage her to start her own – she’s thinking of doing so), and at this point I should restate something I told her: I think that blogs are for their authors first, and their readership second.

I don’t think there’s any reasonable way, or any need, to separate vanity and ego from a personal blog. Writing is inherently about its author, and is a product of their personality and opinions – that’s not something to be shy about, and we shouldn’t try to change it either. So, write for yourself – and hold yourself to an appropriate standard, because you’d better believe that others are judging the person as well as the piece – but as soon as you publish your views, you’re inviting readers to take a look. I think that the needs of the reader and the author are more aligned than many blogging systems seem to believe.

Having had a decade to think about it, I want to share my views on what I think you do and don’t need on a blog today. Your needs may be different, but perhaps you’ll find something to think about. I bet you could simplify your blog in some way without detracting from the reading experience.

One brief note before we begin, courtesy of my wife. It’s easy enough to test your assumptions about what’s being clicked on your site, using appropriate analytics. If you’re using Google Analytics, for example, you may find its In-Page Analytics display (in the Content section) very useful.

Don’t let the data stop you making a design decision, but do check your assumptions against actual behaviour. You can even use Analytics to do A/B testing, if you’re really into your metrics.

With that said, here’s a breakdown of what I feel is important for a modern blog.

Readability

There’s no higher priority than readable text, and yet bizarrely I still regularly find blogs with tiny fonts, long lines, tight spacing, background textures, or inverted colour schemes. Don’t do that. Your words are worth reading, so present them with due care.

• Make text sufficiently large. Default blog themes are getting a little better at this, but I still think that most have text that’s much too small for the layout.
• Never break text- or content-zooming.
• Aim for a line-length of between 2 and 3 alphabets. That means you should be able to fit the entire alphabet at least twice, but no more than three times, on a single line in your layout.
• Use an appropriate line-spacing; probably in the 50-70% range. That means that the empty space between lines should be about half the height of a line of text, or a bit more.
• Try to go with dark text on a plain light background. If you do, respect the user’s text-selection colour. Otherwise, choose a suitable selection colour to provide contrast without excessive saturation.
• If you soften your text colour (from black to grey, for example), only do so very slightly.
• Focus on the content. Ruthlessly minimise any meta-elements at the top of an article. People don’t want to interact with those; they want to read what you’ve written.
• If you run ads, keep them outside of the content area, without exception.

Hypertext etiquette

There are some areas where it’s OK to be clever, but the basic tenets of hypertext should be left alone. Sites with links that are almost indistinguishable from surrounding text just make me shake my head. It’s antisocial.

• Links should be obvious. Personally, I still firmly believe in underlined hyperlinks (in body copy; I make an exception for headings), in a distinct colour. Blue is a great choice. Make the underlines solid. Don’t use underlines for anything else, either (never for emphasis).
• Make a clear distinction between visited and unvisited links. Visited links should still be as distinct from the surrounding text as unvisited ones too.
• Don’t make links that open new windows or tabs; it’s grossly hostile to the reader. The only (possible) exception is for one-shot, brief off-site interactions, like social intents. That’s a possible exception.
• Don’t ever break the back-button. Don’t even touch the functionality. It’s not yours to play with.

Responsiveness

Don’t have a separate mobile site. Definitely don’t just ignore mobile devices. Design your site so it’ll look good on at least:

• Large screens like desktop monitors or laptops.
• Tablet devices, in both orientations.
• Phones, in both orientations.

Your site should reflow and restyle itself gracefully to suit the screen’s dimensions. These days, you can do it all in pure CSS using media queries. Consider interaction methods, too: hover doesn’t really work on touch-screens, for example.

It’s fine to take a principled stand on browser support (it’s your blog). It’s also easy to get some actual data, to help you decide what to test on. I have a very Apple-skewed readership, for example, so these are my test priorities, in order:

Yours will probably be a bit different, particularly regarding the importance of IE.

Utility for the reader

I’ve found that there are very few essential features for a blog, except displaying its content effectively. You probably don’t need much more than these.

• A search field. By all means bounce to a search engine, but do have a visible search feature. As your readership builds, people will want to cite or revisit pieces they remember reading, and their first port of call will be at your site.
• A feed that’s auto-discoverable via the appropriate link tag.
• A favicon, for convenience in feed-readers. People will complain otherwise.

As a courtesy, and as common sense, you’ll probably want to include some contact information too.

SEO considerations

The best way to optimise your site for search engines is to keep writing, and don’t try to trick the system, but there are a few practical considerations you’ll want to take note of too.

• Ensure your article permalinks are stable, and don’t (visibly) use query-strings.
• Ensure your permalinks contain the titles of their articles.
• Provide per-article descriptions (summaries).
• Have an archive page, to ensure that all past articles are reachable (and crawlable) within a link or two of your homepage.
• I’ve found it advantageous to provide authorship information linked to a Google account.

Optional functionality

There are only two optional features I could think of, and they’re both conveniences for the reader. Not everyone will make use of them, and they do incur a design cost on the page, so keep them in your article-footer if you do choose to include them.

• Social sharing. The reality is that people will want to share your articles at some point, so you might as well make it easy to benefit from the free marketing. You’re writing to be read, after all.
• Category indices (even virtual ones that just perform a search), if you use categories. It’s a poor-man’s “related posts” feature, and it’s more than adequate.

Regarding categories, I have some advice: specify either one (ideally), or two (at most) categories per article. Choose the most relevant ones. It’ll have the side-effect of automatically trimming down your category list, and helping you determine what your recurring topics are. Resist all temptations to file a piece in any more than two categories.

For any greater granularity of metadata, trust the content and the search engines’ indexing. If you choose to use keywords, don’t list them on the page itself for the user (using metadata is fine; your article summary should be there too).

I recently added one other piece of optional functionality, which I’m still experimenting with: author marks.

Elements to remove

Finally, here are some of the elements I’ve used and then later removed over the years. Every one was difficult to let go of, but I’ve missed none of them.

• Comments. You almost certainly don’t need them. I used to routinely get dozens or even hundreds of genuine comments per article, and I felt that they took away some of my control of my own writing. Let people use their own blogs or social media to respond – you can still read them en masse if you wish. For example, any tweets regarding this article will be collected here.
• Date-based index pages. People won’t use these. Nobody arrives at a blog wondering what you wrote on a specific date. The presence of seemingly-duplicate extracts on multiple index pages (for example, your category indices and also on date indices) creates a lot of noise in your site’s search results too.
• A feed button. By all means have a feed, but acknowledge that it’s for a tiny (and fairly technical) minority. Auto-discovery is enough. For mobile devices (where it’s often harder to copy a page’s URL), there may be some benefit to having an explicit link – but keep it in the footer.
• Header cruft, such as social media links. Trim your header mercilessly. Even mine probably still has too many links.
• Background textures or colours. The design should serve the text. Text should never be made to conform to a design for any purpose other than legibility, on a personal blog.
• A sidebar. This is the meta-element of useless cruft. Everything in your sidebar that you think you need can be either moved or deleted. A sidebar is a blog’s junk drawer. If you really must have an agglomeration of heterogeneous clutter, put it in your footer instead.
• Social media timelines. If people like your writing, they’ll follow you (or will actually reach your blog via social media). You don’t need tweets embedded on your blog. Also, a person’s aggregated tweets look strange in isolation.
• Your github repositories, instagrams, and so forth. I can see the case for advertising your products, but keep the projects, photos, profiles and such on your About page, or as links in your footer.
• Recent posts. Your main page presumably shows extracts of your most recent posts, perhaps with pagination. That’s all you need. People will read for interest. For most of your readers over time, your recent posts are old news.
• Popular posts. Let the reader decide what they like. If you wish to suggest some of your own favourite posts, do it from your About page, so it’s optional. Lists of post-titles are dense and distracting, so keep them hidden away.

Towards more readable blogs

I’ve spent inordinate amounts of time writing for the web; a third of my life, in fact. For most of that time, I somehow neglected to consider that perhaps my own preferences and behaviours as a reader might also apply to those who read my output.

When I visit a new blog, as I do several times each day, my first assessment is whether the content is obscured by the design. I’ll rarely consider whether the design enhances the content. I’m visiting for a purpose, and the purpose is to read.

There are lots of popular writers whose blogs I read every day, and whose writing I admire, that break several of the guidelines I’ve listed. Just off the top of my head, I can easily list Marco (he has date archives), John (sidebar), Shawn (sidebar), Matt (line length), Craig (line length) and Jim (comments). I wanted to mention Ben too, but he pretty much nails my list.

It’s easy to see that all of those blogs do follow the same ethos, though – considered words, respectfully presented.1 Tastes differ, but good taste permeates.

If you write online, make sure that your blog serves your readers’ needs as well as yours, and lends appropriate weight to your well-chosen words.