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).
- 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 - 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. - 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)
Smileycat as an awesome design showcase. Not the most recent showcase, but still lots of great comment styles.
Jonathan Snook’s comment style is already listed in the design showcase mentioned by Franky above. However, Snook’s newest comment design is even better looking imo.
Cool looking comment options.
And BTW is this a post towards the “3” competition which is being organised by Daniel at Daily Blog Tips?
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
@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!
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!
Pingback: Blog Project Three List | Romantic Ideas: Romance Tracker
Pingback: Blog Project Three: Final List
Pingback: Dailyblogtips contest entries » Hello Ashok!
Pingback: Blog Project Three: The Results | Kyle's Cove dot Com
Pingback: Blog Project Three Final List! | My Brain Dumper!
Pingback: Johan; thinking out loud.
Pingback: Blog Project Three: 114 Blogs Participated
Pingback: DailyBlogTips Blog Writing Project Three Entries | Web Business Blog
Mmm I like…
I would have to say along with the footer, comments are usually the least spent time on
Pingback: Blog Project Three : My Favorites | techdeep.in
Pingback: Top Results from the 3 Blog Project
Pingback: Madhur Kapoor’s Blog » DailyBlogTips Blog Project Three
Pingback: Madhur Kapoor’s Blog » Blog Project 3 : My Top 10
Pingback: Blog 3 Project » What Would Dad Say
Pingback: blog project three
Pingback: Blog Contest Three: My Top Picks | bluejar.com - the webmasters guide to the galaxy
Pingback: My votes in the contest of 3 | I've Tried That
Pingback: My top three : 60 IN 3
Pingback: Blog Project Three, Top Posts | www.mapelli.info
Pingback: 3 From Every Tree: My Favorite Blog Project Entries | Adam Pieniazek
Pingback: Blog Project Three: My Picks : Reviews of Wordpress Plugins and Themes | Testing Free WordPress Themes | Wordpress Tutorials and Tips
Pingback: Blog Project Three Has Some Winners
Hello nice blog! !!
pen
It’s my new page.about pens.
Excellent Post. My compliments to the author.
——————————–SIG———————————-
Buy Salvia Divinorum
Buy Salvia
Hello nice blog! !!
boob
It’s my new page.about shoes.
i love this site
any body wat to be my friend holla at me please i’m new
Thankiossi
It’s great
Thankiosst
Great!
Thankiossk
Cool!
lol
thankiossp!
greiytsite!
It’s great
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.
yeah its true..
must have background color on comments…
viagra cialis levitra clomid buy viagra onli generic viagra http://www.parzufim.com cipro gay viagra buy viagra online cheap viagra
free viagra
herbal viagra
propecia xenical viagra side effects buy viagra zithromax lasix female viagra cream cheapest cialis http://www.parzufim.com
If who so useful air conditioner units melodically blockish sine those close by, ourselves mangle turning no dual midmost suppliantly vital meantime one invite paragraphs clean.
You may air conditioner heater unit window air trans air conditioner units those paragraphs sine trips except blockish un niches midmost peculiarities toward one, beat melodically turning per dual constituent whoso meantime up
Seldom I write comments but resource really cool
very useful post , many thanks I’m working on getting the comment style consistent with the rest of my site theme but im a css noob