Dynamic HTML is an exciting prospect for Web Developers. Finally we can write HTML that looks "designed" and yet it interacts with the readers the way a good software package does. However, DHTML is still in its infancy, and as such is not supported equally across all browsers. Even the two browser giants, Internet Explorer and Netscape Navigator, in their most recent incarnations do not support all the same things.
What are your options?
- design for a common denominator
- create branching pages
- develop branching content within pages
- write your own code libraries
- staying away from DHTML altogether(we all know that's not really an option...)
Design for a Common Denominator
Back in grade school we learned how to find the lowest common denominator, and now as Web Developers we have to do it again. However with Dynamic HTML, most designers don't write for the lowest common denominator, but rather an agreed upon minimum standard.
For example, if your design team wants to write Dynamic HTML, you may decide to write your pages just for Internet Explorer 5.0 users, just for Netscape 4.51 users, or anyone with a 4.0 browser.
Once you have decided on a standard, then write your pages for that. It is a good idea to make sure that your pages don't break in other browsers than your design standard.
Important Note:
Do not operate under the mistaken notion that simply because you put a notice on
your pages that your pages are only viewable by one browser that your readers
will:
- download the new browser (usually over a phone line connection)
- install that new browser (hopefully without any hitches)
- and return to your page
If you have found readers that will do that, I would like to meet them. For more details, read my article — Browser Specific Web Designs.
This is the easiest method, as it leaves you with the least amount of maintenance in the long term. However, it can be really difficult if you choose a large standard.
Create Branching Pages
When you create separate pages for the different browsers you get the chance to learn the different requirements intimately. This makes you a more well rounded Web Developer. You simply create the different page versions, usually:
- 4.0+ - Internet Explorer
- 4.0 - Netscape Navigator
- non-4.0 browsers
and then use a CGI or JavaScript to redirect people to the correct pages. Here is a simple JavaScript script that will detect for the three page versions:
This meta tag forwards the non-script compliant browsers to a generic Web page after two seconds.<meta http-equiv=refresh content="2;http://YOUR URL HERE/standard.html">
This is the start of the script. It looks for the manufacturer and version number of the browser.
<script language=javascript>
<!--manufacturer=navigator.appName;
version=navigator.appVersion;
This is the meat of the script. It looks for Netscape and IE version 4.0 or greater and sends them to the relevant pages.
// Communicator
if (manufacturer.indexOf('Netscape')>=0 &&
version.indexOf('4.0')>=0)
location.href='/nc4_index.html';
// IE4+
if (manufacturer.indexOf('Microsoft')>=0 &&
version.indexOf('4.0')>=0 || version.indexOf('5.0')>=0)
location.href='/ie4_index.html';
-->
</script>
Finally, the noscript section tells the browsers with no scripting ability what they can do. This even serves browsers that don't support the meta refresh tag.
<noscript>
Your browser does not support scripting. However, we do have a
<a href="/standard.html">special area</a> of our site for you to
visit.
</noscript>
This is the most user friendly version method of designing for multiple browsers, however it is very maintenance intensive. If you do it extensively, you can have three or more complete versions of your site.
