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.
If you must read a site with a black background, grab this bookmarklet (drag it to your browser’s toolbar), which makes it more readable (via 456 Berea Street). 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. 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. 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. 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). 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. 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. 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.
4. Why are your colors so garish?
5. Why is everything in 3-D?
6. Why is there so little white space?
7. What’s with all the widgets?
8. Why are you displaying full posts on your home page?
9. Why do you resize my browser?
10. Why are you still designing entire sites in Flash?
A lot of personal blogs owned by teenagers and those just getting into blogging and/or design tend to do small because they think that’s what “in”. I’ll admit I did the same for a long time mainly because I didn’t like the way the sans-serif fonts looked like at a larger size. Also, newspapers and magazines (not great examples, I apologize) cram a lot of information in with really tiny print, so designers might think that if people can read that, then they can read the same fonts on the screen. (I know, not true, but some designers don’t know any better.)
On the same token, I think designers are somewhat afraid to use larger fonts because it might alienate users. I stayed away from overly large fonts until I perused some really good designs. Large title fonts don’t have to translate to large type fonts and I think that is where there is confusion (at least, there was for me). Once I got it figured out, making the title bigger than the body text just seemed like the right thing to do.
I don’t see a lot of sites though that use the white text on a color background scheme much anymore, so I think people are realizing there is a readability issue with that choice. Or maybe I’m just going to the wrong sites. ^_^
Really great article!
Amber, I think you’re right. People think small fonts are cool, and younger people don’t have any problem reading them.
Larger fonts are fine, if used selectively. But there’s really no reason to go much bigger than, say, 50px. A web site isn’t a poster. The larger your fonts, the less information that fits in a window, so the visual impact is often lost. With few exceptions, I just find large fonts annoying.
The white text on a black background isn’t very common, but I always find it jarring when I stumble on a site that uses it. It’s fine for image-heavy sites (it’s great for the Richard Serra at MoMA site mentioned above), but it doesn’t work very well for text-heavy sites.
Great list Robert. How I like my lists, fleshed out with pictures. Well done. In the spirit of “let’s talk about me some more” thanks for putting my site in a positive light.
I’m pretty much with you. I don’t usually like dark backgrounds, especially for weblogs. They can work for homepages/startups with big images and not a ton of text, but I think they usually end up confining and hard to read on weblogs. I much prefer white based sites.
However, because I’m a spaz and can’t sit still with one design, I went dark for the hell of it. I haven’t read that Mark Boulton quote before but he’s spot on, and that’s been my experience trying to get a light on dark theme approaching something I can live with.
A tad more line height, bigger font size (something like 12px is usually too small), and not a ton of bold. It’s why I ended up choosing Helvetica Light as the primary font. Works better for those that have it on their system. Text-shadow also helps lift the text a little. Makes it more bearable, but again, not every browser supports this. When I pop the site open in, say, Camino or Firefox, it’s not nearly as appealing to me. Comes of as flat. The writing gets lost a little.
Anyway, you’ve made my day Robert. The line “I still find this site tiring to read, but the writing is so outstanding I’m willing to suffer)” makes me happy. Not your suffering per se, but the fact that my writing is good enough to suffer for, in your opinion. It’s always been the writing for me. The designing is fun, but not the point.
Love your new themes by the way. You always were my favorite theme designer, not that there aren’t some other greats, but your style and creative use of weblog space resonates with me. Keep up the great work.
Amos, your current design is the best white-on-black site I’ve ever seen. You’ve done a number of subtle things to make it more readable and it looks superb in Safari.
I know you’ll probably change it soon, which is why I included the picture so people will know what I was talking about after it disappears. Seems neither one of us can sit with the same design for too long.
I meant it about the writing. When’s the novel coming out? Sometime soon?
Glad you like my themes. Everyone should check out your themes, too.
Thanks for the kind words Robert. I gotta dust off some of those buggers you link to. Gettin’ alittle crusty I think. But the novel, and thanks for asking, is a mess, just a big fat mess. I don’t write in a linear way, A to B to C. I have chapters in a journal, some on the computer, a bunch on yellow legal pad pages crumbled in my laptop bag. And I lose a lot of it. Don’t ask how, but I do. And I don’t really care because I do it over, but different. It’d be funny if I wasn’t mine.
What I need to do is hunker down for five-six months, spend twenty to thirty hours a week on it and it’ll be good. But I’m such a spaz I can never stick to a schedule. Schedules are hard for me.
Amos, you need to do NaNoWriMo. (Haven’t we talked about this before?) I did it a few years ago and banged out 50,000-odd words, then had a single copy printed through CafePress. No one else will ever read it, but holding that book in my hand was a rare pleasure. I also printed my NaNoWriMo journal in the back.
Seriously, you should try it. But you don’t have to wait until November. You might also try putting some of it up on Zoetrope. It’s fascinating to have people actually read your stuff. I’d like to read it.
I’m guilty of #2 since I am running the Stripped theme. I pretty much have zero working knowledge of design. I try to go for a simple look using red, white, black and gray(s). I just want to be able to dump random thoughts on the net in an attempt to amuse my friends. Are there any good starter sites to learn a few design ideas?
Rob, there’s nothing particularly bad about Stripped. It’s fine for your Tumblr-like blog.
As far as sites to learn design, SitePoint might be a good place to start. It’s a little technical, but there are also some good, basic design articles. These look good:
The Principles of Beautiful Typography
The Principles of Beautiful Web Design
“You don’t need to pack every pixel with ads and galleries and Twitter updates and news feeds and comments and blogrolls and…”
Alas, the web is like entering a crowded city with eye-catching big ads, with honks-honks and police car sirens as the background.
In the meantime, your site as well as the themes you are offering is like being inside a museum of peace and beauty.
The distinctive designs are like yours whereas the rest is just annoying flashing lights. Someday, people will see!
And keep up the good work (I’m actually on a variation of my own based on Aperio)!
Thanks, zakoops. Post your URL so we can have a look.
Great list, Robert. Mac users can save themselves burned retinas on black-background sites by pressing control-option-command-8. It inverts your screen colors. I use it all the time. That and Shift-Command-S with the Web Developer Toolbar for Firefox. It removes all stylesheets and makes everything perfectly readable bare HTML. Sad, but useful on standards-aware, “over-designed” sites.
(Control-Option-Command-8 is also great for April Fools Day)
Great Mac tip, Ian. Thanks!
I agree with you on most points, though I think there are instances in which full posts, rather than excerpts, are simply more user friendly. You’re absolutely right that a list of long posts can quickly become a mess; just as excerpts can quickly become a usability nightmare.
In my case, I went with full posts because much of my audience are skimmers; they won’t go father than the home page until I’ve already proven to be a good read. I may yet change that format, but for now, I think it works well.
I’d also like to speak up on behalf of light-on-dark websites. Yes, like so many other things, it can be done poorly – maybe it often is. However, a white screen isn’t necessarily easy on the eyes, either. After a while, it can feel like looking into the sun.
In fact, one of my favorite site designs happens to be guilty on both counts: the famous Daring Fireball.
Great list. I agree with yo in all the items. Regarding number nine (redimensioning of the browser window) I’ve come across a very interesting technique that you might implement in you future designs. The site where I saw it has many of the deffects in your list (dark background and not enough empty space for starters) but this ‘trick’ it uses I find very amusing. He has fluid columns that when the window gets to be to small merge together to form a single column of text, mantaining its proportions all the time. I think that for someone passionate about grids as you are this could be interesting:
http://blog.persistent.info/
@Andrew: I think full posts on the home page can work, but only if you limit them to five posts or so. Better yet, have one full post and several recent excerpts. I’m against full posts precisely because most readers are skimmers; it’s easier to skim excerpts and then go to the posts you really want to read. Most of your new visitors probably come to you via Google anyway, so they’ll decide from that landing post whether or not you’re a good read.
I agree with you about white screens. There’s some controversy about what is more readable (see On the readability of inverted color schemes, for example). The problem is that most designers don’t know how to do white on black properly, or they use other, less readable, colors on a black background.
Daring Fireball doesn’t use a black background. It works because the background color is softer and easier on the eyes, and there’s ample line-height (1.8em).
@Javier: That’s an interesting idea, but I’m not a fan of liquid layouts. Liquid layouts change the length of the line, which can affect readability, and they break easily. Your example works as well as it does because there are no images and it creates additional columns as the width increases, but still, I think it’s a bit of a gimmick. :)
I’ve actually been considering keeping only the most recent post, and displaying the rest as excerpts. It’s a great compromise to the usability problem.
Still, one of the reasons I chose to display entire posts is that many people, or at least those I’ve talked to, prefer it that way. For all the pseudo-science and theory we can try to apply to design, it still comes down to the seemingly arbitrary preferences of the user.
Oh, and I think I’ll add Griffin and Hoxie to my list of places to visit for inspiration.
Both for the writing and the design.
(Sorry for the double post.)
Andrew, you’re absolutely right: everything comes down to preferences. There’s no one design that’s going to please everyone.
Griffin & Hoxie is great. The writing and design are superb, and Amos is as restless a designer as I am, but far more talented. He refreshes often and it’s always interesting to see what he comes up with.
Robert I think you’re right about a lot of points, but from a designer’s point of view the web is a paradox.
It is both a prison of constricting limitations (you can’t use any font you like unless you stick to graphics and then they bump page loads, aren’t as easily indexable/searchable et al), and a plain of enlightened freedom (you don’t need to WORRY about getting those line-breaks perfect, or manually styling every aspect once you’ve built your (tedious) stylesheets, you’re not locked to the physical dimensions of sheets of paper and so on.
When print designers first move to the web they fall into the ‘guilty party’ list in terms of forcing browser windows to a specific size, forcing smaller font sizes, trying to use odd formats for layout — basically fighting AGAINST the technology that they see trying to remove their absolute design control.
After a while they see how liberating it can be to let go of that obsessive need for control and work WITH the technology. Using CSS to give them the intricate control they desire without restricting their users to a specific window size. They see how the user should be able to look at a page in the way that suits them best for their device, OS, browser, graphics card.
One of the issues I have with some websites is that they use small fonts because the site is designed with ONLY Windows users in mind, so when viewing on a Mac with it’s inherently higher default resolutions, the same number of pixels takes up a smaller space.
What I try to do these days is avoid px measurements in my CSS and revert to print-terms such as ems, picas and points — which look great in relation to each other and will display much more consistently. Plus they’re easier to visualise from a print designer’s perspective without having to continually check the effects of changes to a stylesheet. For instance you KNOW what 11 on 16pt Verdana is going to look like with 0.5 pica paragraph padding.