There is a fiendish temptation when building a web site to use all of the delightful tricks made available by web browsers and web authoring tools. There are more every year! While these gizmos can certainly lead to a more stylized experience, they rarely lead to a better user experience.
Unlike print media, most of the web is one-dimensional. The more you try to control the layout of your site, the more trouble you introduce for the reader.
Mixed-case text is always easier to read than TEXT IN ALL CAPS. I used to work with scientists armed with eye-tracking equipment. The brain is smart enough to recognize words from their shapes if the shapes are sufficiently distict. All words have "footprints", and many can be read with a single eye fixation if they have ascenders and descenders. ALL CAPITAL TEXT ELIMINATES THE DISTINCTIONS BETWEEN LETTERS WITH AND WITHOUT ASCENDERS AND DESCENDERS. THE EYE IS THEN FORCED TO EXAMINE WORDS A FEW LETTERS AT A TIME. This slows down reading tremendously. Even for headlines and logos, use mixed case whenever possible.
The first thing to eliminate from a design is the background graphic. In 2003, the majority of computer screens still have a resolution of only 72 dots per inch. The wimpiest laser printer has a resolution of 300 dots per inch. At anything below 200 dots per inch, the eye simply can't read as quickly. Reading from a screen typically slows the reader by 25%. A background graphic adds visual noise that the eye and brain must filter out. This can result in eyestrain and possibly even reduced comprehension.
I hope you'll avoid background graphics, but if you're absolutely positive you want to have a background graphic on your web site, please keep the following in mind:
The human eye responds well to black text on a white background. This is the highest contrast possible. Since everyone has a different level of contrast perception, you err on the side of safety by going with the highest contrast. If you decide to use a different color scheme, aim for similar contrast. Choosing high-contrast colors also helps you anticipate readers with color vision deficiencies. Even if someone can't distinguish yellow from green, if the green is dark and the yellow is light, they will probably be able to see the difference in luminance between the two.
Assume that your reader has intelligently set a default font size for their browser that works for them. Do not force the browser to render body text either larger or smaller than their default. Headlines can certainly be larger, but let the browser take care that by using header tags for your headlines. Even though CSS allows it, a web site should never force the body text to a fixed font size.
Except for your organization's logo, avoid graphics that exist only to contain text. Search engines can't read graphics, but they can read text. Screen reader software for the visually impaired has the same limitation. Text in graphics does not scale nicely if the user adjusts the zoom setting. Text in graphics do not scale at all when the user increases the font size setting of the browser. Text in graphics can't take advantage of the full resolution of the printer if the page is printed.
There's another good reason to not put text in graphics: Microsoft has quietly changed Internet Explorer to scale graphics on high resolution displays. A co-worker of mine was complaining that the web looked ugly on his spiffy, new laptop. Windows was set to something like 96 or 120 dpi. IE assumed that all web graphics were intended by their authors to be shown at 72 dpi, so all of the graphics were scaled, badly, to compensate. The text looked great. The text in graphics had very strange artifacts. It's completely unreasonable for each individual user to modify their registry to disable this scaling, so expect it, and don't put text in graphics!
The human eye is naturally drawn to motion, even in the extremes of the visual field. If you have an animated element on your web page, a reader must consciously suppress the instinct to look at the moving object. Don't detract from your own message by increasing the visual noise the reader must filter out!
Animation also tends to make information available a smaller percentage of the time. If you're animating something to draw attention to it, make sure the important content is always visible! I once saw a web page whose main piece of content was a phone number. The phone number was put in a marquee crawl that read something like this:
If you ever need help with our products, any time, day or night, call us toll-free at 1-800-000-0000.
The marquee effect meant that the phone number was only visible about 40% of the time. Yikes! I've also seen an effect a lot recently that makes it look like the text is exploding, then reforming. In this case, no text is readable while the letters are flying apart or flying back together.
Left-justified text is easier to read than right-justified text or centered text. The eye is good at snapping back to the same position on the leading edge. Moving the leading edge results in a slightly more difficult reading experience. If you must center or right-justify text, save it for headlines.