Small Comment Boxes Need to Grow Up

Posted October 27th, 2007 by Mike Cherim

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:

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! ;)


9 Responses to: “Small Comment Boxes Need to Grow Up”

  1. Arjan responds:
    Posted: October 27th, 2007 at 1:42 pm

    Great you mention this. I absolutely go away if I haven’t space to ‘breath’. The Safari developers hated it so much, they built in an resizer for textareas. Maybe an addition, but it could be handy for some blogs to include an JavaScript option to make the comment field larger: it would increase the usability, and that’s where JavaScript really is about.

  2. Megan McDermott responds:
    Posted: October 29th, 2007 at 3:24 pm

    Hey, you stole my blog post idea! Just joking :) I’ll get araound to writing about this eventually :)

    Tiny textareas bother me most when they’re on feedback pages. If you really want my feedback, why is the box so small? IMO the size of the box tells the user how much you expect them to write. I have this big box here, and I feel comfortable writing as much as I want. When I encounter small text inputs I get the impression that the developer just doesn’t want to hear what I have to say.

  3. Guilherme Z├╝hlke O'Connor responds:
    Posted: October 29th, 2007 at 9:02 pm

    I make your words mine. When I designed my theme I did wanted a big enough comment box and I did it bigger than usual. I also added some padding inside the TEXTAREA, after all, if a gutter is good for reading, it is also good for writing.

    I have recently decided to make it even bigger, after reading your post I just had to do it.

  4. Elliott Cross responds:
    Posted: October 30th, 2007 at 9:38 am

    Great post Mike! I also find it easier to write in a bigger comment or text input box. The small ones are tough to see and follow as the text wraps to quickly.

    Now, if I
    could get
    people to
    quit hitting
    the return
    because they
    think they
    have to…
    :)

  5. JackP responds:
    Posted: October 30th, 2007 at 10:29 am

    @Elliott:

    Like a haiku poem
    Your patterned comment flows down
    to the pages end

  6. maddie responds:
    Posted: November 1st, 2007 at 5:31 am

    hahahahaha!
    get over it their just comment boxes.
    it really isn’t that much of a big deal as to write a whole blog page about it.

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.