Examples of Excellent Blog Post Formatting and Styling

While front pages are usually the part of blogs that get showcased, blog design includes a lot of other details that can add to the overall look and appearance of the blog, not to mention usability. The pages of individual blog posts provide opportunities for design and styling in a number of different areas.

In this post we’ll look at a few aspects of blog posts and showcase some design elements that are used to make the post more helpful, inviting, or attractive.

Intro Areas:

At the start of posts, some blogs include additional elements or design techniques to improve the post in one way or another.

ANidea

ANidea’s appraoch is pretty unique. Each post has a lead image that appears above the right sidebar, and just below that is a list of related posts.

ANidea

Blogfullbliss


Blogfullbliss uses a lead image at the top right of each post.

Blogfullbliss

Ecoki

Ecoki uses a thumbnail just to the left of the post title, followed by the author name, date of publication, and categories.

Ecoki

Tutorial9

Tutorial9 posts start with a lead graphic and links for social media voting/sharing.

Tutorial9

Web Design Ledger

Above each post on Web Design Ledger is a lead image. Between the image and the post title is a comment count, date of publication and category link.

Web Design Ledger

The Art of Nonconformity

New visitors to the Art of Nonconformity will be greeted with a brief intro to the site that includes links to get more information about the site or to subscribe.

The Art of Nonconformity

Creative Tempest

Above posts on the Creative Tempest is a large lead image.

Creative Tempest

Design Reviver

Design Reviver also includes a large lead image above the post title.

Design Reviver

Sub-Headers:

Readability is obviously important to any blog in order to build an audience and encourage repeat visits. One of the best ways to improve readability in posts is to make use of sub-headers, and to have them styled effectively.

ANidea

ANidea uses all uppercase letters on its sub-headers to make them stand out and break up the rest of the text.

ANidea

Viget Inspire

Viget Inspire also uses uppercase styling, and if you click through to this post you will see that their use of sub-headers and bold text helps to make the post scannable.

Viget Inspire

Reality Equation

Reality Equation has a colorful theme, and the purple sub-headers fit well with the approach of the design and they look nice.

Reality Equation

CSS Globe

CSS Globe doesn’t use different colors for sub-headers, but changing the font family and the size of text makes it an effective approach.

CSS Globe

UX Booth

UX Booth uses different colors for h3 and h4 tags, which helps to visualize the flow or outline of the post.

UX Booth

End of Post Area/Promotion:

At the end of posts and before the comments, many blogs are including things like buttons and links for social media voting, and calls to action that will encourage readers to subscribe.

Web Designer Wall

Web Designer Wall includes some hand-drawn design elements in this area to go along with links to popular social media sites and a link to the previous post.

Web Designer Wall

Webdesigner Depot

Webdesigner Depot includes an area for promoting submissions and votes at a number of social media sites, plus an icon and link to the feed.

Webdesigner Depot

Ecoki

Ecoki provides links to a few related posts and some icons with links to subscribe, share on Twitter and email to a friend.

Ecoki

GoMediaZine

GoMediaZine has a dark, textured area with social media icons and links, as well as related posts and subscription options.

GoMediaZine

We Are not Freelancers

We Are not Freelancers continues the hand-drawn approach to its design by using a hand-drawn heart, “Promote Me” text, and an RSS icon.

We Are not Freelancers

Colorburned

Colorburned includes an area for social media promotion, followed by a list of related posts with thumbnails for each post.

Colorburned

Well Medicated

Well Mediacated has an area for encouraging social media votes and an “about the author” section.

Well Medicated

Blog.SpoonGraphics

Blog.SpoonGraphics uses the doodle icons for social media (these icons were created and distributed by Chris Spooner).

Blog.SpoonGraphics

AppStorm

AppStorm uses a box that contains two simple lists for related posts and popular posts.

AppStorm

Foodess

Foodess uses a list of similar recipes, and a few small links for social media.

Foodess

UX Booth

UX Booth uses an attractive area with encouragement for social media votes.

UX Booth

About the Author:

Including author information on posts is also very common, especially on multi-author blogs. We’ll see a few different approaches to this here.

Viget Extend

Viget Extend show the author name and photo at the top of the post, rather than showing a brief bio at the end of the post as is more common.

Viget Extend

Line25

Line25 includes a brief author bio with a photo at the end of posts.

Line25

Tutorial9

