Web Design Oh God Please Don'ts

These are the ultimate soul-killers, the flaws which will make a site scream, "NEWBIE! FLEE!"

Oh God Please Don't...

...set any kind of music or sound to play as soon as the page loads.
...use a screamingly loud or high-contrast background.
...abuse I-frames.

...set any kind of music or sound to play as soon as the page loads.

I don't care if your awesome MIDI of "Miracle Romance" sets the atmosphere for your Sailor Moon page. I don't care if your page lacks some essential sparkle without "Zenbyaku Zenkai" in the background. I surf from work, and your aesthetic choices can get me fired.

Plus they're deeply annoying.

The kinds of fast-loading music files we have now sound bad. Truly, deeply bad. Depending on how the reader's system is set up, your music may play on top of whatever the reader already has spinning in the CD drive. Your readers do not want your tinny MIDI rendition of "Fly Me to the Moon" tinkling out of their speakers along with their Nine Inch Nails. If the agony is bad enough, they're going to backbutton out of there so fast that they may not even know who you are.

The kinds of fast-loading music files we have now are also, to be blunt, slow as shit. We sweaty masses, laboring under the strain of a dialup connection, are willing to wait only so long before we give up on a page and find one that takes less than two minutes to download. We are also deeply annoyed when the file which was holding up your page turns out to be not a fantastic GIF or a really fabulous Flash animation, but the Sailor Moon theme song.

So what do you do if your page needs audio accompaniment? You set the page up so that the music neither loads nor plays when the page downloads, and you give the reader a chance to turn the music on herself. Infinitely classier. Infinitely less annoying. And it won't get work-surfers canned.

...use a screamingly loud or high-contrast background.

I don't care how cool it looks. It's hard to read your page. Sure, you can read it—that's because you've been staring at it for the past three days. No one else can unless they highlight it.

How can you tell if your background is too loud? If you've bolded text, blown up its size, or chosen an eye-wateringly loud color for it in order to make it legible, your background is way too loud.

If you just have to use that mondo cool background, don't cover the whole screen with it. There are two common ways to do this:

1. Use the background tile as a strip down the side of the screen. The best way to do this is to set up a two-column table with width and height both set to 100% and page margins set to 0. Pick one column to be the side bar, and set its width to the exact width of the wallpaper tile. Set the wallpaper as the cell's background. The other cell will contain the body of the page. If you want to add a thin colored bar at the extreme edge of the page or between the wallpaper border and the body of the page, add another column in the appropriate place, set its width to the width you want your colored bar to be, and set the new cell's background color to the color of the bar.
   
   Alternatively, if you have a graphics program, you can create a background image with a single repeat of the patterned background tile along one edge, and the main background color in the rest of the image. Make the image wider than the widest screen currently in use (i.e., about 1200 pixels wide), or visitors with wider monitors will see the patterned area repeat. Set up a table as in the previous paragraph, with a blank column over the strip of decoration.
   
   
2. Use the background tile as a page background, but place the content of the page in a table with a plain background.
   

...abuse I-frames.

The fashion right now is to create a small site layout—say, 600 x 400 pixels—and devote most of the space to a large, complex background graphic. The site's actual content goes into a tiny I-frame off to one side. Reading these sites* is always a trial because the viewer feels as though she's looking at the web page through a tiny window. She has to scroll almost continuously to read what little text will fit into the I-frame. And god forbid there's an image gallery; each image will pop up in its own window because the I-frame is too small to show more than a corner of the image.

Kill these sites.

They're pretty. No one can dispute that. Remarkable levels of graphic skill go into the creation of the background image. And because the entire site fits into a small part of the screen, the site looks neat and streamlined and delicate. However, this kind of layout is good only for content-light sites which are made up of a small number of pages, each of which can fit entirely within the I-frame with minimal scrolling. If your site contains an image gallery or any notable amount of text, you are going to need more screen space than a tiny I-frame will give you.

* Yes, I designed this site. And no, I don't think it's a good design. However, while I was designing it, I learned the two advantages that this kind of site has over any other:

1. It's easy to add to. No changing the menu on every page, no fiddling with new frames, no working with graphics, no making up a new page template. Paste the text into the template, change one link on one menu, and hit "upload."
   
   
2. It's graphics-light. The entire layout contains four images: The big background, the light page background for the text I-frame, and two backgrounds for the menu I-frame. The only image which changes while the reader is using the site is the background for the menu I-frame. Although the initial download is sizable, the reader's computer can take a nap after that. In addition, the harried site designer (me) doesn't have to spend extra time creating new title images and the like for each new page.

Therefore, if you're throwing together a quick-and-dirty page which has to appeal to an audience which is used to these pages, and which you don't want to have to fiddle with in the future, a heavily I-framed site may be the right choice. Make the I-frame as big as you can. However, if you want to appeal to an audience of less casual browsers, use more standard pages with more text display space, and your site counter will thank you.

< Back to Life Skills  |  On to Web Design Dos >