Web Pages for Everyone

One of the most difficult tasks a Web Designer faces is using new technologies or browser specific effects without alienating people with other browsers. For example, a useful tag on Web pages is the IFRAME tag. But this tag is only viewable in Internet Explorer. Or you could set up pages using the LAYER tag, which is only viewable with Netscape. As a Web developer, I could decide to just ignore the browsers I don't support, but unless I'm developing for a tightly controlled intranet, that isn't always possible.

While the browser of choice has shifted from Netscape to Internet Explorer, there are still a lot of Netscape users out there. As a designer, I want to write dynamic HTML and HTML that gets the most out of the browsers' abilities, but I also don't want to lose some of my viewers simply because I didn't take their browser into account.

There are several ways around this:

1. Write a page that uses no special features
2. Take a little extra time to tailor my site

Since I've already stated that I want to use special features like IFRAMES and LAYERS, I'll take the time to make sure that my site is tailored to the viewer. The answer is using JavaScript and meta tags to redirect customers to the appropriate pages.

While this method requires that you write multiple versions of the front page, that is what computers are best at. When I do this, I write the copy` and design for the high-end browsers that I want to support. Then, I simply copy and paste the results into the other versions of the page. For this example, I will create three versions of my page:

1. HTML 4.0 with IE 4.0 extensions (ie4_index.html)
2. HTML 4.0 with Netscape extensions (ns4_index.html)
3. A standard page with no fancy tags or extensions (standard.html)

   Note: I can have 3.0 viewable JavaScript on this page, because most older browsers will ignore it when I keep it in the comment tags <!-- --> Make sure to make the 2.0 browsers ignore the JavaScript if it's not optimized for them.

How to Do It

• First, I add a meta tag to the head so that browsers without JavaScript will go to a non-enhanced page (put this in the HEAD of your first page):

<meta http-equiv="refresh" content="2;http://mydomain.com/standard.html">

• Then I add in the JavaScript so that 4.0 browsers go to the appropriate page and 3.0 and lower go to the standard page:

<!-- ignore <script language=javascript> manufacturer=navigator.appName; version=navigator.appVersion; // Communicator if (manufacturer.indexOf('Netscape')>=0 && version.indexOf('4.0')>=0) location.href='http://mydomain.com/ns4_index.html'; // IE4 if (manufacturer.indexOf('Microsoft')>=0 && version.indexOf('4.0')>=0) location.href='http://mydomain.com/ie4_index.html'; // 3.x browsers if (version.indexOf('3.0')>=0) location.href='http://mydomain.com/standard.html'; </script> -->

• Finally, I add in a NOSCRIPT section of the page for browsers that can't \ handle meta Refresh so that they can get to the correct page as well:

<noscript> Your browser does not support scripting. However, we do have a <a href="http://mydomain.com/standard.html">special area</a> of our site for you to visit. </noscript>

Notice that I didn't imply that someone using a browser that doesn't support scripts was old or defective. For one thing, some people browse the Web with JavaScript turned off, even though they use a newer browser. Many other people browse with older browsers for specific reasons, not just because they don't know to upgrade. In fact, at this point, if someone comes to your page with an older browser they have probably been told over and over that they should upgrade. The fact that they haven't ought to be a clue that they don't want to. Customer centered pages are ultimately going to attract more hits and return visits.

It is easy to create a simple redirect at the beginning of your site to keep your readers on the pages that best suit them. And, as I said above, it's easy to set up a second, simplified version of your pages using just copy and paste.