Theme Playground

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.

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.

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.

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.

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.

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:

• Smileycat comment design showcase (thanks franky)