Browser Shots allows you to specify the URL of a target website and then proceeds to take “pictures” of how the page will look in each of the browsers you selected. This is a great way to do the final testing on how well your pages work without having multiple browsers loaded on your machine.

Here’s what the home page looks like:

Click for a larger view
Click for a larger view

There is also a link that will validate your CSS code as well as your XHTML code.

The top graphic a look at my home page which is a valid (strict) XTHML page. Notice how text and images don’t show up on all the browsers including the new IE 8.0

Special thank to Tim for telling me about this valuable web site.

Which way is up? The USB Dance.

USB plugs with "right-side up" markedI’m forever doing the USB dance. Each time I start to insert a USB device I flip it back and forth wondering which way is up. I was complaining out loud during a meeting the other day. "Why don’t USB manufacturers use two different colors of plastic or a large symbol that we can feel?" I asked everyone. Someone pointed out that there is the USB symbol, but it is so small and I shouldn’t have to put my glasses on to figure out which side of a plug goes up.

I got an idea later that day and went and got a bottle of my wife’s fingernail polish. Here’s a shot showing how I marked the "up side" of each of my USB plugs. And, now a week later I’m pleased to report that this has made my life just a little smoother.

Now, if we could only get architects to design doors so you could tell by looking if you should be pushing or pulling… Instead of fingernail polish everyone has to put up signs telling us to push or pull. That’s great until you are in a country where you don’t know the language. Why not just design things properly so their use is obvious? Push or Pull ?

We shouldn’t have to resort to fingernail polish and push/pull signs.

Accessible Web Pages, Lawyers, and SEO

ada.gifAccessible Web Pages. Imagine having your computer read the text of your page to you with the monitor off. You have no mouse. All navigation has to be done using the keyboard. How accessible is your web page?

This is how the blind and search engine spiders “read” your web pages.

Two factors are bringing accessibility to the forefront. First is the realization that search engine spiders are blind. The second is the recent ruling that Target, a private company, can be sued for not having an accessible web site.

Search Engines are Blind – Blind people cannot see graphics, Flash presentations, or colors on a web page. When a blind person browses the Web they listen to the page using software such as JAWS which read the text and convert it to speech. (Earle Harrison from Triumph Technologies demonstrated this during one of my Web Programming I classes.) Search engines are the same. They do not care about how pretty a page looks or how many graphics it has. All a search engine spider wants to know are (1) what are the key words and (2) what ratio is the ratio of keywords to the overall text of a web page. It turns out that creating accessible web pages increased SEO (Search Engine Optimization). By moving all those color, font, and table tags out of the <body> element and into the CSS Style section, you not only make the page easier for JAWS to read, but you increase the ratio of keywords to content.

Private companies can be sued for not having accessible web sites. A recent ruling by the courts states that:

U.S. District Court for the Northern District of California ruled yesterday that a retailer may be sued if its website is inaccessible to the blind. The ruling was issued in a case brought by the National Federation of the Blind against Target Corp. The suit charges that Target’s website is inaccessible to the blind and therefore violates the Americans with Disabilities Act (ADA), the California Unruh Civil Rights Act, and the California Disabled Persons Act.

Up until this ruling only government agencies were held accountable to Section 508 of the ADA. Now everyone must be aware of the ramifications of excluding non-visual browsers from their site. This especially involves JavaScript tools such as AJAX as well as Flash.

The key is to create a web page that has layered options. The basic web page should contain all essential information. All essential information in the graphics should be also represented as plain text either in the alt=” ” attribute or as part of the text of the page (preferably both). The next layer would be CSS which will take the plain-text page and make it more readable and interesting to visual browsers. And finally, the multimedia layer which includes Flash, movies, and slide shows which should be thought of as the “frosting on the cake”. Not essential, but nice to have for all the folks that like lots of sugar. Any essential information presented in this layer should already be included in the text of the page. By building your pages in this manner everyone will have access to the key information of the page, your client will get a higher SEO, and you can sleep at night knowing you won’t have to be dealing with a lawsuit based on inaccessible web pages.

A short aside. A mouseless world really sank in when I offered Earle Harrison, a person who is blind, a mouse pad as a thank you for presenting to my class. He very graciously declined, reminding me that he doesn’t use a mouse pad. He doesn’t even use a mouse because he cannot see the cursor… Even Earle could see the light bulb go on over my head as it all clicked into place.

Technorati : :
Ice Rocket :
Buzznet :