Want More Professional Comments? Just Add Style!

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:

1. They are ugly as sin and a nightmare to style.
2. 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 numbers¹, 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 (edit: link removed).

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.

1. 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.
2. 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 (edit: link removed), 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.