Everybody seems to be coming out with assorted advice on webpage design. So here's mine. I have one very basic rule:
If you don't have the time to do it right, I don't have the time to look at it.
You're probably not unique -- if I can't figure out your web site, I'll go somewhere else.
Note that I'm talking about form here. For content, you're on your own.
These are rules for any Web page, anywhere. Violate these, and you'll lose viewers, no matter what you're trying to do. Basically, these are New Media factors. I can't imagine an Old Media company putting out a brochure printed in black on dark red, or using a product photo where you can see the editing markup, but the equivalent on the Web is more common than not.
It's amazing how many designers apparently never look at their own pages once they're posted. Look at your pages. Look at them over a slow modem line. Look at them in as many different browsers as you can get ahold of. (Microsoft Explorer, Netscape Navigator, Opera, and Lynx is about the minimum set that you can get away with). Look at them in a wide variety of screen resolutions. Look at it in old versions of Netscape and Explorer. (not everybody upgrades immediately to the Latest & Greatest browser as soon as it comes out.) If at all possible, look at them on different operating systems (Windows, Apple, Unix).
Proofread. Misspelled words, bad grammar, and so forth simply make you look stupid. A spellchecker, while useful, can't do the whole job. Learn the difference between "its" and "it's", "their" and "they're", "lose" and "loose", etc.
All of the fancy Web page design tools that I've seen produce absolutely terrible HTML. Get a copy of the spec, and resign yourself to cleaning up your pages by hand. There are a couple of useful sites that will give you a report on how close your site is to the standard. Doctor HTML is one site; there are others.
On a personal site, or the very simplest sort of business site, you can probably get away with using Front Page Express or Netscape Composer without proofreading the HTML. The more you depend on tools like this, however, the more you risk walking into the Microsoft vs. Netscape war, or getting caught in the Great Version Tangle.
Keep it simple, stupid. This is a good principle for any kind of design, but it is absolutely vital on the Web. Remember that a screen page holds only a limited amount of information -- much less than a printed page.
You have only a few seconds to grab the attention of the average Web surfer. If you take that few seconds in loading a fancy graphic, you've lost your viewers before they've had a chance to see your page.
To present some technical information? To generate interest in a product or service? To present a point of view? To entertain the viewer? The requirements are different for all of these.
The dancing hampster page is hilarious. You wouldn't want your business page to look like that. Does it?
Almost everybody has gotten the message that the <BLINK> tag is a horrible idea in almost any situation. Its text is almost unreadable and it distracts the reader's eye from the rest of the page. (It also only works in Netscape.) However, there are a few other things to avoid:
What businesses advertise with garish, flashing lights? Topless bars and casinos are all that I can think of right offhand. If you run the Internet equivalent of a topless bar or a casino, then animations are just fine. If not, then avoid them.
If you're trying to present serious information, please remember that moving images are seriously distracting. They take the viewer's attention away from what you're trying to say. Advertisers disagree, of course. To them, your page has no value beyond their message. Beware.
If you must have animations, keep them on your home page, and present your real information on other pages with no animations. In this case, your home page just has links to the real information.
If your web site is purely for entertainment, then have fun! Keep in mind, however, that the larger your page, the longer it will take to load and the fewer people will wait around for it to load.
On every system I've used, Javascript popups seem to take forever to come up. Usually, I'm done with a page before the popup has anything displayed in it. The result is that it is simply annoying. You get nowhere by annoying people.
If you want to shoot yourself in the foot, any Web design tool will be happy to hand you a loaded gun. The things listed here can be very useful, but they can also cause you some real trouble. The First Rule is to look at the results. The Second Rule is to keep in mind what you're trying to do.
Be very careful with colors and background images. It's very easy to get color combinations that are unreadable with certain systems, or background images that overwhelm the content of the site. A color combination that is perfectly readable with a gazillion colors may turn out to be "green on green " or some such in sixteen colors.
If you specify any of the <BODY> color attributes (foreground color, background color, link color, visited link color), you should specify all of them. Otherwise, you risk a conflict with the user's default browser settings. If you want an effect like a link that disappears when it's visited, that's fine. You just don't want to do it accidentally.
Images should give the viewer information that is not easily describable in text. Or they make the page look nice. There are two potential problems:
The first is simply a matter of bookkeeping. How big is your page, really? Count all of the images, including those linked to on other sites. My rule of thumb is that a page should be no more than 50KB total. If you want a large image, put it into a separate page, and tell the viewer how big it is. I might be willing to look at a 100K image, but not a 250K image.
For the second, simply put an "ALT" attribute in your IMG tag. If you have to put an awkward amount of text in the tag, you need to examine if you should be using an image at all.
Do not put text information in your images. As well as making the information inaccessible to anyone not loading images, it keeps search engines from finding it. In particular, do not just scan in your product brochure and slap it into your web site.
The biggest legal problem that most Web sites have to deal with is intellectual property in general and copyright in particular. Don't assume that because you see something on the Web that you can just grab a copy of it for your own web site. "Old media" companies are especially fussy about such things as trademarks. Be very careful to get permission for anything that looks like somebody else's trademark. In particular, Bart Simpson and anything relating to Star Wars are Right Straight Out. Disney and McDonald's are a couple of other very protective outfits. Beware -- intellectual property lawyers threaten lawsuits the way other people shake hands. Most of their threats are baseless, but I don't have a good method for weeding out the silly ones. Most Internet service providers won't even try -- one "lawyer letter" and you're off the air, no questions asked.
| The cheese on a mousetrap is "free". |
OK, so you wrote up a bunch of stuff and put it on a Web site. It's yours, right? Not necessarily. There's been a flap lately about GeoCities' "terms of service". Basically, they say that Yahoo (which owns GeoCities) owns any Web content posted there. Yahoo management has been issuing all sorts of press releases saying that's not "really" what they meant. They claim that they need those exact terms to ensure that they can legally "mirror" your web content to their other servers. Unfortunately, that's not what it says.
Solution: First, read the terms of service for anyplace that you might post your Web pages. If you don't like them, don't post there. Second, if you're serious about your Web content, don't use a "free" website. Most ISPs will give you a small amount of space for a Web page along with your Internet access; check it out.
Keep in mind that, even aside from copyright, some content is illegal in certain locations. Many countries (and states) have differing laws about such things as "hate speech" and pornography. Other potential minefields are
As time goes on, browsers (and the HTML specification itself) are acquiring more and more features. If you use the latest features, folks with older browsers won't be able to see them. On the other hand, we don't want to stay stuck at Version 1.0 forever just because somebody can't be bothered to upgrade.
When to start using new stuff is very much of a judgement call. You also have to keep in mind the effect on the Web surfer who can't load your image format, or whose browser doesn't support Java, or whatever. In particular, always make sure that folks can navigate your site in pure text mode, with no images, no Java, no Javascript.
Portable Network Graphics format is a case in point. It has a lot of nice features and it is supported in version 4 of both Explorer and Navigator. If you can see the little logo at the beginning of the line, your browser supports PNG. But how many folks can? Do you want to tell them that they can't look at your site?
Java at one time was easily the most hyped of the "new Web technologies." But where has it gone? For a while, it seemed that every site had its own obnoxious little Java animation. Most of them seem to have disappeared. Deep sigh of relief.
Some older "Web Page Guides", and some common wisdom warns about things that aren't really problems:
A "cookie" is simply a bit of data that a web server stores temporarily on the user's computer. It can then request the user's computer to send it back. That's all it does. It can't write "mystery files" to your computer. It can't make your computer run any kind of a program. It can't read anything back from your computer but its own "cookie". From the fuss that some of the privacy fanatics make about cookies, you'd think that they were sending every file on your hard disk straight to the National Security Agency.
Web servers need something like cookies because every access of a Web page is a separate entity. There is no inherent way to track a user's progress through a Web site. For example, if you go to a Web page that requires a password, the server will send a cookie to your computer. Now if you go to another page on the same server, it has no way of knowing that you are coming from another page on the same server. It will ask for the cookie. If it gets it, you don't have to log in again. If it doesn't get a cookie, then it will ask for the password again.
For a complete description of how cookies work and what they do, see Netscape's specification.
When frames were first introduced, there were two problems. First, the browsers at the time didn't handle them very well. Second, some designers went crazy with them. The combination produced some spectacularly useless pages. Both problems have been cured by time.
Frames are just another feature, to be used when needed. The main thing to watch out for is that they tend to louse up navigation and bookmarks. Essentially, you have one page on the screen for each frame. Which one does the "back" arrow refer to? How about the "Location" display?
Copyright © 1999, Agincourt Computing.
Last updated