Vol. 1, No. 10
Designing For Multiple Browsers
Greetings Tripodians,
Welcome back to "Handcrafted," the brainchild of Tripod's Better
Builders and the crazed kids at Webmonkey.com.
If you've been a good "Handcrafted" devotee, then you've read each and
every one of the last nine editions. After burning both the midnight
oil and the candle at both ends, you are now an expert at basic HTML,
image production and placement, information architecture, and JavaScript.
If that's not the case, fret not! Even if you haven't had the chance
to earn your black belt in all these important Web skills, it's not too
late! All of the previous
"Handcrafted" newsletters have been archived
for your convenience.
You have plenty of time to get all caught up. Go ahead, we'll wait.
Have you ever innocently clicked on a link only to find yourself at
the most painfully hideous site you've ever seen? We're talking about
a site so bizarrely designed that you fear for the sanity of its maker.
Or, worse yet, you've arrived at a site that simply causes your browser
to freeze, crash, and burn.
While it's entirely possible that this cursed is just poorly designed
(you and I both know that there are some severely troubled Web designers
out there), there could be another reason for this e-disaster you see
before you. It may just be that this site has been designed for a
different browser than the one you're using to surf.
You wouldn't think the browser you use would make THAT much of a
difference. They all look pretty similar to you, the user. There's
the reload button, the back button, and the home button. Even though
most browsers look and function pretty similarly, they actually
interpret Web pages in slightly different ways.
Most people run the "big kahuna" browsers: Netscape and Internet Explorer.
There are also people out there cruising the Web with browsers like
Opera, iCab, and Lynx even WebTVs and palm-sized devices. Each of
these browsers tackles the World Wide Web in a unique fashion.
And that's not all.
Even different versions of the same browser will treat Web pages in
their own special way. In other words, a site customized for Netscape 4.0
will definitely look freaky on Netscape 2.0. Plus, there's the whole
platform issue: Netscape and IE for the Mac will behave differently
than their counterparts built for the PC.
To see just how bad it gets, check out Webmonkey's Browser Kit, which
shows exactly what each browser supports.
What, oh what, do you do to make sure your site looks the way you
intended, no matter which browser a user views it on?!
The easiest thing to do is to simply drop in the ubiquitous "built for
Netscape 4.0" GIF and provide a link to the download page for that
browser. However, since this solution borders on a cop out (and drives
away all those visitors who don't have the time or modem strength to
download an entire browser to view your site), we recommend that you
employ other solutions to solve this multiple-browser quandary.
Unfortunately, these solutions are a tad more involved than simply
slapping up a GIF and calling it a day. So take a deep breath, and
let's get started.
Option One: Build for the Lowest Common Denominator
The safest route for site builders to take is to design for the oldest
browser with which a significant percentage of their audience will be
surfing. This plan of attack does lead to less exciting Web site
design (you can just kiss that dHTML and those Stylesheets goodbye),
but it's the most prudent tactic.
If you want to play it really safe, make sure your site looks good on
Netscape and IE 4.0 (or, for the really cautious, aim for the 3.0 versions).
Be sure to check how your site looks on both a Mac and a PC you'd
be surprised at how much darker colors look, and how much bigger the
default font size is, on a PC versus a Mac.
Option Two: Build Multiple Versions of Your Site
Build a "foyer" page, where you give your users the option of picking
the site version that best fits their browser and bandwidth limitations.
You've probably seen pages like this around something like "Choose
your path: High Octane or Regular," or the more straightforward approach
"People with 4.0 or greater browsers go here, everyone else go there."
Or, you can eliminate this somewhat annoying extra step by using a
"sniffer" that detects which browser a user is surfing with, and
automatically serves up the appropriate version of the site. You can
do this with a simple piece of JavaScript that can be found in the
Webmonkey JavaScript Code Library.
Whatever method you choose to get your users to the right version of
your site, you still have to rise to the challenge of creating multiple
versions of your site. This is a process that can lead you into sticky
territory. Updating and keeping track of several versions of the same
site can be quite an undertaking in fact, it can effectively double
your workload. Plus, there are the special details that need to be
considered when designing for atypical users viewing your site on
WebTVs and PDAs.
All things considered, you could be in for some serious work (and pain)
when you want to redesign and change the navigation, look, and feel of
each page on each version of your site.
Luckily, there are tools you can use (templates and XSSI, for instance)
to make multiple-site maintenance and redesign a lot easier on yourself.
Tune in next time to learn all about how it's done.
HINTS, POINTERS, and TIPS o' the TRADE
When it comes to browsers, it's easy to get sidetracked by the clash
of the titans: Netscape and Internet Explorer. There are some small, young upstarts
out there that are a.) much, much faster to download, and b.) often
outperform the two bloated behemoths. So, if you're frustrated by all
the extraneous capabilities of the Big Two, we suggest you take a look
at Opera or the Mac-only iCab.
You may find them positively refreshing.
One more thing: If you're pulling an all-nighter in front of your
keyboard and soaking in the cool monitor glow until the wee hours of
the night, here's a tip. Sure, it might seem like a good idea to place
your full cup of coffee within reach of your mouse-hand, but it won't
seem quite so ingenious when you discover that steaming hot joe is
suddenly pouring out of your disc drive.
RESOURCES:
Browser Kit: Find out which browsers support what.
Browser Detection: Discover which browser a user is running.
Why Browsers Haven't Been Standardized: Get an explanation
for why browsers are still so different.
Learn more about these alternative browsers: