3 Ways to Improve the Comment Styles on Your Blog (With Examples)

44 Comments

Posted by on

The comments section is always one of the last elements of a website that I design, and I always regret waiting to design it. The comments are extremely important on your website: the comments are where you are inviting your visitors to join in on the discussion. The last thing you want them to think is that you don’t value them enough to spruce their section up as much as yours.

Plus, a solid design will take every element into consideration. If you want your blog to have any sort of status at all, the comments better look good.

Here are a few ways to improve your comment section styles, without causing too much pain (I hope).

  1. Use the following CSS “starter code”
    For code that I use often, I will set aside the code in a safe place (like Backpack or something similar) until such a time that I need it. In the case of comments, I use the following default CSS to plug in before I even do too much custom styling (as each blog should have).Oh, and I added comments in for you so you know what does what.CSS for Styling Your Comments
  2. Keep it consistent with the rest of your site
    The worst thing you can do is think that a basic styling is good enough. Or, worse yet, don’t just take the above styles and use it without customizing it. Every comments section should be different, because every blog design (hopefully) is different. This will be clear once we look at the comment examples below.
  3. Try something new
    The coolest part about a comment section is what it offers that no other blog does. If you can tell that the developer took the time out to carefully craft the comment section styles in a unique way, the rest of the blog takes on an even better light.

Time for some examples. To show you how unique great comment sections can be (and are) here are three screen snippets without the websites title anywhere on them. I’ll bet you’ll know where they’re from without even reading the content of the comments.

Comments

Comments

Comments

The above screenshots are from Flickr, 37signals, and Techcrunch, in that order.

Here are a few more examples to get you thinking, and hopefully, your creative juices flowing as well.

Comments

A List Apart‘s comments are very distinct, and very unique. You actually have to navigate to another page to see the comments (somewhat nice) but the design gives the comments page the feeling that they are meant for discussion. Very pro (obviously) but it is also consistent with the rest of the site.

Comments

The above image is from Digg. The icon next to each is very telling, as are the Digg colors. What’s interesting is the way each comment can also be commented on. If you’re interested in implementing this on your blog, check out this threaded comments plugin. I haven’t tried it out yet, but I would be interested in any comments on it.

Comments

This one may be unknown to most of you. Goodmanson.com is one of my subscriptions, and had (what I thought) was a very cool way of displaying comments. The colors are very nice, and the numbers and avatars are interesting.

Comments

Subtraction offers a very minimal comment section design which puts an emphasis on the content. Well, that and awesome shades of gray.

What other great comment designs have you seen? Or better yet, how have you implemented any of these ideas in your own blog? Other ideas for great comment section design? I look forward to your thoughts.

Also see:

44 thoughts on “3 Ways to Improve the Comment Styles on Your Blog (With Examples)”

  3. Cool looking comment options.

    And BTW is this a post towards the “3” competition which is being organised by Daniel at Daily Blog Tips?

  4. hi,
    i did try the “Threaded comments” on my site, with use of gravatars (“MBLA” plugin). I think the result is quite ok, although i didn’t really designed the comments part. If someone can give me feedback, thanks !
    sorry for my english

  5. @Ramkarthik: Yes, this is entered into the “3” blogging project this week. 🙂

    @lomig: Your comments look pretty good. I might try adding some space between paragraphs in the comments, though. But overall it’s fine – I’ve seen much worse!

    Thanks for commenting!

  6. Hi Ryan,

    Interesting run-down! To be honest I haven’t changed my comment section too much, but from your showcase I can certainly see the advantages to having a unique commenter experience.

    I’ve visited your site here a few times before, and this time I came over via a comment you left on Randa’s design blog (I always like knowing where readers come from).

    Enjoy the weekend!

  7. Pingback: Blog Project Three List | Romantic Ideas: Romance Tracker

  8. Pingback: Blog Project Three: Final List

  9. Pingback: Dailyblogtips contest entries » Hello Ashok!

  10. Pingback: Blog Project Three: The Results | Kyle's Cove dot Com

  11. Pingback: Blog Project Three Final List! | My Brain Dumper!

  12. Pingback: Johan; thinking out loud.

  13. Pingback: Blog Project Three: 114 Blogs Participated

  14. Pingback: DailyBlogTips Blog Writing Project Three Entries | Web Business Blog

  16. Pingback: Blog Project Three : My Favorites | techdeep.in

  17. Pingback: Top Results from the 3 Blog Project

  18. Pingback: Madhur Kapoor’s Blog » DailyBlogTips Blog Project Three

  19. Pingback: Madhur Kapoor’s Blog » Blog Project 3 : My Top 10

  20. Pingback: Blog 3 Project » What Would Dad Say

  21. Pingback: blog project three

  22. Pingback: Blog Contest Three: My Top Picks | bluejar.com - the webmasters guide to the galaxy

  23. Pingback: My votes in the contest of 3 | I've Tried That

  24. Pingback: My top three : 60 IN 3

  25. Pingback: Blog Project Three, Top Posts | www.mapelli.info

  26. Pingback: 3 From Every Tree: My Favorite Blog Project Entries | Adam Pieniazek

  27. Pingback: Blog Project Three: My Picks : Reviews of Wordpress Plugins and Themes | Testing Free WordPress Themes | Wordpress Tutorials and Tips

  28. Pingback: Blog Project Three Has Some Winners

  39. I just don’t have much to say lately, but such is life. What can I say? I can’t be bothered with anything. I’ve just been staying at home waiting for something to happen. I haven’t been up to much these days, but pfft.

Comments are closed.