Comment styling is an often-overlooked part of blog design. After all, they’re at the bottom of the page, not seen until visitors already have an impression of your site, and they’re really there for function more than anything else. Why invest a lot of time in styling them and making them really stand out?

But good comment styling can set your designs apart from your competition. Taking the time to design your comments, and your comment form, can make a huge impression on your regular visitors. It subconsciously implies you care about their opinion and want them to engage in discussion on your site. Below you’ll find some best practices and examples of creating a beautiful commenting system on your next blog design.

Styling Comment Views

How you style your comments can have a huge impact on the overall perception visitors have of your blog. It shows that you care enough about what your readers have to say to take the time to show off their remarks in a stylish and user-friendly way.

Threaded View or Flat View?

Whether to have threaded comments or simply order them chronologically is always a tough question. There are a few things to consider when trying to decide. First, if you want your visitors to actively discuss your posts with each other, then threaded comments go a long way toward promoting that, especially if you have a high volume of comments.

FreelanceSwitch uses a threaded comment format.

On the other hand, threaded comments are sometimes abused. Commenters might respond to the first comment on the thread with something completely unrelated, just to make their comment show up closer to the top of the comments (of course, you can always moderate these to prevent this, but it’s an extra layer of work for the admin). If you’re more interested in having commenters reply directly to the article and not to each other, then having flat comments makes more sense.

Both options come with their own pros and cons, so you really have to weigh the benefits and disadvantages of each one before making a decision.

Best Practices

Here are some tips for creating more effective comment designs.

1. Emphasize Author Comments
   When designing your comments, you should do something to make the author or admin comments stand out from the others on the page. This might be by adding an icon to the comment or changing the background color. This type of styling makes it easier for commenters to see replies directly from the author, and can help to increase discussion.
   
2. Include a Gravatar
   People like to see other people’s faces when they’re having a discussion. By enabling Gravatars, you automate this process and encourage discussion. Bonus points: Use a custom Gravatar image for those who don’t have their own, rather than the standard geometric images or monsters.
   
3. Separate Comments from Trackbacks
   Trackbacks really aren’t part of the discussion (at least not the part taking place on your blog), and shouldn’t be included inline with other comments. Give trackbacks their own special area, either above (if you usually get more comments than trackbacks) or below all the other comments (if you generally get more trackbacks than comments).
4. Use Design Elements That Make Sense
   When styling your comments, think of design elements that make sense in regards to the type of content. Speech bubbles, quotation marks, simple borders, and alternating background colors all enhance your comments and improve readability.
   
5. Paginate Your Comments
   If you routinely get more than 20 or 30 comments on your blog, consider paginating those comments to improve your page load times. Paginated comments can also make it appear you have more comments than you do, as navigating to new pages almost always makes people feel like there’s more content.
6. Make It Possible to Link Directly to Individual Comments
   Including an anchor link to each individual comment makes it easier for visitors to share their comment with others. If someone is having a particularly good discussion in the comments on your blog, they might want to invite others to join in, and having a direct link to their last comment, or the thread they’re commenting in, makes that easier.
   

Examples: Neat Comment Views

Rockbeatspaper

Baekdal.com

Subtraction.com

GoodBytes.be

Squarespace

BlogLESS

Snook.ca

Particletree

The Hickensian, Hicksdesign

Dezinerfolio

Designing Comment Forms

Your comment form has to be user-friendly and encourage visitors to get involved in the discussion happening on your blog. While good comment form design alone probably won’t get you tons of comments overnight, a poorly designed form can definitely prevent your readers from commenting.

Considerations and Best Practices

There are a lot of things to consider when designing your comment form, from whether to include extra spam precautions to how to handle replies. Below are some tips for making those decisions, as well as some others.

1. Positioning Your Comment Form
   This is a very important consideration when designing your overall commenting system. Do you want your comment form to be directly under the post itself, or at the end of the comments? The best way to decide is to ask yourself whether you want commenters to actively discuss the post with each other or just focus their comments on the post itself. If it’s the first option, then place your comment form at the end of the comments. If it’s the latter, then place it directly below the post, above the comments.
2. Spam Prevention
   Even if you use a spam-prevention utility like Akismet, adding a bit of spam protection directly to your form can further reduce the amount of spam you get. There are two common options: one is a captcha, which can be difficult for many users to decipher (though some captcha systems are markedly better than others); the other is a question-based system, often using a simple math equation commenters have to answer before their comment will be submitted.
   
3. Requiring an Account or Allowing Alternate Logins
   If you get a particularly high volume of spam comments, or if you have issues with abusive comments, then requiring commenters to have an account can be beneficial. Other options include letting users log in with another account they have, such as Twitter, Facebook Connect, or OpenID. Requiring a login makes people feel more accountable for the comments they leave, which can mean fewer abusive or spam comments. Of course, requiring a login can also reduce the number of comments you get, as some people just won’t bother.
   
4. Handling Replies
   If you’re going to enable your visitors to reply directly to other commenters, it’s important to decide whether you want an inline comment form that appears when a commenter hits reply, or if you want it to just take them to the comment form already on the page. Either one is fine, though the first option is sometimes less confusing (as you know that you’re definitely replying to a particular post, instead of commenting in general).
5. Positioning Form Fields
   How you position and label the fields within your comment form can have a big impact on the usability of that form. Usability Post has a great article that covers this more in-depth.
   
6. Form Instructions
   Make it easy for your commenters to see which fields on your comment form they’re required to fill out. Also make it clear to them that things like their email address won’t be made public.
   
7. Validation
   Your comment form needs to indicate to your commenter that their comment has been successfully posted, even if you hold all or some comments for moderation. If you do moderate comments, make sure you indicate that the comment will appear once it has passed moderation, so your visitor doesn’t end up posting multiple comments, thinking the first one didn’t go through.
8. Provide a Preview
   Letting your commenters preview their post before submitting is a nice usability feature that many blogs overlook. This can also mean your blog gets higher-quality comments, as commenters are more likely to read through and edit their comments before posting.
   

Examples: Comment Forms

Internet Zillionaire

Authentic Boredom

FreelanceSwitch

Oaktree Creative

BrianYerkes.com

Abduzeedo

WPDesigner.com

Designworkplan

Doc4 Advertising Agency

Mac Appstorm

Productivedreams.com

Sources & Resources

• Blog Comments Design Considerations – JankoAtWarpSpeed
• 30 Must See Comment Designs for Web Designers – Blog Design Blog
• 77 Inspiring Blog Comment Form Designs – 1st Web Designer
• Design Analysis: Comments – Snook.ca
• Interface Design Inspiration: 36 Clean Comment Form Designs – Dzine Blog
• 15 Nice WordPress Comment Form Designs – WPCrowd
• Styling Your WordPress Comments – Darren Hoyt Dot Com
• Top 10 Tutorials for Working with WordPress Comments – DesignM.ag
• Separating Trackbacks from Comments – Pro Blog Design
• Elements of Design – SmileyCat, specifically the Blog Comments and Blog Comment Forms sections

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Related Contents	Sponsors
BannerSnack Flash Banner Creator Giveaway: Comment & Win! Wordpress plugin: Threaded Comments Christmas Giveaway: (10x) ElegantThemes Premium Wordpress Theme Memberships How to Separate Comments and Trackbacks [Wordpress Tips] Facelift Image Replacement – Replace Boring Text With Any Font Types
Posted by hongkiat in Inspiration , at 12.10.09 Tags: beautiful, box, comment, Design, example, form