Important Considerations for Layout

Maybe you're wondering if I've violated my own rule by putting the navigation bar at the top of this page. Actually, the navigation bar isn't a graphic. It's a table, and the colored backgrounds are just colored cells that use the <BGCOLOR> attribute to color only that part of the page. In fact there are no images involved at all. You may want to review the tutorial on tables in case you want to use tables yourself.

By the way, please align larger graphics to the right of the page so your text can be read comfortably while the user waits for the graphic to load.

Beware of fancy fonts, dingbats, and exact positioning. It's important to remember that different people have different options set on their computers. Their resolution might be completely different from yours or they might have set the text to display at a larger or smaller size than you are used to, and that will completely throw off your layout unless you plan with relative widths and other flexible features. A good technique is to try resizing your window a few times and trying out different sizes to make sure your page looks okay even when it's displayed in a narrow space.

Watch out for the temptation to include dingbats and specialized fonts. This too is relative: the only font a user will see is the font that is installed on the computer on which the page is being viewed. You might choose a cute dingbat that looks like as part of your e-mail link, and it might come out looking like or on the user's computer--not what you intended at all! Or you might have a page set up so it looks great in Times New Roman, but the user has set Arial as his or her default font.

By the way, if you're wondering how I avoided the dingbat problem myself in the paragraph above... I converted the dingbats above into images with an image editing program. Hold your mouse over them and you'll see that this is so, and that I've added ALT commands to their IMG SRC tags. This is the only safe way to use dingbats or unusual fonts. Obviously you wouldn't want to convert an entire page of text into a graphic, but sometimes judicious use of a special font as a title graphic can be very effective.

A note about the Rule of Three: The "rule of three" is often applied to writing, speeches, photography, and even flower arranging. There's something stable about the number three. The standard five-paragraph essay has three body paragraphs. A list of items often sounds better if there are three. For some reason, "He is smart, funny, and handsome" sounds better and more natural than "He is smart, funny, handsome, and thoughtful," which comes off as a little too wordy and effusive.

Even a three-legged stool is more stable than a four-legged table, which is why we're always having to shove matchbooks and wadded napkins under four-legged tables at restaurants. Go figure.

This rule works well with graphics, too. An odd number almost always works better than an even number and makes the page look more balanced, especially if the first and third images are aligned to the right and the second is aligned to the left. I suggest aligning to the right first, because, as I have been emphasizing, that will make the text load faster.