Whether you design web sites or just like to tweak themes for your WordPress blog, you’re making design decisions all the time (even if you’re just using a theme out-of-the-box, you chose it). This list of questions isn’t meant as a guide to good design, but you might want to have a look at your site and see if any of these apply.
Here, in no particular order, are some of my design pet peeves:
1. Why are fonts so small?
Designers are fond of small fonts, but when you have to squint to read a site intended for a more general audience, you have to wonder what the designer was thinking. Take Good Magazine, for example (pictured below, actual size). I’m a fan of Good, which in most respects is great. I subscribe. The print magazine is beautifully designed and the web site has a lot going for it, too—but it’s virtually unreadable without zooming the text. The body copy is 11px and the sidebar text is 10px, with no breathing space in the line-height.
(Now that I’m done knocking the fonts, subscribe to Good. Really. It’s a great magazine and every penny of your subscription fee is donated to a worthy cause of your choice.)
You should be able to read a site without pressing your nose against your monitor. That probably means at least 12px fonts (which I’m using here, and which is probably too small for most readers), and leading of 140 or 150%.
2. Why are fonts so big?
You shouldn’t have to squint to read web sites, but that doesn’t mean they need to be readable from across the room. Take the Stripped theme for WordPress designed by Ashley Morgan (who bought Upstart Blogger from me in December). The design works because there’s ample white space and nothing extraneous, but do the post titles really need to be 81px? I can read them from down the hall.
Selectively making some text larger gives your design hierarchy; it cuts a path through your page and guides the eye to what is most important. But there are other ways to make elements stand out (using caps, different colors, or a heavier font weight, as examples).
Using large fonts, LIKE WRITING EMAILS IN ALL CAPS, is a bit like shouting.
Unless your site is geared toward the visually impaired, avoid inflating fonts indiscriminately.
3. What’s with the black backgrounds?
Black text on a white background is arguably more readable than white on black (it also tends to look more professional), though I know some people prefer white text on a black background. But I’ve also seen many sites with black backgrounds and text in any number of Dr. Suess colors. Even if there’s sufficient contrast, readability usually suffers and, IMHO, most dark sites also look like hell. Worse, navigating from a site with a black background to a site with a white background makes me want to have a seizure.
If you must use a black background, take note of these tips from Mark Boulton:
When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.
Here’s a site where the black background works: Griffin & Hoxie (pictured below; I still find this site tiring to read, but the writing is so outstanding I’m willing to suffer). The design works as well as it does because the background uses subtle gradients, the fonts are clean and consistent, and the text floats on a faint drop shadow.
grab this bookmarklet (drag it to your browser’s toolbar), which makes it more readable (via 456 Berea Street).
4. Why are your colors so garish?
Web 2.0 design is all green eggs and ham. Now, I know color is largely about taste (also about usability and accessibility), so any example I provide is bound to provoke debate. But I don’t think web sites should look like children’s books. Unless they’re designed for children.
5. Why is everything in 3-D?
Web 2.0 sites are fond of three dimensions. Perfectly fine for usability: if you can click or drag it, giving an object some depth is appropriate. Otherwise, your web site shouldn’t look like it was made from extruded plastic.
This one goes with No. 4, since both are a byproduct of over zealous Web 2.0 designers. For tips on how to do Web 2.0 design right (if you like this style), see the Web 2.0 how-to design guide.
Oh, and while it might be fine in Second Life, please don’t design your site to look like everything is sitting on a desktop, or in room, or whatever.
6. Why is there so little white space?
You don’t need to pack every pixel with ads and galleries and Twitter updates and news feeds and comments and blogrolls and… Sites like The Unofficial Apple Weblog are crammed with useful information, but is it really necessary to list the categories—all 70-something of them—on the sidebar of every page? I love TUAW, but I find the sidebar overwhelming.
Test your site in Crazy Egg. If you aren’t getting many clicks in a particular section of your site, get rid of it. Or, move it to a different page (for example, move your categories to an Archives page). Give your content some room to breathe. Leave a little empty space in your design for the eye to rest.
7. What’s with all the widgets?
Too many sites look like they’ve been spending too much time on Widgetbox. It’s bad enough to fill your site with clutter (see No. 5 above), but half the time these widgets don’t work and they’re slow to load. And widgets suffer from an additional problem: a high interface to content ratio. If you want to add a news feed to your site, don’t use a widget like this (the logo probably takes up 25% of the space):
Instead, use something like SimplePie to suck the feed into your site and style it to match.
Too many widgets on your pages is like littering your front lawn with political signs and pink flamingos. Be selective or move them to a single page (for example, put your Twitter widget on your About page).
8. Why are you displaying full posts on your home page?
I don’t have anything against scrolling or scanning, but putting your full posts on an endlessly unraveling home page makes me dizzy. I’d much rather scan a shorter list of titles with short, descriptive excerpts than hunt through content I’m not interested in. TAUW does it. I love Lorelle, and Lorelle on WordPress is a must read for any WordPresser, but I don’t find it easy to peruse. And it’s not just about readability; too many posts on a page makes your site slow to load, especially if there are lots of images.
Here’s one site where this sort of works: 3quarksdaily. But it works because the posts themselves are, for the most part, excerpts from other publications.
You home page should look like the front of a house: a door and a few windows. Don’t turn your house inside out and display all the rooms on the facade.
9. Why do you resize my browser?
There are too many examples of this on the web, mostly the sites of designers or photographers. I get it. You want to show off your work in the best possible way. But you wouldn’t grab the steering wheel when someone else is driving and you shouldn’t grab someone’s browser either.
If you want to offer a fullscreen display, at least let your visitors know what to expect. Better yet, give them a choice.
Here’s a site that gets it right: Richard Serra at MoMA.
10. Why are you still designing entire sites in Flash?
I don’t have anything against Flash, or flashy sites. But you’re designing for fellow designers. If your site takes more than 10 seconds to load, I’m out of there.
I’m not saying that Flash can’t work for some sites, but your site better be fast. This Levi’s site is almost fast enough, but I still didn’t get past the first few screens. And this one for the Hyundai SantaFe is stunning, but who has time for every new screen to load?
I’d rather surf on my iPhone.