Over the last two days I’ve been finding my way around the wordpress menus and taking css styling one step at a time. Yesterday, I took on the comments section. Initially it didn’t seem very daunting, but anyone who has styled an html form would have told me otherwise. After a few minutes of firebug, I quickly wised up and put some extra thought into it.
For comparison’s sake, this is what I was styling.
Not too much to work with–perfect. I set to it, and after a few hours of designing and coding, this is what I came up with:
My main goal with this design is to clearly separate authors from their content in order to allow users to quickly read through each of the information types. Most users peruse the comments section to read the comments themselves–not the authors’ names. Users in the UX community on the other hand may be more interested to see which of their peers have commented. By splitting authors and users, people can focus on the type of information that matters to them.
To achieve this goal I leveraged good layout principles and incorporated user workflow in the design. I also tried to steer clear of extraneous decoration/chrome–a crutch that I tend to fall back on. I start by aligning items and text along a 1/3 page margin to create a visual line between the authors and comments. With enough padding between the two, I feel this enough to separate the two information types. From there, I align actionable items (such as the Post Comment button) to the right so as to preserve the common workflow of left to right.
At this point the page is coming together, although I still have a fair amount of text on the page for such a simple form. People don’t need verbose instructions to fill out a comment! The biggest offender is a two-line instruction on what kind of HTML was allowed in a comment, while the separate labels for the name, email, and website fields aren’t too flattering either. To take care of the HTML instructions, I created a tooltip class (which uses CSS3 for animation) and converted the instructions to the new format. I then downplayed the field labels by converting them to placeholders for the fields.
Finally, the fun part: adding character. I’ve seen very unique treatments applied to comments on amazing sites such as css-tricks, but I’m just not as awesome as Chris Coyier–so how about a simple talk bubble? And let’s not use images. The main part of the bubble is simple enough: add a gratuitous border radius. Easy. Now, what makes the effect complete is the little arrow that points to the author. To generate it, I used pseudo selectors and the css shapes technique from css-tricks. This leaves one last problem: there’s no drop shadow on the arrow, and box-shadow doesn’t work with the shape technique. What’s worse is that google has no answers. In the end, I decided to use :before and :after to generate two shapes, make one darker, and have it just peek out from behind the lighter one to create a believable illusion.
All that was left after this was applying just the smallest bit of chrome to make the comment section fit in with the hovering, 3d theme of the website.