Blog comments design considerations

March 30, 2009

Blog comments design is one of the important parts of blog design, but often overlooked. In this article, I will try to identify the most important aspects of designing comments that should be taken into consideration and provide some of examples that I like.

1. Conversation flow

One of the most important aspects of comments is conversation flow. There are many ways to break the flow, but there are also many ways to keep it. Readers who comment on an article usually read existing comments and often comment not only on the particular content in article but also reply to other readers. And in those cases it might be difficult to follow the flow.

Chronological or threaded view? Or…?

Blogs usually have simple, chronological views that are easy to read if you just scroll down the page. However, comments won't always be just "Thank you for the tutorial". You might have to respond to several comments and readers might respond to each other. A real discussion can occur and if that happens it might not be that easy for a reader to catch up with all the comments.

One of the solutions is to have the so called "threaded view". This means that comments are not being shown only in a chronological order. Instead, replies to a specific comment are being shown under that particular comment (or under that "thread"). In this way you can easily follow related comments because they are simply visually grouped. I like the comment section on Line25 blog ran by Chris Spooner. It is very neat and easy to follow.

Nettuts+ also has threaded view. The interesting thing here is that replies have different layout.

But to have easy-to-follow comments you don't need to implement threaded view. There are some simple, easy to implement but also effective solutions. Guys from UX Booth created an interesting solution: they added a reply button on the right hand side of each comment. By clicking that button you get a link to that particular comment with the name of the author you replied to. By clicking on the link readers get scrolled up or down to the related comment.

Emphasize authors comment

Readers often ask questions and debate with the author. By emphasizing author's comment it becomes simpler to scan and look for author's replies. The simplest and the most often used way to do this is to set a different background color for author's comment.In the example below, on Ordered List blog, author's comment has slightly lighter background.

Separate comments and trackbacks

Keeping trackbacks and comments together is a a good way to break the flow of comments and many blogs still keep them together. It is not that hard to do such a modification in your blog engine. Some time ago I wrote an article on this subject and showed how to do it in BlogEngine.NET. The image below shows comments and trackbacks on Handycons2 article.

2. Layout

Although there are numerous different comment designs out there, following layouts are most widely used.

A. Simple layout

This is the simplest and probably the most common layout. Reader's name is emphasized and followed by comment date and the comment itself. This can vary in the way that date can be placed on the right of the name, or both can be placed under the comment.

B. Two colum layout


The left column contains either an author's name or gravatar and the right contains the comment. If used without gravatar, author's name is usually followed by date. And if gravatar is present it can be followed by author's name. These also have large number of variations. 

C. Three column layout

The last one is divided into three columns. On the very left is a gravatar, followed by the author's name and finally the comment on the right.

3. All comments visible?

It is very common to list all comments in same page as an article, just below the article itself. This is how I list comments as well :) But there are some other options that can be considered here.


24 days blog has a very interesting concept of showing comments under separate tab (not to mention that this blog design and usability are just awesome!). They have comments tab on the top and bottom of each article so it is easy to switch between article and comments. It might be difficult to switch back and forth if some comment refers to a specific paragraph in the article, and you want to take a look at it. But, on the other hand, you would normally have to scroll up and down, isn't it?


Although not widely used, paging could also be a good choice, especially if blog has a large number of comments. Just imagine a hundreds of comments together with article, like WebDesignerWall has? Here are two good examples of paged comments on Tutorial9 and WebDesignerWall.

4. Use a Gravatar or not?

Another thing you would probably ask yourself is whether to use a gravatar or not. I would say yes, for one simple reason – it could be a good motivation factor for users to get involved and comment on your articles. Gravatar simply enables readers to be seen to promote ther blogs or their businesses; and people just like to be seen, it's normal. Gravatar can also add value to your design and make it richer. You can combine different elements with gravatar images to enrich comments, use things like balloons and borders, for example. To learn more about gravatar visit Here are a few examples:

Of course, if you choose not to use gravatars it doesn't necessarily have to be a bad decision. You have a lot of options and combinations to choose from, like different layouts, colors and/or backgrounds. One great examples blog. 

Be more creative for users that don't have gravatars

Speaking of gravatars, one of the things that is almost totally overlooked is, what I will call, no-avatar image. Many blogs use default no-avatar image which is too generic. It is especially common for wordpress users, so you are probably familiar with this image:

You can make your blog comments recognizable and more interesting if you create unique no-avatar image. Here are just some of the examples of a good practice.

5. Showcase

Finally, let's have a look at some great solutions. It's amazing how much this simple element in blog design can be done in so many creative ways.


Design Reviver

Fuel Your Creativity 




Outlaw design blog

Tutorial 9


Veerle's blog




Freelance Folder

Bartelme design 


Dark motion


Jason Santa Maria 


Ordered list


UX Digest

Do you have any other important consideration? Do you have a blog with great comment design? Share it!

