7 Blog Design Tips from a Content Strategist

Oct 17 2011 by Brad Shorr | 23 Comments

7 Blog Design Tips from a Content Strategist

As a content specialist, I prefer web designs that support content rather than conflict with or ignore it. Web designers should have a real appreciation of content strategybecause it is crucial in launching a successful blog.

For blog design, content issues are particularly important to pay attention to, because, fundamentally, the purpose of a blog is to deliver quality content to a strategically defined audience or community.

For that reason, web design and content must never work at cross-purposes. Here are a few tips for web designers creating weblogs.

1. Design with the Topic, Value Proposition and Audience in Mind

Here are the three main factors that should drive design decisions for a blog:

  • What is the blog about?
  • What is the blog’s unique value?
  • Who is the audience?

Topic: What is the Blog About?

Obviously, a blog about woodworking should look like a blog about woodworking, not like a blog about parenting.

From a design standpoint, this means creating a website header design that clearly conveys the subject matter, and also selecting imagery, fonts and other design elements that have a woodworking feel about them.

We want the woodworking enthusiast to recognize this is a blog designed for him or her — without having to read a single word. Tweaking standard themes usually isn’t enough to accomplish any of this: a blog with a generic feel won’t inspire visitors to explore the content. If a blog has a high bounce rate, consider punching up the design.

Value Proposition: What is the Blog’s Unique Value?

Once the woodworker grasps the blog is about woodworking — the next question is, "Why should I read this particular blog about woodworking?"

Every blog should have a value proposition. In this case, options include tips for woodworking on a budget, tips for the master craftsman, or tips for the beginner.

Again, the blog’s value proposition should be immediately obvious in the header, and brought out in the texture of the entire design. This is a common weakness in blog design. If there is a value proposition in the header or sidebar at all, it is often overwhelmed by other design elements that compete with it for attention rather than draw attention to it.

Audience: Who is the Audience?

How would the design of a woodworking blog differ depending on whether it was geared to master craftsmen or beginners? A dense design packed with links and information would intimidate a beginner, whereas a master might dismiss a design with a grade-school feel. Using a plain, rectangular cutting board as the header image might attract the beginner, but appall the expert.

The point is to make the target visitors immediately feel at home when they land on the blog. Of course, in order to do this, the designer needs a crystal clear understanding of who the audience is, which comes back to content strategy. As a side note, no amount of design wizardry can compensate for a blog lacking in strategic focus.

2. Pay Attention to Details

With all things, the devil is in the details. Even if we get the big things right, users will have a disappointing experience if the little things are executed improperly. Here are a few design details that I hope you will agree are important to get right.

Author Attribution

Nothing is more off-putting than a blog post authored by "Admin." Blogs are a personal medium: names, and sometimes author thumbnails and bios, are crucial to establishing a human connection.

CSS-Tricks displays the author attribution right after the post title.

Internal Search Feature

Users get frustrated if they are looking for something specific and cannot see where to search for it. A surprising number of blogs offer no internal search engine at all, or position it in a place that is harder to find than Atlantis.

Catalyst Studios has its internal search feature at the top-right of the layout, a common location that users look to for search forms.

Blog Excerpt

Most blog themes provide the ability to display short text snippets of posts on the blog’s home page. Snippet length and formatting should be carefully calculated; when this is not done, the blog can look like the visual equivalent of alphabet soup.

N.Design Studio displays blog excerpts on the home page.

I could go on and on in this vein: seemingly minor features such as clickable titles, prominent "read more" links and image size and style consistency can make or break the blog. The main takeaway is that details are important.

3. Don’t Be Too Unorthodox: Follow Blog Design Patterns

Two places where designers should not flex their creative muscles are social buttons and subscriptions. To get users to follow on Twitter, connect on Facebook, tweet and Like posts and subscribe to the blog, the imagery and positioning of these features must be familiar.

Vandelay Design Blog places subscription buttons at the top-right of the blog layout using recognizable icons.

Joining a blogger’s community should be like buying gum at the checkout counter. If users have to exert effort to join your club, conversions are going to be terrible unless your content is irresistible. But even if it is, why make life difficult? I’ve never yet heard anyone say, "I subscribed to this blog because it had a really unusual RSS button."

Social sharing buttons are tricky. If you display buttons for every social network under the sun, you may wind up confusing the visitor. On the other hand, if you only include a few networks, you may sacrifice powerful shares on networks you don’t display.

As a default, my company includes share buttons for Twitter, Facebook and Google+. If we can identify other social networks that have particular strength with a blog’s audience, we will add them as well.

I like to display share buttons at the top and bottom of the post: some people will share just on the strength of the title and never even read the post; others will read the post thoroughly and be inclined to share at the end if they really like it.

The point is this: There are certain blog design patterns that you should be implementing and maintaining on the site’s design.

4. Have the Sidebar on the Right of the Web Layout

