Web Mender >> Resources for Barbershop Webmasters >> Testing and Validation
Previous: Navigation | Next: Further Reading

Testing and Validation

Resources for Barbershop Webmasters

Testing in Varied Conditions

One of the gravest mistakes in web design is to assume that everyone's system is just like yours. Not everyone will have the same size monitor. Not everyone will have the same software. Not everyone will have the same operating system on their computer. Not everyone will have the same quality connection to the Internet. The only way to be sure that you're web site is as portable as possible is to test it under as many conditions as possible.

Testing on Different Systems

When visiting friends who use a different computing platform, as if you can do a quick check of your web site from their computer. There are occasionally large differences between implementations of the same browser on different operating systems.

With the proliferation of powerful cell phones and wirelessly-connected PDAs, it's more important than ever to try your site on as many devices as possible. Somebody running late to your chapter meeting might need to access contact information through a small-screen device with an unusual rendering engine. Look for opportunities to test your site on portable hardware.

Testing in Different Browsers

There are three free browsers available for download that will provide you with a much more comprehensive sense of how others will experience your web site. All of the browsers mentioned below are available for a variety of platforms, including Windows, Mac and Linux at a minimum.

Mozilla / Firefox

What: Mozilla came into being in 1999 when Netscape decided to release the source for Netscape Navigator. Unfortunately, Netscape was bound by licensing agreements to not release everything, so it was several years before a stable browser emerged. Mozilla and Firefox both use the same underlying browser, so you need only test in one. Mozilla includes extra features like an email client and USENET reader, which you may decide you don't need.

Why: One of the strongest reasons to use Mozilla is the availability of developer-oriented helper applications. Both of these add an additional toolbar to Mozilla or Firefox to give you quick access to adverse conditions. What if the images don't load? What if JavaScript is turned off? You might be in for a rude surprise when you find out!

Mozilla's rendering engine is increasingly finding a place in consumer electronic devices. More and more companies are unwilling to license Microsoft technologies for their products when quality alternatives are available. Mozilla is also popular on non-Windows platforms where Internet Explorer simply isn't available.

Lynx

What: Lynx was developed at the University of Kansas as a hypertext client for campus information. A student adapted it for use on the web. Lynx represents the ultimate in simplicity: it's nothing but text. Heck, some versions of lynx won't even pay attention to your mouse! Correspondingly, it has a somewhat high learning curve compared to other browsers.

Why: Lynx, with it's strong focus on text, can give you a sense of what your site looks like stripped of most of the layout tricks and all of the graphics. Versions of lynx are available that are hooked into speech synthesizers for the visually impaired, so lynx is an excellent benchmark for accessability.

Opera

What: Opera was designed from the start to provide good access to the visually impaired and to run on limited computers. With careful attention paid to keeping the application small and fast, Opera was the speed champ for several years. Opera was also an early stickler for web standards. Where Internet Explorer and Netscape had tried to claim the web for themselves by supporting non-standard HTML, Opera worked hard to provide a complete implementation of the standards as outlined by the World Wide Web Consortium (W3C). Opera is a commercial product, available for less than $50. Opera is also available for free, but it will display ads while you use it.

Why: With it's focus on low-power computers, Opera was a natural choice for a web browser to embed in small-format devices like cellular phones and personal digital assistants. Fortunately, the desktop version of Opera also includes the cell phone browser! Select "Small Screen" from the view menu, and you'll get a taste for how your site is seen on the go. Opera also offers per-window buttons to deactivate graphics, color and font commands, and style sheets.

WebTV Viewer

What: Most web developers have full-fledged computers at their disposal. Maintaining an additional subscription to WebTV to make sure the site is palatable for WebTV users would be an unacceptable inconvenience and cost. As an alternative, MSN offers a browser for Windows and Mac that recreates the WebTV experience from the comfort of your computer.

Why: WebTV is a very different browsing experience. The speed and flexibility of your usual pointing device is replaced with arrow keys to move from link to link. The WebTV Viewer actually shows you the remote so you can click around your site more authentically. The Viewer also simulates a television-resolution display. Most people are surprised to learn that most ten-year-old computer monitors can display more pixels than an NTSC television. The WebTV Viewer also complains about bits of HTML that WebTV doesn't know how to render.

Validation

Every computer language has its rules for what's valid and what isn't. The HTML and CSS specifications were written with the knowledge that a single version of an HTML or CSS document should be able to work in newer and older browsers. Each browser has its own way of dealing with things it doesn't understand. Validation is an important step for reducing the likelihood that your site will break in a particular browser.

What Will It Find?

Missing quotes for tag attributes.
<p class="boilerplate> vs. <p class="boilerplate">
Missing semicolons for escape characters.
&quot vs. &quot;
Improper tag nesting.
It is very <strong><u>important.</strong></u> vs. It is very <strong><u>important.</u></strong>
<strong><p>It is very important</p></strong> vs. <p><strong>It is very important</strong></p>

This is by no means a complete list.

Previous: Navigation | Next: Further Reading