Matt's notes on usable web pages.

1. Auto-starting media. DON'T.

It's 5 AM.
On a tip, I open your web page.
My speakers begin blasting sound unexpectedly.
Which do you think I do?

1. Scroll around looking for the video that goes with the sound.
2. Sit and listen.
3. Scroll around looking for a media player with a stop button so I can stop annoying the neighbors and myself.
4. Close the browser.

If you picked any answer other than No.4, think again.
Don't do auto-play.
Let me find your media and play it.
That gives me time to wake up, pay attention, and get my headphones plugged in.

2. Colored text with low contrast. DON'T.

For Christmas, you decide to go with a Red and Green theme and put all your text in pure red #FF0000 on a pure green background #00FF00.
I open your page.
Which do you think I do?

1. Read your page as is.
2. Lower the red setting on my monitor to Cyan-tint everything so your red text looks black.
3. Drag a highlight through all the text in your web page to get a white-on-dark-blue view of the text.
4. Go read NASA.gov.

That's right, No.4 wins out every time. Your Christmas colors are illegible. There are only two color schemes that are 99% reliable:

• Black text on a white background, or
• White text on a black background.

But you can get to 98% reliability by using one of the following:

• Black or colored but ALMOST-black text on a white or colored but ALMOST-white background; or
• White or colored but ALMOST-white text on a black or colored but ALMOST-black background.

Pick one of those, and stick with it.

3. Beautiful photographic backgrounds behind your text. DON'T.

A clear, intelligible photograph is a well-balanced, smooth mix of tones ranging from brilliant to dark, distributed around a midtone. When you superimpose text over it, you get camouflage—your text is illegible.

If you must use an image background for a theme, go for 98% reliability by doing one of these:

• Edit a copy of the photo, increasing brightness until it is almost completely washed out to white, and put pure black text in front of it; or
• Edit a copy of the photo, decreasing brightness until it is almost completely shaded black, and put pure white text in front of it.

4. 400 images loading on your page.

Ugh. If they're all full-sized, they may crash some browsers. Break the page up into several pages by topic.

5. ActiveX components on your page.

Not generally a web standard. Not likely to be supported on Linux or Macs. Don't assume the browser is Internet Explorer, either. Test your web pages in Firefox, Safari, and Opera. If you must present custom extended content, use Adobe's products (PDF, Shockwave, Flash), since Adobe at least tries to make them work everywhere.

6. Explicit calls to Windows Media Player on your page.

Not a web standard. Not likely to be supported on Linux or Macs. DON'T. Don’t assume the browser is Internet Explorer. Don’t use IE-specific Javascript.

7. Explicit calls to Quicktime or iTunes on your page.

Not a web standard. Not likely to be supported on Linux or Windows. DON'T. Don’t assume the browser is Safari. Don’t use Safari-specific Javascript.

8. Cute things about your cat or family mixed in with your main business, all on one page.

This goes double for Facebook pages with 30 or 40 widgets, which take forever to load and inundate me with simultaneous messages. A computer screen is not a newspaper, and shouldn't load up with 25 lead stories at once. Group your stuff into several separate pages, and then provide clear, obvious navigation links, so I can quickly find what interests me—this goes double if you're a potential business associate and I'm surfing your pages to learn about your business, no matter whether you're an independent bass clarinetist, a contract MS SQL Server database administrator, an educator, or a major airline. Tuck the human interest story under a clearly labeled link so your fans can find it.

9. Server application errors on my screen.

When they appear and I report them to you, don't ask me what browser I'm using. If you need to know that, your application is broken. Fix the application. My browser does not implement PHP, MYSQL, ASP.NET, COLDFUSION, APACHE, IIS, nor servelets. When I receive an error from your site about one of those, the error is at your site, not at my browser. If you still need to know what browser I'm using, your code doesn't follow web standards and is hard-coded to only work with a particular browser. Fix it.

10. Links called "click here" or just "here".

Put the link around a description of its target, or around a whole sentence like "Click here to read about my pets." Don't just put the link around the word "here". Blind surfers won't be able to find your link at all, since it's just called "here", and non-blind folks like me have to point and hunt a lot to find it. Make it big and obvious.

11. Meaningful content that is only available in audio.

Deaf surfers won't have access to it, and I might have music playing or might be in an office setting with sound turned off. Provide a transcript, or just type everything.

12. Meaningful content in pictures of words.

This can be improved somewhat if you set the ALT attribute of the IMG tag to contain the same words. But generally, it's blind-inaccessible and demands unnecessary network bandwidth.

13. Mystery-meat navigation.

Clearly label your links and don't hide them behind colored dots or any other cryptic graphics. If I can't find your information on your site, I will not try to win a video game at your site in order to find it. I'll move on.

14. Curly quotes and other artifacts of word-processing, unless they are correctly formatted as HTML entities.

Named character entities or Unicode entities are both acceptable. Un-formatted curly quotes will tend to appear as other characters, so if you don't want your web page saying RIÆm stupid!!!1!S, use standard characters to make it say “I’m smart.” But on the web, your page will always be legible using "old-fashioned" straight teletype quote marks.

15. Off-site link in the same window.

This is guaranteed to take me off your page, and who knows whether I'll come back? Use target="_blank" and warn me lest I block the resulting pop-up.

16. Dead-end page with no links to your other content.