Stop me if you've heard this one before...

So I mentioned some time ago that I had kicked off this massive redesign effort to make all my various websites cleaner and more user-friendly. As of this morning, I am mostly done with that effort:

I've rewritten my personal website to be XHTML 1.0 Strict compliant and use CSS positioning for page layout. Same thing for my blog templates.

In an effort to make my code cleaner and easier to maintain, I did some stylesheet reorganizing, and commented the hell out of my HTML code (particularly by marking closing tags with the ID or class of their opening tags, where applicable).

Finally and most importantly, though, I paid attention to three things. Readability, readability, and readability. This is pretty important in and of itself, but especially for my websites, since most of my content tends to be written and rather long-winded. To that end, I paid particular care to font choices. It basically came down to two choices: Verdana for sans-serif fonts, and Georgia for serif fonts. Both are supremely readable and very comfortable to read for long periods of time. Both are, moreover, recommended as good on-screen font choices. Trebuchet, FYI, is another good sans-serif one.

Speaking of fonts, I'd like to note here that font size is another important factor. I rarely use fonts smaller than 9pt, and will usually use 10pt for maximum readability. I admit that in the past I've liked to use smaller fonts for aesthetic reasons, but the amount of time I spend reading online content (and, I cringe to say, my ever-increasing age) has skewed my opinion in favor of what's easiest to read.

Another important factor in content readability is, IMO, page width. You never want to keep lengthy written content too wide. It makes it too easy for your eyes to wander away and lose your place in the text. You'll notice that most (well, well-designed ones, anyway) newspaper sites and blogs keep the content width down to around 500 pixels. You'll notice that in all my blog designs, the maximum page width never exceeds 800px, and the actual content width stays somewhere between 400 and 500px.

Speaking of dimension, let's not forget line height. Extending line height by as little as 20-25% can make a huge readability difference in long pieces of text. Keeping line height to the standard 1 em can make text look too cramped and make it very difficult to read. To that end, I've made sure that all my blog templates, like Blogger's default templates, use a content line height of 1.1-1.25em.

I guess if any of you readers are web design professionals, you know most of this from various books you've read, or just from experience. I'm more of a hobbyist, and I'm sort of putting this together as I go along. So even if you think it goes without saying, I'd like to take the time to mention it. UI design on the web is still, even with ever-increasing attention paid to improving the user experience, on the whole appallingly bad. So here's me doing my little bit to make the (online) world a better place.