What You Can Do for Browser Compatibility

We wish it were easy to cure browser display problems, but fixing them takes time. Read the following steps to learn what you can do to make it easier.

Set a Goal
First, understand that it's hard to build a Web page that displays perfectly on every version of every browser running on every computer. And doing so may require you to leave out features that you really, really want to have on your Web page. Building a Web page that's compatible with Version 1.0 of every browser would mean building a bland page filled with plain text.
So the first step to solving browser compatibility problems is to determine which browsers really matter to you.

To some extent we've done this for you in Browser Photo, since we don't include very old browsers such as Internet Explorer Version 3, or Netscape Version 2. While a handful of people still use these browsers, there aren't enough to justify the pain required to design pages for them.

But what about WebTV and Opera? We've included these browsers because they have small, but fiercely loyal followings. To quote one WebTV user, "We may be small in numbers, but build a site that's WebTV friendly and word gets around."

Within our own site, we track the pages typically viewed by WebTV users, and optimize those pages to work for that browser. Other pages aren't optimized for WebTV.

You may decide to do the same for your site, or you may decide that not enough people use these browsers to justify supporting them. In either case, define a goal and design toward it.

Avoid the Cutting Edge
The Web is hip; it's hot and exciting; it's radical. So many Web designers feel they have to build cutting-edge features into their Web page. That's a bad idea, because cutting-edge features are rife with browser compatibility problems, not to mention the impact they have on your page load time.

Web designers typically go through three stages of maturity: (1) I'm just learning; (2) I know it all, and I'm going to prove it by filling my site with cutting-edge features; (3) I've been burned by browser display problems, and only use what's compatible.

Not convinced? Try this exercise. Take some of the most well-known sites on the Internet: Yahoo, eBay, Amazon.com. Now go to those sites and look at their HTML code.

You won't see many cutting-edge features here. You won't see them using Java or Dynamic HTML. You won't see Flash.

You will see Javascript and Cascading Style Sheets. And most of all you'll see well-designed pages that work under all major browsers.

Including cutting-edge features in your site doesn't guarantee compatibility problems, but it greatly increases the chance of browser display errors. If you really feel you need to include these features, it's essential to test your pages under all major browsers. Check every page carefully with Browser Photo.

Pay Attention to Your Browser Compatibility Report
HTML errors are the leading cause of browser display problems. Making sure your Web pages are error free is one of the most important steps you can take to solve browser display problems.

That means running an HTML validator, like HTML Toolbox, over every page in your site.

The free sample of our HTML Toolbox will give you a full report of all the HTML errors on your Web page. The subscription version of this service can also automatically repair most HTML errors it finds on your page.

HTML Toolbox isn't a silver bullet; we don't claim that it will solve all of your browser display problems. But using it can dramatically reduce the time your spend tracking down browser display problems.

Validate Your Pages
Next to HTML errors, compatibility problems are the leading cause of browser display errors. We've already warned you about including cutting-edge features in your site, but compatibility dangers extend to all aspects of HTML.

HTML Toolbox includes a Browser Compatibility report that will identify HTML tags and attributes that aren't compatible with the three most recent versions of Netscape Navigator and Internet Explorer. Check this report and avoid HTML tags that aren't compatible.

Trial-and-Error Debugging
While HTML Toolbox can solve many browser display problems, there are some problems it can't address. That's especially true if these problems are caused by browser quirks and bugs. In these cases you'll have to track down your HTML problem yourself. Be patient; you can expect this process to take anywhere from one to four hours. Try following these steps to track down the cause:

Make a copy of your Web page so you can restore it to its original form if you need to. Debug this page, not your original Web page.
Isolate the problem on your copied page. Do this by eliminating as much of the page as you can. Is the problem at the top of your page? Then throw away everything but the top section of the page.
View the pared-down page in the problem browser (use Browser Photo to do this if you need to). Is the problem still there? Then remove more of the page. Eventually you'll get to a point where the problem disappears. In that case, the last part of the page you deleted probably caused the problem.
Now go back to your original page (or create a fresh copy of it and work with that). Look at the section of HTML that may have caused your problem. Change it.
Now start a new Browser Photo session for your page. View the results and see if you've corrected your display problem. If so, congratulations!
After you've fixed the problem, be sure to review your Browser Photo snapshots for other browsers too. It's a common mistake for HTML coders to fix a problem under one browser, and in the process break the page under another browser.
Don't expect your first guess to solve the problem. More often you'll have to try a number of different things to see if they solve the problem. Again, be patient with yourself; this takes time.