A common blog design pattern is having a section for auxiliary content, containing things such as a short description of the blog, a search form, banner ads, a listing of top blog posts and so on. This is typically a column in the web layout and is usually narrower than the main content area column (to denote visual hierarchy). This section is often referred to as a sidebar (infrequently, it’s also called an aside).

Squarespace’s blog positions the sidebar on the right.

Nothing is quite so vexing to me as a blog whose sidebar is on the left. The natural movement of our eyes is from left to right: if we want visitors to read our blog post, we want their eyes to land on it first. This idea is reinforced by usability studies done by renowned usability expert Jakob Nielsen (e.g. Horizontal Attention Leans Left).

Some bloggers opt for the left sidebar on the theory that it will lead to more ad conversions (because ad banners are typically placed in the sidebar). While monetization is a worthy blogging goal, my belief is that on a blog, ad conversions are earned by enthusiasm for a blog’s content rather than mere positioning of an ad. Putting obstacles in the way of content put obstacles in the way of monetization.

5. Image Placement and Selection Need Serious Consideration

One statement with which writers and bloggers violently agree is that images enhance the appeal of a blog. However, where images are placed makes all the difference.

Best practice is to place images at the top of a post and/or top right. Similar to the sidebar issue, we do not want images to fight with the post for attention. Rather, we want the image to reinforce the message.

Beyond image placement, using (attractively styled) captions with images is an outstanding way to reinforce messaging. Images get more initial reads than text; a strong caption entices a visitor to read the post.

Matt Brett styles his images and captions well on his blog.

Outstanding blogs have a definite strategy behind their image selection. Blogs that appeal to technical folks often rely on annotated screenshots. Blogs that appeal to a more general readership tend to choose images that arouse curiosity or convey a message humorously. Our agency blog has taken the latter route and we’ve gotten very positive feedback from our readers.

Infographics are a fabulous image strategy since they have the potential to become viral. The challenge is the time and effort to create a series of useful and captivating infographics.

6. Put Careful Consideration on Ad Placement

Internet ads are, by nature, interruption marketing. Blogs, on the other hand, are social marketing. Mixing the two is like oil and water.

Make sure you understand your audience before saturating a blog with ads — you could be inviting a nasty backlash. Ongoing split testing of ad layout and positioning is time and money well spent if ad revenue is important. (If it isn’t important — why display ads at all?)

Do not use pop-up ads because they are annoying. Avoid places where ads detract from the content.

Instead, place ads above the post title and on the sidebar. These areas are widely regarded as appropriate for advertising; even "purists" who disdain blog advertising in principle probably won’t be put off, provided, of course, that the content is good.

7. Determine What’s Appropriate: Diary or Magazine Format?

We recently switched our agency’s Internet marketing blog from diary to magazine format. Our decision included the following considerations:

  • The blogosphere is saturated with diary-formatted blogs, and we wanted ours to stand out from the crowd.
  • In general, our posts are not time-sensitive. Chronology is not especially relevant to our readers.
  • We wanted to do away with post snippets altogether, as they looked rather clumsy despite our best efforts. Posts displaying titles only look cleaner in a magazine layout.
  • The magazine format gives more emphasis to our images, which we feel are strengths of the blog and motivate visitors to read our posts.
  • The magazine format visually separates individual posts more strongly than the diary format, where everything tends to flow together in a continuous stream.

Hopefully our experience will help you discern which format is best for your blog project. Without doubt, there are design solutions to the difficulties we experienced using a diary format, but regardless of which way you go, all of these issues affect readability and must be dealt with somehow.

Conclusion

What I admire about web designers is their ability to convey complex ideas with a simple yet powerful visual. If a designer understands what a post is trying to say, and what a blog in general is trying to say, the design will get the message across — often more powerfully than words.

So I would encourage designers to always ask questions of the client, the blogger, the creative director, the project manager and whoever is involved with shaping the content strategy behind the blog.

If you have doubts about the objective of your design work, the entire success of the blog is in doubt. That’s one thing I’m certain of!

Related Content

About the Author

Brad Shorr is Director of Content and Social Media for Straight North, a Chicago-based Internet marketing firm that specializes in B2B. He works closely with technical clients including BluePay, a provider of merchant processing services and TSI, a performance measurement solutions manufacturer. Follow him on Twitter @bradshorr and Facebook.

23 Comments

Shevonne

October 17th, 2011

Great list! I went through both of my blogs to ensure that they had these seven features.

Shane

October 17th, 2011

Just started redesigning my blog last night. Some really good advice here, may need to reconsider. The one thing that really bothers me is how almost all blogs have the same layout, I guess there’s a reason why.

Jenn Staz

October 17th, 2011

This is a really comprehensive article, Brad. Thanks so much for sharing! I am really intrigued by step 1 in your post. What you’re saying makes so much sense, but I think I’ve totally missed the boat on this in my personal blog! A tagline and a thematic header should help me with my bounce rate greatly. I also like your point about conventionality in the details. Your comment “I subscribed to this blog because it had a really unusual RSS button.” made me literally laugh out loud :D

