12/98 Editorial: Cross-Browser Design

With the recent merging of America Online and Netscape, we'll see a lot of browser competition in the near future. If it weren't for competition, today's web browsers would be much slower, unproductive, and less powerful. Unfortunately, having a myriad of browsers available to consumers also poses a serious problem to web developers: how can we ensure that our sites are fully compatible with all the browsers available?

There are two solutions to this issue, both with their strong points and downfalls:

Each webmaster must make an important decision on how they want to handle this problem. While some standardized intranet developers may have complete control over which browser their site will be viewed with, when designing for the Internet, there's no way to predict how sites will be seen. Users may have any version of Internet Explorer, Netscape Navigator, Opera, Lynx... the list stretches on.

When I created Webworks, I found a solution that enabled me to take advantage of the features that Internet Explorer 4 and Netscape Communicator 4 offered, while retaining support for older browsers. Editing my main index.html home page, I added the following piece of JavaScript code to the <head>er:

<script language="JavaScript">
<!--

// Redirect the viewer to their browser's appropriate page

var browserVer = parseInt(navigator.appVersion);
var browserName = navigator.appName;

if(browserName == "Microsoft Internet Explorer" && browserVer >= 4)
  window.location.href="ie4-index.html";
if(browserName == "Microsoft Internet Explorer" && browserVer < 4)
  window.location.href="ie3-index.html";
if(browserName == "Netscape" && browserVer >= 4)
  window.location.href="ns4-index.html";
if(browserName == "Netscape" && browserVer < 4)
  window.location.href="ns3-index.html";

// -->
</script>

This code is really quite simple, and the JavaScript-impaired readers can paste it right into their <head> tags without understanding a line of it. However, for the benefit of the propeller-heads out there, I'm going to give a short explanation for what goes on here.

First, I create an integer variable and assign it the navigator object's appVersion property. The navigator object is built in to all JavaScript-compatible browsers' object models, and contains information about the browser and the platform it's running on. Next, I create a browserName variable and load the navigator object's appName property into it.

Then, I send the variables through a series of tests to determine the type and version of the browser. When a match was found, the script redirected the browser to the new page by changing the window.location.href property.

If the user's browser is truly from a prehistoric era and doesn't even support JavaScript, it will completely ignore the code due to the  comments I surrounded the code in. Then, in the <body> of the main page, I created a very simple, basic version of the site's introduction page. (Another option is to point out to the user that your site absolutely requires a newer browser, and send them to Microsoft or Netscape to download it.)

I have five versions of my main index page, named ie4-index.html, ie3-index.html, ns4-index.html, ns3-index.html, and the main index.html page with the redirection script. On each of the browser-specific opening home pages, I used all the features available in that particular browser. For Webworks, on the IE4 version, this included lots of fancy Dynamic HTML code in the navigation and area bar frames. One of the benefits of using a frameset layout is that I can use a different set of navigation frames for each browser-specific version of my site. That way, I can use all the fancy browser extensions in my static navigation frames, and as long as I keep my content cross-browser compatible I can use the same content pages for each set of navigation frames. (Content should be text-oriented and shouldn't use a whole lot of fancy rollovers and DHTML anyway.)

Although a frameset layout method may not work well for your site, there are other possible options. Using server-side scripting with CGI or Microsoft's ASP will also allow you to do real-time browser detection to include the appropriate navigation functions. For more information, check out our CGI section.

Unfortunately, the problem of browser compatibility doesn't look like it will resolve itself anywhere in the near future. On the bright side, however, there are several advocates of browser standardization, the most prevalent being http://www.webstandards.org/. I encourage you to support them in their quest to make our job easier!

Please let me know what approach you have taken to solving browser compatibility conflicts in your site, and how it has worked for you.

Jonathan Brownell (), a 16-year-old homeschooled student, is the founder of Alpha Omega Software, an Internet development and consulting company. Since his venture into the Internet and the world of web site development, he has authored several successful commercial websites for businesses nationwide.

</html>: In Closing is an opinion column, updated monthly, that focuses on web site development and emerging Internet technologies.