At the end of posts on Tutorial9 there is an “about the author” section with a brief bio, photo and a link to the author’s site. The bio also includes a subtle background image that helps to make it an attractive area of the post.

Tutorial9

PSDTUTS

PSDTUTS includes the author area after a brief post intro at the top of articles.

PSDTUTS

What’s Your Opinion?

From a reader’s perspective, which elements do you feel are important to have on blog posts, and which design approaches do you prefer?

For more design inspiration see:

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

36 Responses

Comments are now closed on this post.

  • paul, November 5, 2009

    exactly what I needed, thanks.
    surprised not to see the sexybookmarks plugin icons anywhere!
    I think the author bio is really useful, and I like the beautiful lead in images.

  • Vplus - FINDtheSHIT, November 5, 2009

    Excellent post! Thanks a lot – inspired me for my blog.

  • Decent Weblog, November 5, 2009

    Love the collection. To be honest on my own blog I have not put anything like that. I just end the post without any social bookmark icons or graphics.

    I like simple and clean layout :)

  • InternetHow Blog, November 5, 2009

    I will make sure to go through these steps one by one. Thank you

  • It amazed me just how quickly “blogs” and “traditional websites” are converging. Blogs used to look bad, but as you have rightly pointed out, they are now being stunningly designed. Many are well thought out and have much more content than just the traditional article & comments. They are increasingly becoming more like mini-newspapers than blogs.

  • Cheryl H, November 5, 2009

    Great post! As one who is just getting ready to start my own blog, this was exactly the sort of information I was looking for!

  • Web Design Company, November 5, 2009

    Its all about the lead image!
    very cool stuff.
    Thanks

  • Vunky, November 6, 2009

    Great post. I recently started redesigning my blog and was looking for this sort of list.

    I usually don’t like the “about the author” post endings, because most authors have a picture that is kind of lame and get’s irritating after the second time you are looking at it. Or maybe that is just my Zen way of looking at life ;)

  • seethemes, November 6, 2009

    Good Design..Good Post Format and Good Site..i’am like PSDTUTS.

  • Tim Conley, November 6, 2009

    What are you using to embed your images on this blog? I like the border around the images. I’m using WP and I’ve tried a couple plugins, but haven’t had good results.

    Excellent article. I really like how you explained each element down the post. I’ve bookmarked it so I can keep coming back till I get my posts looking awesome.

    t

    • Vandelay Website Design, November 6, 2009

      Hi Tim,
      The image on borders is set by CSS. All images inside posts are styled that way.

  • dave, November 6, 2009

    Excellent post thanks. This ones’s getting bookmarked, some great ideas.

  • Web Design Kent, November 6, 2009

    very useful, thank you

  • aledesign.it, November 6, 2009

    Very nice. Useful. Add to bookmart! Thanks for sharing.

  • Designium, November 6, 2009

    Very nice examples Vandeley!!

  • Michael Martin, November 7, 2009

    Great collection Steven! It’s amazing how much creativity there can be even in something fairly simple like a post layout :)

  • rburch, November 8, 2009

    Terry had a great comment that blogs are becoming more link mini newspapers. I think he’s right. As a user I treat blogs that way. They are where I get a lot of my news when it comes to design and art and technology.

  • Web Templates, November 9, 2009

    I like most of them but found Creative Tempest ‘s image to large and distracting would have liked to see more “content” abouve the fold.

  • UMTS Flatrate, November 9, 2009

    Incredible how much effort people invest into the design of websites. Hopefully they also invest time into the content :-)

    Cheers Daniel

  • Bobby, November 9, 2009

    Wow, fantastic blogs. Utterly inspiring.

  • Sam, November 13, 2009

    Thank you, i will try to make my blog look nice with this excellent design.

  • Michelle, November 14, 2009

    web design ledger is one of the blogs I visit the most, you are right in everything you have said in this post. A blog is not all about a pretty cover.

  • Black Katz - rent in London, November 17, 2009

    Hi, I find blogs that use great images are far more enticing than those that don’t use many, or use images that aren’t startling. http://howtosplitanatom.com/ How to Split An Atom always uses great images.

  • Website Design, November 19, 2009

    Great Share

  • LIC India, February 3, 2010

    Amazing! Thanks for sharing these :)

  • Kristy, June 13, 2010

    Thanks for the awesome examples. This is something I am really trying to figure out as my blog posts look bleh.

  • website design, July 10, 2010

    Thanks for the awesome examples. This is something I am really trying to figure out as my blog posts look bleh.