Web Pages for Everyone
By Jennifer Kyrnin
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:
- Write a page that uses no special features
- 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:
- HTML 4.0 with IE 4.0 extensions (ie4_index.html)
- HTML 4.0 with Netscape extensions (ns4_index.html)
- 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.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
|