Site Compatibility Tested

If you’ve read this far, then it is time we address solutions. Here are key questions and answers that should help you to apply this experiment’s findings:

Which screen resolutions are being used by your site visitors?

This table represents the visitors to test site C: (*4)

Which browsers are being used by your site visitors?

This table represents the visitors to test site C:

Which major browser/resolution combinations should you test your site in?

This table represents the visitors to test site C:

• WebTV Viewer, 2.0
• Internet Explorer, 4.5 – 1024×768 pixel screen
• Internet Explorer, 5.0 – 1024×768 pixel screen
• Netscape Navigator, 4.7 – 1024×768 pixel screen
• Netscape Navigator, 6.0 – 1024×768 pixel screen
• AOL, Version 6.0 – 1024×768 pixel screen
• Opera, Version 5.0 – 800×600 pixel screen
• Netscape Navigator, 4.7 – 640×480 pixel screen
• Netscape Navigator, 4.7 – 800×600 pixel screen
• Netscape Navigator, 6.0 – 800×600 pixel screen
• Internet Explorer, 4.0 – 800×600 pixel screen
• Internet Explorer, 5.5 – 800×600 pixel screen
• Internet Explorer, 5.5 – 1024×768 pixel screen
• Internet Explorer, 5.5 – 1024×768 pixel screen, large fonts

Which operating systems are being used by your site visitors?

This table represents the visitors to test site C:

This table reflects actual numbers as they are reflected across the Entire Net

1. Netscape 15,300,613
2. Web TV 1,133,378
3. Opera 566,689
4. IE 39,688,256

Close to 17 Million people use a browser other than Internet Explorer.

Which major operating systems should you test your site in?

We recommend at least these three:

1. Windows
2. MAC
3. Web TV.

What are the 7 primary causes of display errors and what can you do to prevent them?

1. HTML Errors – Some browsers are more forgiving than others. If your site contains a single overlapping tag, it may not display properly.

   SOLUTION: Test your site in an HTML validator. We will explain how, later in this report.

2. Browser Quirks – Different browsers have different peculiarities. For instance, while most browsers do not require that a table have the closing tag , Netscape 4.0 will not even display a nested table if does not have the closing tag. (This obnoxious little vice corrupts a lot of attractive web designs).

   SOLUTION: Pray, build good karma, and/or seek therapy. This is about trial and error; this is about compromise. Check your site on different systems.

3. Font Sizes – User preferences can increase the size of yourtypeface by 50%. This can “stretch” your table, and distort the appearance of your site.

   SOLUTION: Use Cascading Style Sheets (CSS), with pixels as the units of measure, to control your font size. Be especially careful with the fonts on your navigation bar.

4. Computer Types – The MAC still has 12% of the market; it is especially popular among artists and designers. Even when using identical browsers, your site may display differently on a MAC than on a PC. Many designers are not aware that Microsoft outsources the development of IE for the MAC. This version of IE is rather infamous for its quirks and bugs.

   SOLUTION: Simplify. Avoid “cutting edge” designs. Art is for artists. Hang it on the wall, don’t put in on your page.

5. Browsers – A web browser interprets one language (HTML) into another (your display). But as with any translation, there are different means of expression. Although the World Wide Web Consortium has agreed to a general set of standards, there remains a lot of room for interpretation. Case in point, although the standards state that a browser should support a CELLSPACING attribute, the standards don’t define the value for that attribute.

   SOLUTION: Avoid using HTML extensions and (here we go again) test your site on multiple systems.

6. Screen Resolutions – While the standard for a MAC is 1024 X 768, most Internet surfers are limited to 800 X 600 or less. Many designers, when planning for screen width, fail to allow enough room for variances.

   SOLUTION: If you are designing for the 600 pixel layout, set your screen width for 560. If you are designing for an 800 pixel layout, set your screen width for 760.

7. Browsers Versions – Newer browsers support newer versions of HTML. For instance, Netscape 6.0 is a complete rewrite. If you use Dynamic HTML pages that display well in 6.0, they may not display at all in 4.0.

   SOLUTION: Once again… test your site on different systems.

How do you use “trial and error” testing to correct your display problems?

ESTIMATED TIME: The test itself only takes a few (less than 20) minutes. But the troubleshooting is another matter. It took us 70 hours.

ESTIMATED COST: If you purchase the necessary software and equipment it should cost $4500… If you use a hosted service it should cost approximately $125 for a year of unlimited use.

1. Set aside the time to work through this (somewhat tedious) process. It is not hard, just laborious.
2. Determine the optimum browser/system combination for your audience. Your site will probably not display perfectly in every browser so you need to prioritize.
3. Test your display compatibility using multiple computer systems or a service like Browser Photo.
4. Identify any page types or templates that are experiencing display problems.
5. Test the HTML on these pages using an HTML validator like DrHTML or HTML Tool Box.
6. Make a backup copy of your website.
7. Correct any obvious HTML errors.
8. Select a page on which you have display problems and copy it.
9. Delete one element of the page, and retest.
10. Continue deleting elements until you isolate the problem.
11. Repair or replace the problem element.
12. Test the page again. Check carefully to make certain that your “repair” did not create a new problem in any other browsers.
13. Using this page as a template, correct the rest of your site.
14. Test your site, one last time, after the corrections have been fully implemented.
15. Schedule a new test every 90 days or whenever you make significant changes.

If you cannot correct the display problem yourself, how can you get professional assistance?

We would recommend this designer.

• Cliff Rainer – Mr. Rainer manages our web design work at the Journal.

You can also find designers and help at these news groups:

• Macromedia (over 17,000 messages)
• ProjectSeven (over 14,000 messages)

If you would like to bid out the project, visit the B2B marketplace.

• Prosavvy

How can you test your site in all of these systems without spending thousands of dollars in software and equipment?

Unless you are a professional design firm building hundreds of pages a year, why should you invest in an maintain the different systems and software? We recommend Browser Photo.

It would probably take (at least) $4500 to create your own testing system. But Browser Photo cost just $125 per year.

And in case you are wondering, we do NOT received a commission from this company.

Limitations of Browser Photo:

• You can only see the browser window… If your page is longer or wider, you may have to take multiple “photos”. You can do this by putting anchor tags on the page where you want the screenshot.
• You have to wait up to 20 minutes for the images to be captured and reported. It can take a long time to work through the tests and re-tests.
• It tests 14 different browser/ system/ resolution combinations, but it only tests 3 operating systems. These should be sufficient.
• From time to time, it misses a screenshot and you may have to retest.

There is one more way, albeit haphazard, to test your site without spending any money. You can post the URL on a newsgroup. Many times, helpful designers will send over screenshots from their various systems.

1. Visit Browser Photo:
   http://www.netmechanic.com/browser-index.htm
2. Visit HTML Tool Box:
   http://www.netmechanic.com/maintain.htm
3. Visit DrHTML:
   http://www.drhtml.com
4. Visit An Archive Of Helpful HTML Tips:
   http://www.netmechanic.com/news/webmaster-resources.htm
5. Visit The Macromedia Newsgroup:
   news://forums.macromedia.com/macromedia.dreamweaver
6. Visit the ProjectSeven Newsgroup:
   news://forums.projectseven.com/pviwebdev
7. Visit ProSavvy:
   http://www.prosavvy.com

(*1) Source for General Stats: NetMechanic Inc.

(*2) WebTV’s popularity is growing in the Handicapped and Senior sectors. Its strategic significance would depend upon your market.

(*3) Would the Journal maintain a constant conversion ratio with users of older systems? This is fodder for another test.

(*4) The stats for Site C were sampled from the 31 days of July 2000.

::Back to Section 1::