Beast-Blog.com
Small Comment Boxes Need to Grow Up

Call it a pet peeve if you like, but the small comment textareas I see on some blogs are far too small for proper writing and editing. I feel a size of 350 by 150 pixels is about the absolute smallest I care to write in unless I have only a few remarks. Anything smaller is really too difficult to use if I am composing a more in-depth response. A too-small comments box restricts me to four options: to forgo commenting altogether; to struggle through it; to hold back on my comment; or to compose it in a separate program then copy and paste it into the itty-bitty textarea provided by the blogger. I actually prefer none of these.

Responding to a blog post shouldn’t be anything like writing a letter to your lover on a postage stamp. So, please enlarge yours if you’re guilty as charged. If you allow comments, it never hurts to make it easy to do. For what it’s worth, here are a few of my other thoughts about blog comment textareas (these apply to contact form and other textareas as well).

Give ‘em Dimensions

As noted, I find it’s a good idea to give a textarea dimensions in some unit of measure: pixels (px), percent (%), or ems (em). And to ensure the textarea is a usable size if styles aren’t supported, it’s also a good idea to supply measurement values to row and column attributes directly to the textarea element. Example:

<!--Shown bare-bones without all attributes needed-->
  <textarea rows="12" cols="40"></textarea>

Based on the layout type, you’d apply measurements using the units in the paragraph above, as follows:

Fluid or liquid

If you have a fluid or liquid site you’d use percent, but do apply a max-width in your style sheet, or constrain it by way of giving it a percentage of a constrained container. This will make it easier to use on wider monitors with higher resolutions. You can also use pixels on a fluid site but it probably wouldn’t be preferred.

Elastic

If you have an elastic site you’ll probably want to set the width in ems or percent solely for initial styling. A textarea will enlarge as text (elastically) by default so setting the width isn’t always necessary on elastic sites. You can also use pixels on an elastic site but it probably wouldn’t be preferred.

Fixed-width

And if the site is fixed, fix the width, but make it reasonably large enough to accommodate easy composition! You can also use percent on a fixed-width site, that would be fine, but you’ll probably want to avoid ems.

Note: If you’re not familiar with the layouts above, see CSS Layouts: The Fixed. The Fluid. The Elastic.

Offer Styled Text

The default type-face for a textarea is typically a monospace font like “Courier New” (Windows). Often when I encounter a default monospace font it is small. Too small. Browser-set 12 point text is offered, instead of 16 point as applied to other page text (and I don’t want to change my defaults because other sites wouldn’t be right). If the textarea text is styled to match the body element’s text that should be all that’s needed — it’ll be easier to see in some cases, and I’d say it’s more aesthetically pleasing as well. All it takes is a simple style sheet entry to set the font face and size. Please don’t make the text too big, though, and while you’re at it, you may as well treat input and select elements, too (instead of the default Arial or whatever your system applies). Like this:

textarea, input, select {
  font : 100% 'trebuchet ms', 'lucida sans', 'palatino sans', sans-serif;
}

Focus a Little

If you’re a mouse user you’ll notice a hover state over my comments textarea below, and if you use a keyboard you’ll notice the same changes if you land on it. The hover/focus changes I offer should be about it. Anything beyond this may be overkill. This is especially true on hover. (Over-styling form elements was bad habit of mine that I’m slowly breaking out of).

And while I’m confessing, speaking of overkill, on my “BeastBlog v1.1” theme I styled the textarea so it would expand its height on focus. This ended up being a big usability issue — or at least it was to me. It was one of those “cool” ideas that looked good on paper, but ended up being a mistake.

This isn’t, however, a tutorial about styling form elements, so if you want to learn more about that subject, here are a few articles on it:

• Styling form controls by Roger Johansson
• Styling even more form controls by Roger Johansson
• Prettier Accessible Forms by Nick Rigby for A List Apart
• CSS Styling of Forms by Stu Nicholls
• Legends of Style by John Faulds

Now that I got that off my chest, I’ll wrap this up with what I think is a suitable example of a blog comments textarea worthy of your comments!

Filed under Wicked Wild Web, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

How Many Buttons Do You Use? »

Web 2.0h, that’s what it is »

The Triple Box Method »