Number 8 in a series.

Stop, Look, and Listen II

In "Stop, Look, and Listen", we discussed distractions from your message. Most of the distractions that we discussed were based on foreground material, although we did briefly mention some problems with background colors in combination with foreground colors. However, we did not note that the background itself can be a source of distraction.

We noted that animated GIFs drew the eye to themselves. The same is true of blocks of color that are distinctly different from the page background color. This can be useful if you want to draw the visitor's attention to a 'sidebar', but if overused or used inappropriately, it will be a distraction from your message, even if the color combination is a good one. Background images are generally more dangerous - poorly chosen images used as backgrounds can kill a site, more certainly than having no interesting content, or having poorly proofread content. Background images should not have regions of high contrast - remember, you aren't going to have full control over the placement of your foreground matter relative to your background images, and it's a bad idea to have black text flow onto black background image - as I've learned from direct experience trying to cope with a buggy but popular browser. Also, the finer the detail of the background image, the more likely it is that your text will be 'lost' in the image, even with acceptable contrast between the image and the text. Another problem with background images is that, like foreground images, they may not be visible to the visitor. Because of this, it is essential to remember to set the page background color to the main color of the background image - otherwise, your page could end up more readable with the missing background image than without (consider, for example, what happens when your image works best with gray text. If you leave the default background color on some older browsers (which defaulted to a gray background), your text will be invisible!). That's bad. If your background image is a picture of the Grand Canyon at sunset, it's probably a good idea to set your background color to red or a reddish-brown.

If you're a whiz with one of the high-end image manipulation programs, you can apply some fancy techniques to your images to make them more suitable as backgrounds - for example, you can 'fade' them (like a watermark) or recolor them to look like embossing - both of which reduce the prominence of the image, without necessarily detracting from the appearance (embossing works best with small, simple images, like logos. Fading or watermarking is the better choice for complex images or photos). Even so, set the background color appropriately.

A slightly harder issue to deal with is that of link colors. It's generally accepted that blue means unvisited, red means clicked-on, and magenta means 'been there, done that'. Try to resist departing from those conventions. If you absolutely must change them (for example, the standard blue link doesn't show up well on a black background), try to keep the colors in the same families - for example, cyan instead of blue. More important than your choice of colors, though, is consistency - either use the same colors on all pages (thus contributing to a unified appearance), or stay in the same families, at least - don't use blue/red/magenta on one page, and yellow/green/white on another - it's confusing, and confusing is distracting.