Designing and Formatting Blog Posts for Readability

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.

CSS Globe

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.

CSS Globe


Darren Hoyt

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.

Darren Hoyt

ProBlogger

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.

ProBlogger

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.

Pro Blog Design

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

27 Responses

Comments are now closed on this post.

  • inaequitas, June 12, 2008

    Personally, I much prefer clean-cut designs for blogs and other avenues that revolve around text. As a mere apprentice of design, only as of late have I noticed the subtle annoyances in many websites. As a rule of thumb, however, if it takes more than a second for me to identify the ‘real’ content on a page, something is wrong. Choosing blog themes (before I have attempted a design of my own) always revolved around that.

  • Tad Chef, June 12, 2008

    Hey Steven, make it 5, you forgot my blog, just look at this formatting:
    http://seo2.0.onreact.com/bloggers-to-get-attention-go-where-the-attention-is

  • Sameer Vasta, June 12, 2008

    Thanks for sharing those examples! As someone who focuses more on content than design, I sometimes forget that the look of my content matters too!

  • Adam, June 12, 2008

    I’d have to agree with inaequitas. I really prefer the clean-cut designs because they put so much focus on the content and not the design itself.

    I’ve never put much thought about watching what the posts look like. If you’re going to spend so much time on the design, you should make sure your posts reflect the design.

  • Mordechai Boaziz, June 12, 2008

    Some really good CSS examples to follow. Thank you!

  • Moni, June 12, 2008

    Good post, you address an important issue right there!
    Another thing is color, bg VS font color. Some blogs drive me mad, they do everything right, their content is amazing, but they make life harder to read everything.

    Take the blackhat seo blog http://www.shoutingzone.com/blog their content is among the coolest, design and seo related but that theme makes me want to kick babies in the face you know? Sure it’s all based around blackhats but does everything have to be so…black? Why not add some red, anything, make the text white not grey? :(

  • Jeanette, June 12, 2008

    So true, sad to say, maybe it’s my ADD tendencies but if the readability isn’t great my interest is lost rather quickly. The colors, snappy headings, etc. all draw me in and capture my attention. Thanks for the reminder.

  • Ty (tzmedia), June 12, 2008

    There are many things to design with and around.
    Here’s a great post illustrating that very fact:
    http://jontangerine.com/silo/typography/p/
    Ahhh the lowly paragraph, many people don’t even consider sculpting this common tag. A blog post should have some hierarchy or it might as well be just text.
    I’ve actually been struggling to format gallery posts screenshot, link title, and design blurb-age. As a guest poster it makes it a little bit more difficult, without creating some inline styles.

    Don’t mind me I just look at the pictures :)

  • Vandelay Design, June 12, 2008

    Tad,
    Yours looks good too:)

    inqequitas and Adam,
    I tend to prefer clean looks also. I think the posts at CSS Globe are a good example of a nice, clean look.

    Moni,
    Yes, that gray text is hard to read. I wouldn’t be able to read that for very long before going somewhere else.

    Ty,
    Thanks for the link. That’s helpful… I’ve had similar experiences with guest posting and freelance blogging.

  • Snowboarder, June 13, 2008

    Sorry to be contrarian, but I don’t think that design matters too much if the content is spectacular. Craigslist and MySpace are good counterexamples, although they’re not blogs. At the end of the day, although a pleasing layout will definitely help readership, content is still king.

  • Dejan Cancarevic, June 13, 2008

    very nice article and examples, thanks

  • Michael Martin, June 13, 2008

    Thanks for the complement Steven! I’m glad you find the posts readable, and thanks for sharing it with your readers.

    One of my favorite examples of well formatted content is from http://www.trizle.com/

    The sheer style and attitude of their language is the main thing, but the formatting amplifies it tenfold. It’s very unique and very well done. :)

  • Darren Hoyt, June 13, 2008

    Thanks for the mention, Steven. I’m especially flattered you featured the site for exactly the three reasons I redesigned it in the first place — improved readability, organization and typography. I usually like a more dramatic design, but when you want to emphasize the writing, there’s no need for the two to compete, just to complement each other.

  • Vandelay Design, June 13, 2008

    Snowboarder,
    I don’t disagree that content is more important than design, but I don’t think that means we should all blow off the design and not even attempt to improve. If the design prevents you from being able to easily read or find the content, then it becomes a serious issue.

    Michael,
    Thanks for sharing that link, I’m not familiar with that site.

    Darren,
    I really like the new design. You’re right, there’s no need to “wow” people with the design when the content is the focus.

  • virtual hosting, June 14, 2008

    Yes I agree.Very nice one.Thanks for the post.

  • Patrick, June 20, 2008

    Great post! You touched on a very common problem in the web community. Great discussions. Keep up the good work.

  • Cliff Posey, June 30, 2008

    There seems to be a balance to everything you do with a blog or website. Thanks for the thoughts.

    Cliff

  • David Simpson, May 14, 2009

    Nice post. Once you’ve got the layout and headings right, it’s time to concentrate on the content. My readability test tool can help with that.

    The Readability Test Tool shows the score for most of the best known readability indices along with a composite score.

    Go and check your grade level score now!

  • Celeste Quinn, January 17, 2011

    Thank you for another informative blog. Where else may I am getting that type of info written in such an ideal approach? I’ve a undertaking that I’m just now running on, and I have been at the glance out for such information.

  • lowongan kerja, January 26, 2011

    I can apply this method to my blog to provide best design to my reader

    thank

Close