As part of our business blogging services, while we often work with an existing blog, we occasionally design and develop blogs from the ground up.

Throughout the business blog’s design, there are various points that need to be catered for and here we have professional WordPress designer Luke Burford provide an insight into the five key points of any successful business blog design.

So you’ve created fantastic content, optimised for search, spread the word via social media and are starting to see some serious traffic. And yet your blog in not producing the goods in terms of generating discussion via comments, driving conversions or enhancing your position as a thought leader in your field.

Chances are your blog design could be improved. Valuable content will always be your greatest asset, but don’t underestimate the psychological effects of presentation. Let’s look at a few ways good design can help you make the most of your business blog.

1.  Legibility

The web is typified by short bursts of text and calls to action. Blog posts are your chance to get more in depth on a subject, and consequently they’ll likely be longer chunks of text.

Would you read to the end of a long blog post of tightly packed, long sentences? Probably not. Text, especially on screen, becomes hard to read and induces eye strain when it is comprised of long sentences of dense word blocks.

Font size and line height are the key here.

First: font size. Most web browsers have a default of 16 pixels for font size, but web designers have generally designed with font sizes between 10 pixels (far too small to be truly legible) to 14 or 15 pixels. There are lots of reasons for this, but in a vast majority of cases, web type is simply too small.

You should look to a range of 45-70 characters in a paragraph as that’s what the eye can comfortably scan online, on an average desktop display. Consider bumping your font-size up if it’s in the 10-13px range.

Second: line height. This refers to the amount of space between sentences of a text block (equivalent to ‘leading’ in the print world). Aim for a number at least 1.5 times the font size. You’ll find it gives text a surprising amount more room to ‘breathe’, and in combination with a good font-size, makes your posts much easier to read to the end.

Example: http://maxvoltar.com

2.  Font selection

Until recently, font choice was quite limited on the web – designers could only rely on old staples such as Georgia, Times and Arial / Helvetica being available on the user’s machine (along with Comic Sans, but we won’t go there).

Services such as Typekit and Fontdeck have broadened the typographical horizon massively.

Although your choice of font(s) should absolutely be consistent across your whole site, and may be dictated by other branding considerations, it’s worth mentioning the possibilities opened up by these new services for adding a little more character to your posts.

Example: http://www.getfinch.com/2012/01/what-will-our-future-interfaces-feel-like/

3.  Imagery

Compelling imagery can be a great way to hook your reader in. Chances are, many of you are using WordPress to blog. A great feature of WordPress is the Featured Image panel within the post editor screen (not available on all themes – ask your developer!). It’s a very easy way of adding an image that acts as a thumbnail on blog ‘index’ pages, but can be used also as a ‘banner image’ of your post.

Be original. We’ve all seen the ‘businessman with a digital globe in his hands’ a billion times. Conversely, nobody wants to see happy snaps of your dog / cat / lizard. But something unexpected can grab the eye, as long as there is a conceptual link to the subject of your post.

Example: http://www.los-list.com/blog

4.  Break up the copy

Pullquotes, images and even decorative borders on sections can make long form reading on the web a lot easier to deal with.

A pullquote will commonly be larger type and have some kind of border to differentiate it from the main copy. Again, if you are using WordPress, your theme may have shortcodes built in to make a pullquote really pop from the page. If your theme does not provide shortcodes, there are shortcode packages available that are easy to drop into your theme.

Example: http://www.smileycat.com/design_elements/pull_quotes/

5.  Comments

Once again, it’s quite likely you’re using WordPress or a similar blogging platform, and you want to generate comments.

Although it may in some ways look ‘neater’ to have comment input boxes floating to the right of their label, studies have actually shown better completion rates when form fields are shown *under* the labels that apply.

Example:  See the ever excellent CSS Tricks for more info on this.

Luke Burford is a WordPress designer at Lunamedia.

Share and Enjoy:
  • Twitter
  • Facebook
  • LinkedIn
  • Digg
  • StumbleUpon
  • del.icio.us
  • email
  • Print
  • Add to favorites