A Guide to Good Web Page Design (Part 1)

:: Home > Library > Business Ideas/Section-1

The whole object of getting on the web is to get noticed. Of course, you want good notices, not bad notices. One way to assure yourself of bad notices is to have poorly designed web pages. And believe me, bad pages will get you noticed, most likely by people like a certain Mr. Mirsky, who runs a website called "Worst of the Web." Put up exceptionally poorly designed web pages (or bizarre content), and you could have the "good" fortune to receive a review at his site, which is a dubious honor at best (unless, of course, you're trying to have a bad website - that's another story...).

THE RULES OF GOOD WEB PAGE DESIGN
Rule #1: Make it readable!
It's better to have a plain black and white web page with no graphics whatsoever but with highly readable text, than it is to have a jazzed up page with an intricate Netscape background and purple and green text. You're putting information up for people to read. Make sure they can actually read it!

If you're writing your web pages for Netscape browsers, you have the option of using background colors and images. My suggestion is to stick with solid colored backgrounds, preferably light pastel colored backgrounds (white to mint green) with black text.

An exception to the above rule is when you will be displaying a number of images on a page, such as an "art gallery." In this case, a dark background will enhance your images. However, be sure to limit the amount of text on a dark background, as it is much harder on the eye.

However, if you must have a background image, you'll have the best readability if you stick with a light embossed grey-on-grey graphic, rather than the wildly multicolored graphics I've seen at many websites. In general, though, any background images will decrease the readability of the text on the page.

Text values should be the opposite of the background. If the background is light, the text should be dark. If the background is dark, the text should be light. Enough said.

Rule #2: Break up your pages into chunks!
I can't tell you how many websites I've been to that have this problem: it's one page of text that goes on, and on, and on, and on... scrolling ad infinitum. This is a BIG no-no!

A lot of this falls back to readability. As a rule, I wouldn't go much beyond two screens of information per page, unless the extra information is strictly on the main topic of the page. For instance, a page of links to other web pages can extend much, much farther than a page full of book reviews. I would put each book review on its own page.

This, of course, necessitates some sort of navigation links on each page. However, your readers will appreciate the extra work you put into splitting your pages into bite-sized chunks, rather than one endless tome. If you don't agree with this philosophy, look at it this way: which would you rather have to read, a document printed on a twenty foot long 8½" wide single sheet of paper, or printed on twenty regular sized pages, broken up into sections?
Rule #3: Don't overuse horizontal rules!

One of HTML's built-in features is the horizontal rule. This puts a horizontal line on the page whenever it is invoked. And it's so simple to invoke: just put <HR> in your HTML code, and you have a horizontal rule. I wish it wasn't so simple.

The other evening, I was speeding through web pages, and I came across one that had some information I needed. Unfortunately, the author put a horizontal rule between every single paragraph! I don't know if they thought they had some sort of slick design thing going on, but besides being ugly, it made finding the particular information I wanted into a real task. Imagine this report with a horizontal line between every paragraph! Better yet, how about if I do it for awhile, to give you a taste!

Notice how the horizontal line actually makes the paragraphs seem closer together than plain white space does? That's the problem. Even if you allow extra white space for the horizontal rule, it will appear to pull your paragraphs together, rather than separate them.

If you must use a horizontal rule, make sure it's there for a reason. Don't just use them to separate paragraphs, use them to show a change of context. In other words, in this report, a horizontal line would fit just fine in the space between the end of one of these design rules, and the beginning of the next. An applicable web page example would be to use a horizontal rule between the end of your text and your navigation or credits sections.
An even better design option than the horizontal rule, though slightly more work, would be to use a small, unobtrusive graphic to denote a change of context on your page. This doesn't mean one of the "cutesy" versions of the horizontal rule which you'll see all over the web (a mouse with a long horizontal squiggly tail, a wavy ocean, etc.).

The best option, though, is to remove those excess horizontal rules from your web page, and replace it with white space.