Without question, getting comments from interested readers is one of the most enjoyable and rewarding aspects of blogging. Unfortunately, interacting with people through comments is an asynchronous task, and this oftentimes makes it difficult to follow the ongoing conversation.
Over the past couple of years, I’ve seen designers and programmers attempt to solve this problem with things like threaded comments or even in-line AJAX commenting. Problem is, solutions like these tend to fall into one of two categories:
- They are ugly as sin and a nightmare to style.
- They are technical, complicated, and require you to install a plugin to get the result you want.
Man, oh man… If there’s one thing I hate more than ugly, it’s complicated.
Clearly, we need a comment management solution that is not only stylish, but also simple enough that anyone can execute it.
Don’t be rude… Address your commenters directly!
When you’re out in public and somebody asks you a question, do you:
- Address everyone in the surrounding area with your response, or…
- Answer them directly
Silly question, right? Well, dialogue on the Web is no different, yet you often see Webmasters responding to comments without addressing the person who initially asked the question. And even in those cases where Webmasters do include the name of the addressee, the resulting styling usually leaves something to be desired.
Fortunately, WordPress (and just about every other CMS on the planet) contains comment ID numbers1, which allow you to link directly to any comment you like. When you respond to people’s questions, you should use this ID to link the commenter’s name to their original question.
From a usability standpoint, this is excellent because it leads readers down a direct path that will help them follow the conversation. Plus, it eliminates the incredibly annoying need to scroll through a long list of comments while looking for the original question.
Check out how this works by looking at a live example of an interactively-linked comment.
A little style makes everything better
Alright, now that you know how to address your readers, you need to add a bit of style to those comment links. However, due to the nature of comments on blogs, there are a couple of design constraints that we’ll need to work with in order to get the most effective, least confusing result.
- The links to commenters should not clash with regular links that people sometimes post in comments; therefore, they must be styled differently (and possibly behave differently) than normal comment links.
- The name of the commenter to whom you’re linking should stand out visibly, but the styling should not dominate other important elements (like the name of the person leaving the response, for instance).
On my sample comment, notice how I’ve styled the names of the people I’m addressing in bold. Also, notice how I’ve italicized their names to help differentiate them from my name, which appears at the top of the comment.
Finally, if you mouse over one of the links, you’ll see that it behaves differently than regular links on this site. Again, the entire goal of these commenter links is to foster the conversation and improve usability, so that’s why I’ve taken a minimalist, simplistic approach to styling them.
Enough theory, already—let’s get stylin’. Here’s the CSS I’m using, but keep in mind that your mileage may vary due to the way your anchor tags (<a>) are styled by default.
a.comment_link, a.comment_link:visited {
color: #222;
text-decoration: none;
font-style: italic;
font-weight: bold;
}
a.comment_link:hover {
color: #222;
text-decoration: underline;
}
Once you’ve got those definitions in your stylesheet, all you have to do is put them to use in your comments. A sample of what you would actually write in your comment box to get the desired result might look something like this:
<a class="comment_link" href="comment permalink">Commenter</a>
Keep in mind that with some WordPress themes, the comment_link class may already be in use. If you find that’s the case, simply change it to something like commenter_link… You get the idea 
The Bottom Line
You can’t just do one or two things well and have a truly remarkable Web site. If you want to stand apart from the crowd, you need to leverage small details—like better comments, for instance—to place your site in a position to succeed.
Remember, your success on the Web depends on how effectively you can communicate with your audience, and anything you can do to improve that interaction is going to pay dividends down the road.
1 Well-constructed WordPress themes contain permalinks to each comment. If your theme doesn’t, please consider upgrading to something more robust. I’m partial to these WordPress themes, but that may just be me… ↑
47 Comments ↓
Hi Chris,
I wasn’t familiar with this technique, so thanks for pointing it out. Great example too.
A while back, I gave Brian’s threaded comments a shot, but didn’t like how it squeezed the comments further and further to the right. This also wasn’t helped when using the MyAvatar plugin to show faces of commenters, restricting the space further.
When I have a little extra time on my hands I’ll give this a shot.
Hope all’s well.
Good stuff, Chris… I usually address people with the standard @User method, but you’re right … it can get confusing if they have multiple comments. This method let’s you show them which comment you are about to address.
Very nice tip!
David — I had Brian’s Threaded Comments in mind when I came up with the idea for this post. From an ideological standpoint, the threaded comments are great, but in practice, they are a complete abomination.
The only way threaded comments could ever truly work (at least in a design sense) is if you had an infinitely extensible canvas. Obviously, that’s not possible on the Web, so in my opinion, threaded comments are not something that I consider practical.
Could it not work if it was only 1 level deep? Getting into multiple levels is stupid, for sure, but 1 level is doable, right?
Nathan
Nathan — If you can constrain threaded comments to one level deep, then I suppose it would be easy to craft styles to handle every possible scenario. Assuming that’s true, then yes, one level deep is doable.
However, one thing that immediately comes to mind is the overall usability and clarity of responses that are only one level deep…
What if a comment has a 3 responses (all at the same depth), but a user wants to respond to the second nested comment? Does he or she just use the convention I described here to indicate who he/she is responding to? If that were the case, then wouldn’t that type of style switching be confusing?
I feel like threaded comments do more to introduce confusion than anything else, but I’ll also be the first to admit that I carry a personal bias against them.
The Web is a top-to-bottom medium, and horizontal interruptions in the form of threaded comments are like nails on a chalkboard to me. Then again, I’m a hopeless perfectionist with strange obsessive compulsive tendencies about design
Thanks again for an awesome post Chris.
However, the technique mentioned above, just sounds pretty long - especially when you’ve got to reply to 10 commenters. You’ve gotta go back and forth copy and pasting hyperlinks, commenter names, the “a href” structure.
Any bits of advice for making the whole process speedier?
Adnan — If you knew how long it took me to write a normal post like this one, you’d probably quit blogging altogether. Good markup and good site maintenance take time and are a lot of work.
That said, I do know of one way to expedite the process of obtaining the links and putting them in your comments. If you’re using Firefox (and why wouldn’t you be?), you can right click on the comment permalink and choose “Copy Link Location.” Once you’ve done that, you can simply use the Paste command in your comment box, and voila! You get the hyperlink without having to leave the page or manually copy a URL.
Hey Chris… thanks for the helpful suggestions. I’ve been doing the same thing, minus the hyperlinks for a bit, but adding the hyperlinks will be a great addition for myself and the commenters.
Awesome - that’s what I was looking for
I know what you mean though about the site maintenance. I find it hard to keep up with only 900 odd subs, let alone the 4k odd you have. Was that one of the reasons for the long break?
Adnan — Frankly, I was a little burnt out and discouraged because I felt like the market cap on design was dropping due to all the free themes, images, tutorials, downloads, etc. that you can find all over the Web. With so much stuff available, trying to sell people on the basis of quality alone becomes much more difficult, especially when you’re dealing with what I like to call the “Napster generation”—people who think everything should be free for the taking.
Also, as someone who is keenly interested in SEO, watching the evolution of Google through 2007 has been extremely discouraging. It’s really hard to write articles on a topic like that if there is this huge, overriding negative sentiment, and as a result, I just didn’t write anything at all
Chris - great post!
Just wish you’d blog more… Thanks for stopping my blog and commenting there as well - I feel privileged that someone as busy as yourself has taken the time out to comment on my blog! 
I am in fact using the new 3 column layout - I already love it unconditionally, and this new comment trick will just make it even better!
Great post, Chris. This is one of the many posts that reflects why you stand out in a crowd. Keep up the great work!
Nice idea Chris! I’ve been waiting patiently for your next blog entry!
I’ve never thought about doing this before, but it’s actually a great idea. I need to check and see if this is possible with ExpressionEngine.
Deron — ExpressionEngine definitely has that capability… I believe you can see a live example over at Veerle’s fantastic site.
Chris: Wow, I’ve been to Veerle’s site many times and have never noticed that before. That’s great! Thanks.
It’s definitely a problem. Every man and his dog seem to think that they can design and release a whole lot of themes for people, but so many are just ordinary. They don’t have flare, they don’t have any SEO, they don’t have aesthetic balance or elegant coding, they don’t work in all major browsers properly.
I’m not sure if the Napster generation thing is entirely accurate. Sure, some people expect things to be free, but overall I think it’s more a matter of educating the ignorant. People think that it’s easy to create quality web designs, but it’s not.
David Airey writes quite a few posts that help educate people about logo design.
There was also a good series of UserFriendly comics that show exactly what I mean.
Chris,
Interesting that the Google happenings are getting you down. Many people are on the same boat these days, unfortunately.
Kris,
Thanks for mentioning my posts on logo design. I’m glad you think they’re helping some people.
Chris - it is so great to see you back into the swing of posting. Your content is always top-notch. Makes me proud to be a fellow GT alumni
Chris - You mentioned that you spent a great deal of time constructing the articles and such. What exactly do you go through and how long does each step take you ? Just curious…
Daniel — This post, for instance, required quite a bit of additional work (beyond just the writing) in order to get it ready for publishing. Here’s a sample of the things I had to do:
On top of all that, I’m a slow writer. I often rewrite, rearrange, and manipulate sections of text to make sure that everything flows in a manner that makes sense, and for me, this tends to be a time-consuming process.
I’m not really sure how long each step in the process takes, but this post took at least 4 solid hours of labor to produce.
That’s a really good in-dept analysis. Just what I was looking for :-D. Your style of writing is really clear, constructive and very well presented. It’s not too long, but it contains very good information as well. I cannot wait until my writing style develops ti something remotely close to that. Gotta keep on learning, reading and most of all, PRACTICING!
just an amateur comment…
hi Chris, I am using your PressRow theme on wordpress since a while now and still it strikes me once in a while how elegant it is
Great Job, thanks a lot
cheers
Someone I knew has managed to make a really, really elegant looking installation of Threaded Comments: http://chrasy.com/2007/11/the-layout-it-sparkles/
Bryce — Very nice indeed! It’s hard to compete with talented high school kids when it comes to detailed solutions for design issues… They’ve got enough free time to try and tackle just about any problem
Hey Chris,
A great addition to this would be using the target pseudo class. Then you could not only jump to the users comment, but highlight it as well.
Here’s an example.
Cheers
Wayde — That is an excellent tip. IE 6 users will miss out on all the fun, but the great thing is that the
targetpseudo class won’t negatively affect the way the layout renders in IE. So, even in the worst-case scenario, the net gain is 0, which is not often the case with cool UI embellishments such as this.I’ll definitely be toying with this in the near future. Thanks!
That is SUPERB. Helps me because most of the times when the same commentator has posted multiple comments it takes a few more comments for them to find what I’m replying to.
I’d especially like it more with Wayde Christie’s idea.
Thanks for the superb tip.
AN Hosting is $4.95/month now apparently - and they just doubled all of their specs
Brilliant, Customizing Comment is very creative idea.
This is a great and smart way to make a comments style.
I never thought one could portray professionalism through their comment style/ Thanks for enlightening me.
Indeed, ID number comments seem to be the best when it comes to addressing your comments to someone’s post.
Also the classical (name) one isn’t hurting, so…:) both ways are good.
I would love to add this sylish method of posting comments to my blog — I am not sure where to put the code you have given. Is there a step-by-step post that I have not seen. I am trying to “get” this stuff. Please be patient. Thanks in advance.
Michael
Michael — That code is CSS, which is a simple language that developers can use to style Web pages. In this case, you’d want to place the code from the post in your theme’s
style.cssfile.Unfortunately, I haven’t written a step-by-step post on the subject, but I highly recommend Stylin’ with CSS by Charles Wyke-Smith. The book provides an easy-to-understand overview of the interplay between CSS and HTML in Web development, and it has some really nice examples to boot.
Thanks for the tip — just to check what I’m doing — in the style.css file, I found lines 294 and 296 that have the same text as you do in your post — the only difference is changing the numbers from #333 to #222. Is that correct? Or, are your two lines in addition to the existing lines?
The other line of code which you say to put into the “Comment Box” — Where is the comment box located? Do you mean literally putting into the box when you are responding to a comment? I’m going to purchase the book you suggested.
Thanks again.
Michael
Michael — I had forgotten that I added the
.comment_linkclasses to Neoclassical 1.1! Because of this, you already have everything you need, and you won’t have to modify any code to get the results you’re after.Regarding the “comment box,” yes—I literally mean the box that you write in when you submit a comment on a Web site. Here’s a sample of the code I used to address you in this very comment:
Thanks again Chris — I’ll change the numbers back to #333 in the style.css file. I left a comment for you in the Neoclassical thread. But since I have your attention here, please forgive me for going a little off topic — Is there a way to have the left sidebar Nav and other widgets stay at the top left side. With my first two posts, the Nav and other widget dropped below the fold, below my first post. I appreciate your intentions for the white space, but for my purposes, I really would like to have the info riding in the upper left side. What can be done? I really want to stick with Neoclassical. I was a photographer for 27 years before real estate. I think this will be a great showcase for my work — at least the work that relates to Newport. I plan on creating a photo blog in a few months. Thanks in advance.
Michael
Michael — I just checked your site in Safari, Firefox, and IE6, and everything looked just fine. Usually, when you have a sidebar “drop” beneath the content, it means that you’ve tried to place an element into one of the columns that is too wide for that column.
As far as Neoclassical goes, the sidebars each have an available width of 190px, and the center column will allow for elements up to 425px wide. Whenever you include an image in your site, be sure that it isn’t too wide for the column that you’d like to place it in.
Yes - I am getting confirmation for other folks that it looks fine. It looks fine on my Firefox — But, on my machine running IE7, I’m getting the drop. It dropped after my first post. I have checked all widgets and YouTube - nothing over 190 or 425. Is there anything you suggest I check in IE7. It would be great if it looked good for me.
Thanks for the “Width” info.
Did you get my hint for a photo blog? I would use it as a “portfolio” site. I bet you could make a killer theme for this use. When you have spare time…
Whoops! I forgot to ask you one more question — Is there a way to drop the Navigation down just a little so I could either place the Plugoo (172×190) or contact info (About Me Widget) on the top left sidebar? I’m with you, I want to keep it clean. But, I think this space would be good for either of these two uses. What do you think?
I have to tell you how much I appreciate your help. At first, I felt overwhelmed by all of this. Now, it seems manageable. There is lots of help out there.
Michael
I looked at the source of your post (looked no further than the first post) and did not see any obvious problems. But, it occurred to me that it may be worth testing your situation with the popularity and ShareThis plugins disabled … both have their own style sheets and there could be something odd with one of them. Just a thought.
Comments style - cool.
I’ve always like Veerle’s site and love a good blockquote.
Hi Chris,
I’m sure I’ve said it before, but I’ll say it again. You’re my blogging hero.
Now that that’s out of the way, I want to know what’s up with the Comments styling in Cutline.
I use the Cutline theme for my latest blog and I’m pretty happy with it. However, I’ve noticed that the paragraphs appear as double spaced when you’re writing comments, and single spaced once the comments are approved.
I hate the way this looks. So where’s the problem: with the actual Cutline theme, or with my blog in particular? Has anyone else ever mentioned this about the Comments in Cutline?
I’d email you privately, but I got 4 hours of sleep last night (boo hoo) and can’t find a contact page. Help me out, buddy! Thank you.
Dina — I have no idea what’s going on with Cutline, as I sold the theme in early 2007. Since then, I’ve gone on to produce a few more WordPress themes, but I highly recommend checking out Thesis, which is by far my best work in the theme department.
I’m fanatical about precise typographical design, so you won’t find any weird spacing issues or out-of-place elements with Thesis.
Hi, Chris. Thanks for your speedy reply. It figures there’s something amiss with Cutline now that it’s out of your hands. Based on what I keep seeing on your blog, I’d expect nothing less than perfection from you.
I had no idea people could *sell* open source Wordpress themes. Alas, some things just continue to be a mystery. Thanks for the info.
Hi, Chris — how are you implementing the rotating “shout out” icons? Am assuming this requires access to PHP code and not just the stylesheet?
Hoot and/or Holler ↓