So Many Browsers: How Your Audience Can Make You a Better Web Developer

Article
06/14/2014

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

Mary Burk
Mess Enterprises

October 2002

Summary: Use Web browser information to tighten and improve your code base so your Web site displays well across all browsers. Web logs generated by a Web server give you valuable information, from which pages are accessed to the type of browser used to access each page to any errors that users may have experienced downloading pages from your site. (9 printed pages)

Introduction
Web Logs
Browsers to Consider
Code Tricks, from the Easy to the Slightly Complex
DocType
Browser Detection
Just HTML
Conclusion
Resource List
About the Author

Introduction

The Internet contains many sites to find and explore—and a good number of browsers with which to view these sites. Does your site look the way it's supposed to across all browsers? From Microsoft® Internet Explorer to the various Netscape/Gecko/Mozilla incarnations to Opera, Microsoft WebTV®, and America Online (AOL)—each browser provides insight into what your code can do and how it can break.

A true developer knows that code strength lies in its flexibility. This article will demonstrate how you can use Web browser information to tighten and improve your code base. Read on for explanations of design, dynamic page loading, and good old HTML code tricks.

Web Logs

One of the most accurate ways to see how users are accessing your site is to review site Web logs. Web logs generated by a Web server in a hosted environment are usually located in the root directory of your Web folder, above the public docs or wwwroot folder. If you are hosting the site yourself, log file placement is up to you and is modifiable to suit your liking.

Captured in Web log files are volumes of information about each page accessed in your Web site, the type of browser used to access each page, any errors that users may have experienced downloading pages from your site, and from where users were referred when they linked to your Web pages.

Data captured in Web server log files is rather cryptic. Here is an example of a typical log file entry, generated by a hosted Web site:

127.0.0.1 - frank [10/Oct/2000:13:55:36 -0700] 
   "GET /apache_pb.gif HTTP/1.0" 
      200 2326 http://www.example.com/start.html" 
         "Mozilla/4.08 [en] (Win98;I;Nav)"

You will notice the log captured the following information:

Host name or IP address
Registered user name (usually blank)
Date and time of request
Object requested
Status code
Bytes transferred
Referral information
Browser information

An actual Web log (as opposed to a single entry) is denser:

216.153.180.136 - - [01/Apr/2002:00:02:40 -0800] 
   "GET /gallery/ HTTP/1.1" 200 34456 "-" "SSurf15a 11"
24.82.108.185 - - [01/Apr/2002:00:13:13 -0800] 
   "GET /gallery/ HTTP/1.1" 
      200 34456 "http://google.yahoo.com/bin/query?p=
         picture+of+close-up+eye&hc=0&hs=0" 
            "Mozilla/4.0 (compatible; MSIE 5.5; 
               Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/mess_f2.gif HTTP/1.1" 
      200 600 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/mess.gif HTTP/1.1" 
      200 563 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/rufo_f2.gif HTTP/1.1" 
      200 612 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/rufo.gif HTTP/1.1" 
      200 572 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/guestbook_f2.gif HTTP/1.1" 
      200 1097 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/guestbook.gif HTTP/1.1" 
      200 1002 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/email_f2.gif HTTP/1.1" 
      200 686 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/email.gif HTTP/1.1" 
      200 636 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
24.82.108.185 - - [01/Apr/2002:00:13:14 -0800] 
   "GET /gallery/booth_left.gif HTTP/1.1" 
      200 4074 "http://www.rufo.org/gallery/" 
         "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"

To make useful sense of this, one needs a Web log analyzer to process and analyze the sum report of statistics and percentages listed. Fortunately, numerous programs are available for this purpose. A Web log analyzer list is included in the Resource List at the end of this article.

Browsers to Consider

You can potentially expect users to view your Web site with dozens of different free and commercial browsers. An exhaustive list of browsers is located in the Resource List at the end of this article. The market is consolidating, however, and most users viewing your Web site will be using one of the following browser options:

Microsoft Internet Explorer
America Online
The Mozilla family: Netscape Navigator or Communicator, CompuServe, others
Opera
WebTV

With Internet Explorer, the good news is that a programmer does not have to do as much to make a page look decent. The problem is that programmers who code only for the Internet Explorer browser are ignoring 5 to 10 percent of their audience. Internet Explorer 6 complies with almost all HTML 4.0 coding standards, however, and MSDN is a comprehensive resource for Web developers who use Internet Explorer.

