Design

There are few challenges more daunting than designing a truly first-rate Web site.
And I’m not here to tell you how to design a first-rate Web site, because I’m not so arrogant as to assert that I’ve ever done it. I’ve tried it a dozen or so times. Some of the results have been good enough to be worthy of staying on the Web for a while. Some of them have been so bad that if someone were to hand me a printout today, I’d question what I could have possibly been thinking when I did it, and I might even question whether the design was mine. Yes, I’ve done my best to forget a lot of them.

And a lot of people are probably wondering why I’m making such a big deal out of this, since making a Web site is something that it seems like everybody does. I think everyone I went to college with had a Web site that had pictures of their cats, lists of all the CDs they owned (or wished they owned), their resumes, and links to all of their friends’ sites.

But that’s precisely the issue. Since everyone does it, it’s difficult to stand out.

There are actually three elements that make up a truly first-rate site, and the biggest problem with most near misses is that they only hit one or two of those elements. Other sites, like most personal home pages that populated the Web in the early ’90s, missed them all.

Content. A first-rate site has to have something to say. The biggest problem with those early personal home pages was that people had nothing to say. Finding clever ways to present boring and useless information wears off quickly. Ideally, a site should give some order to that content, so people can find what they’re looking for. A Weblog dedicated to the rebuilding of vintage BMW motorcycles could be extremely useful, but its usefulness will wear off very quickly if there isn’t a good way to find it.

Community. The best stuff comes from the questions people ask, or the answers people provide. Just ask any teacher. Anything that provides opportunity for banter between content provider and reader, or between readers, is a good thing. If there’s a way to organize and search that banter, so much the better. That hypothetical BMW motorcycle blog would be a lot more useful with people asking questions and sharing their own experience.

Design. This is last, and possibly least. Yet for many people it’s the most challenging. This is partly because some people aren’t naturally gifted in this area (I’m not), and partly because of the crude tools involved. There are probably other factors. We’ll concentrate on this area though, because it’s probably the only area that’s debatable.

Some people question whether design is even necessary. This is a sure sign that an awful lot of designers are doing their jobs. Design’s job is to set the mood, present the content in a facilitating manner, and get out of the way.

The challenge the Web presents is that power users are used to setting all the settings on their computer and it staying that way. They set the colors and the font and the window size the computer should use for everything, and some of them resent it when anyone imposes anything different on them. Some of them even seem to resent the use of p-tags to denote the end of a paragraph. They’ll decide when a paragraph ends and a new one begins, thank you very much. What’s the original author of the piece know, anyway?

On the other hand, you have users who are still trying to figure out what that blasted mouse is for. (This is in contrast to the people like me who’ve been using a computer for 20 years and are still trying to figure out what that blasted mouse is for.) They don’t know where those settings are and don’t care to set them themselves; they expect to be able to go to a Web page, and if it just looks like a raw data feed, they’ll go on to the next place because it looks nicer.

Those power users have a difficult time with this concept, but mankind has learned a few things in the thousands of years since the first time someone applied ink to parchment. Most of it was through trial and error, but most of that wisdom is timeless. Throwing that away is like deciding you don’t like the number zero. For example, in the case of Roman alphabets, a line length of between 50 and 80 characters reads much faster than any other length. If reading a page makes you feel tired, check the line length.

Knowing that, a browser window expanded to full screen is too short and too wide. Books and magazines and newspapers are vertically-oriented for a reason. So the primary navigation goes along the side, because there’s horizontal room to spare and vertical room is too precious to waste on something not content-oriented. Most computer users don’t want to think about this kind of stuff.

When it comes to font selection, things get a little bit easier. Fonts with serifs (feet and ears, like Times) look elegant and they’re easy to read because the serifs guide the eye. Sans-serif fonts (like Arial, which is a Helvetica ripoff) look really good when you blow them up big, but when you run them too small, the eye gets confused. The problem is that computer screens don’t have enough resolution to really do serifs justice. So the best thing to do in most situations is to run a sans-serif font with lots of line spacing. The extra space between the lines helps to guide the eye the same way serifs will. If you notice the typography, the designer has probably done a poor job. If you feel physically tired after reading the piece, the designer definitely has done a poor job.

Brightness and contrast are another issue. The rule is that for short stretches, you can read just about anything. That’s why you’ll see photos run full-page in magazines with the caption superimposed on top. But for reading anything more than a paragraph, you need a fair bit of contrast. Our society is used to black text on white. White or light grey text on black should theoretically work as well, but we’re used to light backgrounds, so we struggle sometimes with dark backgrounds.

But contrast done well can extend beyond convention. It’s possible to make an eye-catching and perfectly readable design with orange and blue, assuming you use the right shades of orange and blue and size elements appropriately. If you don’t feel physically tired after reading it, the designer did a good job, even if you don’t like blue and orange.

The problem with Web design is multifaceted. Not all browsers render pages the same way. This was a nightmare in the mid-90s, when Microsoft and Netscape sought to gain advantages over one another by extending the HTML standard and not always incorporating one another’s extensions. Netscape and Opera deciding to release browsers that follow the standards regardless of what that does to pages developed with Microsoft tools is a very good thing–it forced Microsoft to at least act like it cares about standards. So if a designer is willing to work hard enough, it’s possible to make a page that looks reasonably close in all the major browsers today.

HTML never helped matters any. HTML is a very crude tool, suitable for deliniating paragraphs from headings and providing links but nothing else. You can tell from looking at the original standard that no one with design background participated in its creation. Anything created in strict HTML 1.0 will look like a page from a scientific journal. To adjust line spacing or create multi-column layout, people had to resort to hacks–hacks that browsers will react to in different ways.

XHTML and CSS are what journalism students like me toiling in the early ’90s trying to figure out what to do with this new medium should have been praying for. It’s still not as versatile as PostScript, but it’s very nearly good enough as a design language.

The final design hurdle, though, has always been with us and will only get worse. You could always tell in the early ’90s what pages were created on campus with $10,000 workstations and which ones were created on computers the student owned. Lab-created pages used huge fonts and didn’t look right at any resolution below 1024×768. Meanwhile, I was designing for 14-inch monitors because that was what I had. That 14-inch monitor cost me 300 bucks, buddy, so I don’t want to hear any snickers!

Today, you can buy a decent 19-inch monitor for what I paid for that 14-incher. But as monitors have gotten larger, resolutions have only varied more. A lot of people run 17-inch or even 19-inch monitors at 640×480. Sometimes this is because they haven’t figured out how to change the resolution. Sometimes it’s because they like huge text. Flat-panel displays generally look gorgeous in their native resolution but terrible in any other, so it’s not fair to ask a flat-panel user to change. These displays became affordable within the past couple of years, so they are more common now than ever. A typical flat-panel runs at 1024×768 or 800×600. And on the other extreme, a 21-inch monitor capable of displaying 1600×1200 comfortably (or higher) can be had for $700.

So, since you can’t predict the resolution or window width people will be using, what do you do? CSS and XHTML provide a bit of an answer. It’ll let you create a content column that scales to the screen size. And if you’re really, really careful, you can specify your elements’ sizes in relative terms, rather than absolute pixel measurements. But this messes up if you have lots of graphics you want to position and line up correctly.

And some designs just stop working right when you mess with the font size. Mine don’t, primarily because I’m a disciple of Roger Black. I don’t have any really strong feelings about Black, it’s just that the first book I read by a designer that I really understood was co-written by Black. And most of Roger Black’s techniques work just fine when you crank up the font sizes. If anything, they look better when you make the fonts big enough that your neighbor can read them when you have your curtains open.