For many blog posts, the comments section – where the discussion occurs – is as important as the post itself. This is where the original idea or technique gets tested, refined and extended, questions are answered, and other options to it are presented.
Consequently, it’s worth taking the time to make your comments section as user-friendly and as attractive as the rest of your site. Here are some tips to bring the design of your comments section up a notch or two:
1. Break Up Comments
Clearly separate each comment by putting a border around it, using a light colored background or adding a dividing line between each.
2. Differentiate Comment Meta Data
Differentiate the comment’s meta data (commenter name, date posted, permalink, etc) from the comment by styling it differently. Use some combination of a different font, font-size, font color or background.
Or, try putting the meta data off to one side, so that it doesn’t get in the way of the comment flow.
3. Alternate Colors
Alternate comment background colors to make them easier to tell apart.
4. Number Comments
Add a number to each comment so that other commenters can easily refer to it.
5. Make Author Comments Stand Out
Differentiate author comments so that readers can easily see your contribution to the discussion. Try using a different background and border and/or adding something like “Author Comment” to the meta data.
6. Add Personality
Add gravatars to your comments to spice them up and to give your commenters a little more ‘name recognition’.
7. Permalinks
Add a permalink to each comment so that other people can link to it – either from within the discussion or from other sites.
8. Icons
Add some graphical interest to your meta data by using icons – for example, a speech bubble icon for the posting date and a user icon for the commenter’s name.
9. Show Total Number of Comments
Say how many comments have been posted in your comments header. For example, “9 Comments Posted. Add Yours”.
10. Live Comment Preview
Add live comment preview to your comment form so that commenters can see how their comment will read as they type it. This is especially helpful in making sure that links work correctly.
11 (bonus). Subscribe to Comments
Add the ability for readers to subscribe to comments by email or RSS.
Looking for a good place to start? Try my blog comment design showcase for some great examples of good comment design.
nice stuff. i’ll be sure to try gravatar sometime
Sang – I’ve been meaning to implement them myself; just haven’t had the time (story of my life!).
I’ve always known that some or most of your tips are something that I’ve always wanted to implement on my site, but have never got around to it… maybe in the next redesign.
For bloggers who have a larger readership that respond via comments, they implement some of these changes and find people commenting more. But when I find it difficult to comment on a blog, or reading the comments is a real pain, I almost instantly leave. So these tips also form part of “How to increase readership and conversation”!
Jason – you make a great point. Improving the design and usability of your comments section isn’t just about making your site prettier.
It’s also an important part of increasing the level of discussion on your site – something which is perhaps the hardest aspect of blogging to be successful in.
Christian,
Some great advice here … I’ve finally made some time to work on my own blogging software that I use, and I’ve done a lot of what you mention.
The one thing I had to add due to some pretty persistent blog comment spammers is a CAPTCHA.
Thanks for helping motivate me to actually implement the things I’ve been meaning to get to for months … 🙂
— Dosy
Dossy – I don’t have too much trouble with spammers and it is pretty easy to adjust my spam filter settings if one starts to get through.
Not sure if I’d ever add a captcha unless I had to – they bug me too much.
My next step is to install MT Notifier so that people can subscribe to comments on my site – not sure how much it will get used but it’s a pretty cool plugin all the same.
What makes a website a blog? Are comments necessary?
Recently, I found some time to revamp the comments section of my own blog after being inspired by Christian Watson’s suggestions on how to improve the comment section of a blog. I implemented anonymous comments, added a CAPTCHA (you know,…
I like when there is spelling check.
Hey, did you ever post any code snippets to do some of the whiz-bangier elements of this? Like, the incredibly cool live comment preview and the numbers in the comments?
Good stuff. very good stuff.
*Karl* – Thanks for your kind words! Actually, numbering comments in Movable Type is easy. There’s a tag especially for this called “MTCommentOrderNumber”:http://www.sixapart.com/movabletype/docs/3.2/a_template_tag_reference/comment_listing/mtcommentordernumber.html .
The live comment preview uses a script from “Jeff Minard”:http://jrm.cc/archives/blog/site-news/live-comment-previews/ – it’s not too hard to implement and there are plenty of others available if this one doesn’t do all that you want.
Hello, i am new with internet and i am tring to make a blog but its very hard. If anyone knows where to get information about this i would really apritiate it.
10 tips to improve the comments section, 66 examples
Smiley Cat has 10 tips to improving the comments section of your blog. Why?
For many blog posts, the comments section – where the discussion occurs – is as important as the post itself.
Consequently, it’s worth taking the time to make your commen…