America Online

AOL, an Internet service provider serving a large part of the home user market, is quite popular. In the past, developers had to code their sites more specifically for AOL users, until AOL, with release 3.0, began utilizing the locally installed version of Internet Explorer on a user's machine. Macintosh AOL browsers, however, still have embedded versions of Internet Explorer and, embedded into the AOL released for Mac OS X, the Netscape Gecko browser. Excellent resources for AOL developers are available at the AOL webmaster.info Web site (http://webmaster.aol.com/index.cfm?article=6\&expand=0\&sitenum=2).

Netscape and Mozilla

Users may be viewing your site with Netscape 4 or the newer Netscape 6 browser. These two browser versions are very different, and any pages you may have created using layers will not be viewable in Netscape 6 and 7. Many Web developers are aware of Netscape 6 and Netscape 7; far fewer are aware that Netscape 6 and 7 are members of the Netscape Gecko layout engine. The commercial browser CompuServe 7 and the self-named Mozilla browser are also Gecko implementations. Netscape DevEdge (http://devedge.netscape.com/) is a great resource for designing and developing for Netscape Gecko-based browsers.

Opera

Opera is a browser that can display all Web pages, even if they have a few non-standards-compliant quirks—which is often the case. Although Opera doesn't have as large a market share as its Microsoft counterpart, some users like Opera for its large formats and keyboard navigation features. Full keyboard navigation, a completely customizable interface, and a powerful zoom function allow Opera users to easily customize their browsing experience, which is particularly helpful for people with particular mobility or visual requirements. Feature specifications for the latest Opera browser are obtainable by visiting the Opera Web site (http://www.opera.com/docs/specs/).

WebTV

Coding for WebTV is not much different than programming a page for Microsoft Internet Explorer or Netscape Navigator. The MSN® TV Developer Web site offers numerous examples. Make sure your site fits within a 544-pixel-wide screen, and that your code meets HTML version 4.0 transitional standards.

Code Tricks, from the Easy to the Slightly Complex

Armed with your browser information, it's time to employ planning and design, as well as archival thinking. After all, your site conveys information, and the more people who can reach your creations, the better. If any of your pages are returning problems for certain browser and platform viewing scenarios, you can use browser test sites to see where. The World Wide Web Consortium (W3C) offers a site validator, to see if your code complies with standards; and the Bobby Web site (http://bobby.watchfire.com/bobby/html/en/index.jsp) offers testing for ADA compliance and general browser validations for multiple browser/platform scenarios.

You can also install multiple versions of browsers such as Internet Explorer and Netscape, for personal testing in your PC machine environment. For Mac users, it is possible to install different versions of multiple browsers. To install multiple versions of Internet Explorer, use your browser in its Compatibility Mode. For documentation on this subject, see the Microsoft Knowledge Base article Q197311, How to Install and Use Compatibility Mode in Internet Explorer 5.

DocType

Thankfully, most browsers are now W3C compliant, which makes creating pages easier, as long as you follow Cascading Style Sheets 1.0 (CSS1) and HTML 4.0 coding standards. Internet Explorer 6 takes standards implementation further by providing backwards compatibility. In Internet Explorer, a DocType comment—a document-type declaration tag that dates back to early Standard Generalized Markup Language (SGML)—placed at the top of your HTML page tells current browsers how to deal with old and new code alike.

Browser Detection

If your Web logs show that users still browse your site with older browsers, keep your old pages around and use a browser detection script to direct users to pages they can view. If you already have all your messy code in one place and you just want to leave it, this script is for you. Perhaps you are fond of those older, non-standard features.

The following script detects major releases of browsers currently in use, and gives you a place to embed different code depending on browser type:

<script>
<!—

// use this updated variable set to extend this code snippet 
   for more browsers

var nom=navigator.appName.toLowerCase();
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = (agt.indexOf("msie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_nav = (nom.indexOf('netscape')!=-1);
var is_nav4up = (is_nav && (is_major >= 4));
var is_mac = (agt.indexOf("mac")!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_nav6up = (is_nav && (is_major >= 5));

// GECKO REVISION

var is_rev=0
if (is_gecko) {
temp=agt.split("rv:")
is_rev=parseFloat(temp[1])
}

//write your content for only relevant browsers 

  if (is_gecko)   {
   // document.write() statements to create markup for user agents 
   using Gecko layout engine
  }
  else if (is_nav4)   {
   // document.write() statements to create markup for Navigator 4
  }
  else if (is_ie5up)   {
   // document.write() statements to create markup for Internet Explorer 4 
   and later versions
  }
  else   {
   // document.write() statements to create static HTML markup for earlier 
   versions
  }

// -->
</script>

Just HTML

Beyond embedding different functionality in a page, a perceptive developer will make use of non-script-based solutions where possible. Use the <NOFRAMES> tag to support non-frame capable browsers, and use the <NOSCRIPT> tag to support non-scriptable browsers.

You can use the <SCRIPT> tag's language attribute to choose which browser will see your code. Here is a quick example:

            <html>
              <head>
                <title>SCRIPT Languages</title>
              </head>
              <body>
                <script language="JavaScript">
                  // JavaScript Code to implement Menu
                  // Visible to all JavaScript capable browsers
                </script>
                <script language="JScript">
                  // JavaScript Code that uses proprietary 
                  // Internet Explorer features not available in
                  // other browsers.
                </script>
                <script language="VBScript">
                  // VBScript Code that uses proprietary 
                  // Internet Explorer features not available in
                  // other browsers.
                </script>
              </body>
            </html>

If you would like to try a Microsoft FrontPage®-specific solution that provides testing and repairs your code, integrate AccVerify into your FrontPage 98 or 2002 software. AccVerify tests for HTML standards compliance, as well as checks your code for adherence to the Rehabilitation Act, Section 508 1194.22, and to the WCAG 1.0 (Priority 1-3) Guidelines put out by the W3C. Or, you can improve the quality of your HTML pages by integrating HTML Tidy into FrontPage 2000 or 2002. W3C reviews on both of these FrontPage solutions are favorable.

Conclusion

Whether you choose to implement new code or revise old code, you'll find that your Web logs can provide you with insight into your audience's browsers of choice. If your users like older browsers, you can use DocType tags, browser detection scripts, and <NOSCRIPT> and <NOFRAMES> tags to keep older code or pages in transition more accessible.

When you design new pages with W3C standards in mind, you can feel confident that your audience will move toward newer browsers with you, albeit slowly. As your Web site grows, it doesn't hurt to archive the older pages for legacy browsers, and redirect newer browsers to your cleaner, faster code. In time, your Web logs will reflect a less buggy code collection, and your code will be stronger and more flexible than ever before. When you take your audience into consideration, you can't help but become a better Web developer as a result of the effort.

Resource List

Web Log Analyzers (http://www.uu.se/Software/Analyzers/Access-analyzers.html)—This list of Web log analyzers was originally offered by M. Carl Drott, an associate professor of Information Science and Technology at Drexel University, in 1998. The Swedish Uppsala Research University now keeps the link current.

The Big Browser List (http://www.browserlist.browser.org/browser\_list.html)—Although deprecated and serving only as an archive now, this is an interesting site to visit.

The HTML Browser Chart (http://hotwired.lycos.com/webmonkey/reference/browser\_chart/)—Here is the chart that quickly breaks down which browsers support which Web features for Microsoft Windows® operating system-based machines. The page also contains a link to similar information for UNIX and Macintosh machines.

Opera Accessibility Information (http://www.opera.com/special.html)

WebTV Developer Information

AOL Webmaster Information (http://webmaster.aol.com/index.cfm?article=6\&expand=0\&sitenum=2)—This link takes you to the Browser Compatibility page that identifies how AOL will work under different scenarios.

Web Authoring Topics (http://hotwired.lycos.com/webmonkey/authoring/)—Written with the developer in mind, these quick articles capture advanced and intermediate HTML authoring topics to keep your Web pages in shape.

HTML 4.01 Working Specification—The standards specification for HTML offers a wealth of information on this markup language and its future direction.

Bobby Site Validator (http://bobby.watchfire.com/bobby/html/en/index.jsp)—Bobby is an accessibility Web site designed to validate accessible code and encourage compliance with existing accessibility guidelines.

W3C Validator

How to Install and Use Compatibility Mode in Internet Explorer 5 (Q197311)—Use this link to implement a testing environment for older Microsoft browsers.

About the Author

Mary Burk is the Senior Consultant at Mess Enterprises (http://www.mess.net), a creative software company that offers fun content and Web development services.