Let's discuss this on twitter.


  • T-Law (March 30, 2009)

    That’s great article, thanks.

  • Goran Aničić (March 30, 2009)

    Odlična analiza, dobre solucije za funciju komentara.

  • Davide Espertini (March 30, 2009)

    [b]Great article Janko.[/b] It is an exhaustive discussion about the design of the comments of a blog

  • PHP Inventory (March 31, 2009)

    Thank you, very thorough look at comments. One think I could add is that lately I’ve been seeing randomly generated graphics for users, who don’t have gravatar. Do you know what kind of plug-in they are using?

  • Marco (March 31, 2009)

    That’s one pretty complete article Janko, well done! I really need to fix my commenting system once I have time – It works pretty good, but looks really ugly.

    Will use this article for inspiration, thanks!

  • Janko (March 31, 2009)

    Thanks, everyone!

    PHP: Yeah, I forgot to mention that in the article, the plugin is Wavatar.

  • Daniel (March 31, 2009)

    Great article. It’s great that someone has put some thought into their comment design. It is one of the most important parts of a blog, and the only real way users can interact and form part of a community.

  • Muhammad Mosa (March 31, 2009)

    Wonderful post mate. You almost covered everything. Cool hints and collection of variety of options and layouts. Very nice one

  • Dan (March 31, 2009)

    Excellent article. I agree 100% that a well thought-out comment layout and structure can make or break the conversation ability of your blog.

    I’ve implimented and played around with threaded comments in WordPress 2.7 and, thruth be told, I’m not liking it so much. It <em>does</em> feel more natural when you do a reply but it doesn’t read as naturally as a chronological order. I simply do @replies and colour my own comments differently to distinguish me as the author.

    The layout I like best is having the gravatar with the name and date floated to the right of it and the contents of the comment below that. Some simple bordering keeps comments visually seperate.


  • Danny (March 31, 2009)

    @php inventory,
    if you’re running wordpress you dont need a plugin to display random gravatars, you just need to add ’identicon’ ’wavatar’ or ’monsterid’ to the get_avatar call in your theme files comments.php.
    for example I changed

    echo get_avatar( $comment, $size = ’55’ ); ?>
    echo get_avatar( $comment, $size = ’55’,’identicon’ ); ?>
    And bingo, random avatars without a plugin.

    Thanks for the great article janko!

  • matt (March 31, 2009)

    excellent post Janko!

  • Chris Paul (March 31, 2009)

    You should make the default gravatar ugly, so that the user is motivated to change it.

  • Janko (March 31, 2009)

    Thanks, guys!!!

    Danny: Thanks for the tips for WordPress users. For BlogEngine.NET, you just select the type of avatars in the admin part.

    Chris: interesting point of view :D

  • seo (April 1, 2009)

    nice article

  • Joffrey (April 1, 2009)

    That’s exactly what I needed, thanks! :)

  • cssah (April 1, 2009)

    thank so muck nice post

  • Screensaver Software (April 7, 2009)

    agree totally with Dan. I hate threaded comments. It sounds good in theory but reading them stuffs up the flow as not everyone follows the thread usage. So what you end up having is some people replying to the wrong comment, and some the right comment but wrong nested level, etc., etc.,

    I especially hate this implementation in Drupal’s default forum structure. eek!

  • Bryn Williams (April 9, 2009)

    Hi there,

    Great article. Very insightful. Just wanted to point out that when you discuss Tabs you use an example from, but you refer to it as … "24 days blog has …" :)

    Keep up the great work.

  • Buzzy (April 9, 2009)

    Nice artichle pal!

  • kyle steed (April 9, 2009)

    Hey man. Great article. I found you via

    I was just spending some time trying to update the look of my comment form yesterday on my own blog. So that’s what initially caught my interest here. But then I was in for a surprise when I found all this great information. Thanks for crafting this post with care and affection. It really shines through.

    look forward to reading more in the future.

  • Photoshop (April 14, 2009)

    Separeted comments and trackbacks is a must, I hat when you’re reading a comment and move to the next one just to see its a trackback.

  • sandeep (April 14, 2009)

    Nice Article… Thank You!

  • Evod Proko (April 15, 2009)

    I’ve never realized how many ways there are to set up a comments system. GREAT BLOG, I learned a lot.


  • Janko (April 18, 2009)

    Thanks, everyone!

    Bryn: ooops, my mistake, will change that:)

    kyle: glad I can help!

  • Nannolo (June 26, 2009)

    The comment’s design on this site is the best I ever seen!

  • Ali Hussain (July 16, 2009)

    Great Tips. Thankyou for the information

  • André Câmara (August 9, 2009)


  • Onnay Okheng (January 6, 2010)

    excellent post

  • Kuswanto (January 6, 2010)

    Nice article :-)
    I consider comments are the most important part of a blog design.

  • Alfons (January 6, 2010)

    Thanks for sharing this. Excellent overview!