Blog Usability: We can do better, folks...

I've been kicking this topic around in my mind for several weeks. It first struck me after Bryan's ill-fated redesign of Arguing With Signposts (complete with proclamation that he knew it didn't work with Netscape/Mozilla, but, frankly, he didn't care — although I might be projecting just a tad; that's how it came across to this Netscape 7.0 user, anyway). But, to Bryan's credit, his motives were pure (an attempt to move to a standards-compliant, CSS/XHTML-valid layout that would make Zeldman proud), and he did finally relent and move back to a layout that was cross-browser viewable.

Then last night, just before shutting down, I dropped by Rachel Lucas' blog and found her post about "10 curseworthy things." Part of #7 struck a nerve, when she writes this about Andrew Sullivan's blog: "I wouldn't know [if it's any good] because I don't read blogs with white type on dark backgrounds." Exactly!

These two examples touch on an issue that hasn't really been kicked around in the blogosphere, at least not that I can find. It's the issue of making a blog visitor-friendly.

I realize that there's a huge difference between commercial websites designed to attract and serve paying customers, and individual blogs that rightly are extensions of the authors' personalities. But — and here comes some navel-gazing, Bryan — I suspect that the majority of bloggers really want people to visit their sites and read what they've written. I suspect that the majority of bloggers don't really want to make it hard for people to read what they've written. And, further, I suspect that many bloggers have never given a second thought as to whether their sites are hard to read or not. That's a shame; it's bad for the readers and it's bad for the bloggers.

[Now, if you view your blog as an avant-garde experiment in radical web design, and you have the 'tude to reject the notion that readers are important, you can skip the rest of this post...assuming that you even made it this far. Go forth and be rad; you are blessed in your own special way, and I care not to encroach on your territory. This blogosphere is big enough for the both of us.]

As a public service, I hereby present some usability problems that are common amongst blogs, and I further will present examples of good and, um, not-so-good so you'll know what I'm talking about. Keep in mind that I'm using as examples blogs whose content and authors I have great respect for, even if I have some quibbles with some of their layout decisions.

  • Font size that's too small - This is soooo easy to fix. If you're using Cascading Style Sheets (and why wouldn't you?), don't specify a font-size for your body text. Let the visitor's browser preferences rule; your visitor, after all, knows better than you what size font best fits his or her monitor resolution and corrective lens prescription. But if you just have to specify a font-size — if you just can't allow your visitor that kind of unfettered license — pick a big size. Instapundit uses 12 pixel Verdana; Roger Simon goes even bigger, with 14px Verdana. The text on these blogs is quite legible, regardless of your monitor's resolution (mine is a hefty 1280x1024). On the flip side are sites like Outside the Beltway, which specifies a body text of small and a blockquote text (generally, the quote in a box within a given post) of extra-small. When you couple that specification with a serif font (he uses Palatino/Georgia) which is less legible on a computer screen than a sans-serif, it makes for tough reading. Depending on the time of day, I simply can't read OTB without bumping my browser text-size setting a couple of notches. Even Lileks — whom I never fail to read, however squint-eyedly — needs to get with the program. Mr. Lileks gets points for using Adobe GoLive as his layout program, but loses them and more for continuing to use the font-size tag (oh, the shame of it all!) instead of using CSS to handle that chore. And Trebuchet MS, his font of choice (and mine), is smallish to begin with.

  • Page width that's too wide - There's a really good reason newspapers have, since the dawn of time, printed their stories in narrow columns: they're very easy to read. The eye doesn't struggle to find the beginning of the next line. Website text should follow suit. The aforementioned blog of Jeffrey Zeldman is a fine example of doing this right, as is fellow Texan Meryl Evans' blog.(I'll also give props to Arguing with Signposts at this point. But I can let his recent redesign disaster pass without this observation: that short-lived layout provided posts that were approximately 200 pixels wide in my screen. Narrow is good...but this was a little too much of a good thing!) Less good on this point is USS Clueless; I have a hard enough time keeping up with Den Beste intellectually without also getting lost in the text. I'd also find Meryl Yourish's posts easier to read if they were in a narrower column.

  • Weird-colored or distractingly-patterned backgrounds - This isn't really much of a problem nowadays. We've made enough fun of those awful 90s sites that this isn't a common design flaw any longer. Nevertheless... Most (but not everyone) people find dark text on light backgrounds to be the most legible and readable combination, and that doesn't necessarily mean black-on-white. The Gazette uses a dark gray text on a white background. Daring Fireball uses an interesting white-text-on-dark-gray background layout that is pretty effective, so I'm not dogmatic on this point. But I really have a hard time reading Signposts, with its white-on-black approach (and the irony of the goth image of an unabashedly Christian website is not lost on me). And, of course, there's Rachel's fave-not, Andrew Sullivan.

  • Posts that load after images and ads - This nit borders on anal, but I've noticed a few blogs that load very slowly, and what I see first — and sometimes for a long time — is just the ads, graphic links, blogroll and other non-post items. This is primarily because the blog layout has all of those items in the left column, where they load first. A good design rule-of-thumb is to give your reader something to read while the rest of your page loads. Junk Yard Blog is a noticeable example of this phenomenon, but I chalk that up to the slow delivery of BlogSplat. I'm not suggesting that you re-work your layout to put all your miscellany on the right column, like Howard Owens has done — but it's not a bad idea. It will also make your blog more accessible to disabled visitors who are using assistive technology to view your site. (If this aspect of the issue bothers you, but you want to keep the left column stuff, think about providing a hidden "jump to main text" link at the very top of your page. Your disabled visitors will thank you.)

Gosh, I don't know about you, but I feel better! I realize that reasonable people may differ on some of these admittedly subjective issues, and that's fine. I even realize that the Gazette isn't squeaky-clean in all these areas. I really just wanted to bring them up for the benefit of those who have never even thought about the subject of a user-friendly blog.

And, I'm going to leave the subject of post quality to folks like Den Beste. There are some windmills at which I don't care to tilt!

Comments

Good post, and I notice that you've worked on the usability of this comments pop-up by increasing the size of the input boxes!

Posted by: Michael Heraghty at September 30, 2003 12:19 PM

Yes, and I even posted about the comments box resizing on 07 July! It's sort of a pet peeve of mine. Very few people seem to pay attention to it, unfortunately.

Thanks for stopping by...

Posted by: Eric at September 30, 2003 12:45 PM
Post a comment [Take your time...we're in no hurry.]









Remember personal info?