Designing and Formatting Blog Posts for ReadabilityPublished in Design
If you like getting design inspiration by looking at excellent blog designs, you’ll love our new gallery site Blog Design Heroes.
Most of us probably put a great deal of thought and effort into the design of a blog, but once it’s launched there is a tendency to type a post and hit publish without giving much thought to the visual elements of the post. I know I fall into that trap quite often, and I don’t think I’m alone.
The heart and soul of the blog post is the content itself, however, the design, layout, and formatting certainly impacts the attention that visitors give to the content. For the current re-design that’s in the works for this blog, this is a factor that I would really like to improve.
I’ve been looking at some of the blogs that I read and evaluating what I like and what I don’t like concerning the visual elements of individual blog posts. I’d like to share with you a few that I find to be excellent examples of attractive, readable blog posts. These bloggers and designers have done a good job of creating something that allows the design to impact the post.
I know many of you subscribe to CSS Globe, and if you’re only reading the posts in a feed reader you’re missing one of my favorite examples of posts that are very well laid out. The sample screen shot below is from Alen’s post CSS Do’s and Don’ts Part 1: CSS Selecting.
With no images in the post Alen still creates an attractive look that is a big improvement on standard blocks of text. The h3 tags have a light gray top border (which may be hard to see in this image) and the code samples have a nice blue background with a slightly darker blue border. Alen typically uses short paragraphs and a few sub-headers in his posts, which adds more whitespace and improves readability.
Our second example comes from Darren Hoyt’s recently redesigned blog. In fact, the sample screen shot below comes from his post that announced the redesign. Like Alen’s post, Darren’s includes no pictures in this post, but still manages a nice look.
What stands out to me the most is the typography, including the italicized post title and sub-headers. You don’t see italicized headers very frequently, but Darren pulls it off.
I find the posts at ProBlogger to feature excellent readability. With such a huge audience and I would assume a lot of visitors from social media sites, there are thousands of people that are scanning Darren’s posts every day. He does a nice job of breaking up the posts to allow for scanning.
The sample below is from How to Be an Interesting Blogger. Short paragraphs, plenty of whitespace, the use of sub-headers, lists and bold text all add to the visual appearance of this post. Darren’s bulleted list uses a non-standard arrow icon that gives it a nice touch.
Pro Blog Design
Michael Martin of Pro Blog Design always uses posts and excerpts that work well with his content. The sample below is from Should a Sidebar Go On the Left or Right?
Michael does an excellent job of creating readable post layouts by using the same elements mentioned above with ProBlogger, short paragraphs, whitespace, sub-headers and bold text. The sample post also shows a blockquote that adds to the attractiveness of the post.