Blog Comment Design Showcase

Recently I posted some tips to improve the comment section of your blog.

I thought it might be useful to pull together a showcase of great blog comment design, to provide some ideas and inspiration to anyone having difficulty coming up with a good look for their comment section.

Always Beta blog comment design example
Always Beta

Hopefully, I’ve provided a good roundup – it’s interesting to see the diversity of designs while at the same time noting the common themes that show through.

I was also taken by the ingenuity of a few of the designs in particular, given that there really is only so much styling you can do with a blog comment.

If..Else Log blog comment design example
If..Else Log

So, enjoy the comment design showcase, and check back in the future β€” I plan to update it as I come across new examples worth including.

Also, if you need some inspiration for your comment form, check out my blog comment form design showcase.

Further Reading About Blog Design

35 thoughts to “Blog Comment Design Showcase”

  1. Mike – a lot of them are from the ‘usual pool’ of web designer bloggers (you get a couple of honorable mentions yourself), but I did try to cast my net a little wider as far as time allowed.
    In actual fact, a handy source turned out to be the 9rules Communities page – I was surprised at how many good looking blogs are in the 9rules network. Now there’s a great resource for blog design!

  2. Nice work Christian.
    Unfortunately, the comment sections are an often negelected part of a design which is especially strange considering the importance of discussion in blogs. In fact, I’m probably guilty of leaving them to the last minute (which is why I was pleasantly surprised to see mine in there).

    “I think it’s both sad and cool that I recognized about 90% of them without hovering to see the URL ;)”

    Likewise. I think I actually managed to recognise all but one:)

  3. Hmmm, I’m a little disappointed that these sites appear to be so well known – quite a few of them were new to me.
    Seems like I’m going to have to cast my net a bit wider when I do future updates!

  4. I think its great that you are show casing these comments but could you point toward any resources we can use to actually stylize our comments for the non-html folks? (I’m a semi-html person…still learning)

  5. Darnell – that’s a good question, but a big thing to ask!
    There are many resources on the web for those new to web design; however, one tried-and-true method is to look at the code of a page you like. You’ll need to look at the HTML to see how the page is marked up (i.e. how the styles are applied to the page) and then at the stylesheet to see how the design is created.
    An excellent tool for this is the Firefox extension – “web developer toolbar”:http://chrispederick.com/work/webdeveloper/ .
    This tool allows you to both view the source code of a page as well as to easily view the stylesheets that are being applied to that page and even to edit them on-the-fly.
    This is an essential tool for me – I use it many times every day. Hope this helps!

  6. great job on the gallery. tons of inspiration for future blog designs. i have just recently realized how important aesthetically sound comments sections are to the overall presentation of a weblog.

  7. Slick showcase, Christian!
    Having them all on one page really gives you an idea of how many of these comment sections inspire eachother and yet are unique in their own respect.
    Also, the Firefox Web Dev toolbar is hands down one of the greatest assets in a web designer/developer’s “tool” shed, so to speak. It’s got everything you need and then some.

  8. A nice collection and case study area for comment design.
    I’d like to see one beside another. πŸ™‚

  9. kartooner – You just can’t beat the Web Dev toolbar. How do web designers manage without Firefox?!
    Doug – thanks for the great tip; I’ve added it to the showcase.

  10. Cool little post! Thanks for taking the time to compile the list. I also recognized more than 50% of them: great taste can’t be denied!!! πŸ˜‰

  11. Good gallery in terms of a summary. Still, I’m not sure that ‘a showcase of great comment design’ is the right term… maybe ‘a showcase of 9rules comment design’ would be more accurate.

  12. Brian – thanks for the suggestion; that’s a great site and a worthy addition.
    eric – Although it’s true that I did pull quite a few of the examples from the 9rules community, that was mainly because the 9rules communities page makes it so easy to browse a good selection of blogs.
    There are only so many hours in the day to spending surfing the web looking for examples of good comment design!
    If you know of any sites that I missed that should be included, please let me know. I’d love to add them in.

  13. Hey, I appreciate you featuring my site! My comment display is pretty spartan compared to many of the other great designs out there, but I felt in my case, the simpler the better. My little “author” tag was born more of laziness than anything, not wanting to create an entirely new style for my own responses. Again, thanks. πŸ™‚

  14. Christian – funny you should mention your site, I came across it just the other day and marked it down to add to my list in a future update. I really like the way you’ve done your avatars!
    Small niggle – do you think that each comment is a little close to each other? It’s a little hard to separate one from the other.

  15. Thanks very much for the feedback, I’ll take that into consideration as I continue to work on it. For the time being I’ll add a little more space between comments. Thanks again!

  16. thanks, nice collection
    what I found saddening is though why we keep on reinventing commenting systems, or am I just to bad in googling. I have been looking for a reusable php/mysql based comment component, which I just can plugin, now is it something you have come across, if so please let me know if there is any such…

  17. Gobezu: No one is reinventing them, all the ones you see come packaged with free content management systems. Look into WordPress or Textpattern or Movable Type or Expression Engine. They are all free.

  18. Great article. No body seems to think about the design of the blog too much. I see hundreds that are the default (which is what I have done in the past), but it makes a world of difference to customize it to your own site.
    Thanks for the tips!

  19. Just found your home page its great, it looks like you folks do great service keep up the good work.
    So interesting site, thanks!
    Alleen onder Glamour versta ik wat anders maar dat moet kunnen. So interesting site, thanks!
    ItÂ’s my first visit to your website. After just a quick browse, IÂ’m really impressed!
    Hello there! Just want to say that I find your site enough interesting for me. Usefull information and all is good arranged. Thank you for your work. I will visit your site more ofter from now and I bookmarked it.
    Hello there! Just want to say that I find your site enough interesting for me. Usefull information and all is good arranged. Thank you for your work. I will visit your site more ofter from now and I bookmarked it.
    Great website! Bookmarked! I am impressed at your work!

  20. I hope it provides some useful food for thought!
    Of course, I’m well aware of the irony that the omment form on my own site has absolutely no additional design whatsoever.

  21. Thanks for showcasing all these comment designs. Great for inspiration and shows just how many different ways there are to design the same thing.
    And I have to admit that I also leave comment design to the last. But glad to know I’m not alone in this πŸ˜‰

  22. Hi – I’m very new to Blogging (and The Web too) but trying to learn fast.
    Thank you for your brilliant site and advice
    Yours sincerely

Comments are closed.