Everyone wants a well-designed Web site. But what, exactly, makes a Web site well-designed? Conversations on the subject often plunge into a dialogue akin to Who’s on First:
Q: Say, what’s the key to Web design?
A: Usability. It’s gotta be functional, man.
Q: Yeah sure, but what makes a Web site functional?
A. Jesus! You’re dense. It just means that it’s easy to use.
Round and round in circles. And yet: We all know a good design when we see it. Which reveals an essential truth about good Web design: It’s a conservative discipline, in crucial ways. A good design satisfies the visitors expectations of what a Web site should be, with just the right amount of flair. If you remake the rules, you defeat yourself.
Looks nice, but the problem is that the only clickable links are teeny tiny–and the images, which you’d think would be linked, aren’t.
Here’s a more subtle example, provided by E-Consultancy: The recent redesign of the Los Angeles Times Web site. In what’s otherwise a solid piece of navigational clarity, you might notice one subtle flaw. Can you spot it?
That’s right: Where they hell are the hyperlinks?! They’re everywhere, but you’d never know that, since the designers, in an apparent attempt at cleanliness, have made them basically invisible.
Like I said, a good design conforms to certain expectations. What the LA Times actually does right is hew to the basic principals guiding 90% of all the regularly updated Web sites you see today: The overarching idea is to organize information into columns, oriented around how quickly the information in those columns flows. Fast moving stuff goes in the center. Slower stuff, like columnist entries or meta-information about what’s popular goes on the rails. Slate, The New York Times, Newsweek–countless others all offer variations on that approach. And it all suggests a basic principle: For clarity, you can muddle the velocity at which each of the sections turnover. Otherwise, you’re frying people’s brains when they try to track your site’s changes.
But lets drill down one more level. What makes a site readable? That’s more complicated. And basically, what you’d have to conclude is that readabiliy is about sticking to some basic sensibilities about proportion and weighting. Crap! I’ve done it again, and offered a definition that borders on circular.
There’s a smarter way. Smashing Magazine, in the quest to figure out what readability consists of, took a brute force approach. They sampled 50 Web sites–ranging from big-time news outlets like Newsweek and The New York Times–to well-known type Web sites (which should known their stuff). What they produced is a massive survey that yields some basic guidelines for type layout on the Web.
They began with a list of crucial questions:
1. How popular are serif and sans-serif typefaces in body copy and headlines?
2. Which fonts are used most frequently?
3. What is the average font size?
4. What is the average ratio between the font size of headlines and body copy?
5. What is the average line height of body copy?
6. What is the average ratio between line height and font size in body copy?
7. What is the average ratio between line height and line length in body copy?
8. What is the average amount of spacing between paragraphs?
9. What is the average ratio of paragraph spacing to line height in body copy?
10. How are links styled?11. How many characters per line are common in body copy?
12. How often are links underlined?
13. How often is font replacement (sIFR, etc.) used?
And here’s what they found:
1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular.
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.
Wonky stuff, no doubt. But we’ve never seen a more concrete definition of what it means when we float around airy concepts like “usability” or “readability.” The point being: Don’t go crazy. Think about it like this: You’re going to a black tie event. You don’t know who’ll be there. Dress conservative. Leave the spice to the accessories, and the conversation.