Imtiaj

October 18th, 2011

Great tips. I aggree with almost all of them. But I think putting the sidebar on left can make a blog a bit different. Howtomakemyblog.com is a good example of that. And diary format is the best for any kind of blogs. Perfect thumbnails, headlines with big fonts, good spacing can easily separate indivisual posts.

Saeed Neamati

October 18th, 2011

I think you missed the most important thing, the content. Regardless of the type of the website, the first thing that absorbs new and recalls old users and visitors, is content. No matter how much you make your website beautiful and handy, with poor content, you’re doomed.

Tips were great, thanks.

Brad Shorr

October 18th, 2011

Shane, It’s true that diary-style blogs have a similar look, which may be a good reason to look into a different format. I suppose readers would expect a designer’s blog to have creative design elements – but they still need to find what they need easily. It’s a balancing act, for sure.

Jenn, Good luck with your blog tweaks. We’ve been working on a better tagline as well. We forget that the blog home page can become a more popular entry page to the site than even the home page, meaning the blog really has to do some heavy lifting in terms of branding and stating the value prop.

Bex

October 18th, 2011

Fantastic article, I will be taking away many pointers from this. Thanks

JNsites

October 18th, 2011

Thanks for the share, this is a great post. I just found this site and I’m excited to go through the rest of the posts.

Emily Carter

October 18th, 2011

Thanks for the list Brad! I found myself checking our blog while reading this post. I thought it was very informative and a great tool for anyone planning on redesigning or creating a blog.

Ade

October 18th, 2011

“One statement with which writers and bloggers violently agree is that images enhance the appeal of a blog.”

Well, I have to disagree, though not “violently”!

I browse with images filtered out if they match certain common CMS directory names because I don’t want to have all those pointless stock images inflicted on my browsing experience. They slow page loading and scrolling to a crawl and they just move the content that bit further away.

Images need only be used if they convey additional information or richly illustrate a point that actually needs to be illustrated, but most blog images do not fit either of those criteria.

I’m there to read and I don’t want too many things that get in the way of doing that.

Here’s a free tip that is really valued by many groups of user: include a ToC whenever a page has anything more than a few headings and short sections.

Thank you for what is an otherwise good article, though.

Tilly Webb

October 19th, 2011

Useful advice for me and would be useful whenever i redesign my blog. I appreciate your contribution here to promote blogging and give awareness to blogger’s to learn better techniques and guidance. Thanks

Adrian

October 19th, 2011

All the tips mentioned in this blog about blog designing are unique! What a blog really! This is one of those blogs which help to enhance the designing expertise! Look at the pictures! Absolutely terrific!

Brad Ball

October 19th, 2011

Nicely put together! The general theme that I see here is to stick to typical design patterns… I believe that is most important. Viewers expect to see certain things in certain places, and if they don’t they will typically get frustrated and leave. I especially like the part about Author Attribution, it is a detail that is many times over looked! Thanks

Diogo Dantas

October 21st, 2011

Fantastic. Thanks

Matthew

October 21st, 2011

Interesting list. You defiantly break down how to tailor a blog to allow its design to compliment its content.

Morgan and Me Creative

October 21st, 2011

Some really solid tips. I feel could be used for other in depth areas of traditional web design as well!

Dave Doolin

October 21st, 2011

Brad, thanks for going into so much detail on the design side. As someone who is able to write a whole lot, but isn’t so much for design, it’s really helpful.

@shane: I suspect over the years we’ll find out that blog designs look the way they do because such design really works. That sounds a bit self-fulfilling, perhaps it is, but perhaps not a bad thing either. Magazine racks are full of, well, magazines for a reason!

j_hatfield

October 22nd, 2011

Great article, you should also write a blog about what to do when a client gives you their content in unorthodox ways like on a bunch of screen shots like this one:

http://www.back40design.com/news/m.blog/22/website-content-bliss-and-mishaps

Raj Mehta

October 23rd, 2011

These are good tips Brad and thanks for writing in easily understandable way. One more point I will like to add is about designing content area. I have seen many blogs where separation between two posts is not clear. One should take care in selecting title font size and color as well as HR or some other way to separate two posts very clearly.

Diakosmisi

October 25th, 2011

Great tips, they are small details that all together combined can create a functional and interactive wordpress theme!

Akhtar

October 26th, 2011

Superrr! I will save them :)

Shameer

October 29th, 2011

Better to refer galleries for design trends and inspirations. New type of web galleries are published focusing on web designers. Check http://uicart.com

Elaine Griffin

November 7th, 2011

This is a really great list, Brad, thank you! My clients are more frequently choosing blog sites over websites, and this is a great list that I will keep in mind and share with them when discussing design.

Leave a Comment

Subscribe to the comments on this article.