Tripod
Tripod

   handcrafted

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:


 
Subscribe/Unsubscribe

Handcrafted Archive

2002 March
February
January
2001 December
November
October
September
August
July
June
May
April
March
February
January
2000 December
November
October
September
August
July
June
May
April
March
February
January
1999 December
November
October
September
August
July
June
May
April
March
February



    Tripod: Home | Site Map | About Tripod | International | Tripod Help | Report Tripod Abuse | Members | Angelfire Members

     » Lycos.com  © Copyright 2009, Lycos, Inc. Lycos is a registered trademark of Lycos, Inc. All Rights Reserved.
     About Lycos | Help | Jobs | Advertise

     Your use of this website constitutes acceptance of the Lycos Privacy Policy and Terms & Conditions