Browser Beatings:
Design with Browsers that Suck

All Browsers Suck.

Really. Even Netscape Navigator. They all suffer from the same universal problem: none of them follow all the rules all the time. Why? Well, it can be explained by the rush to get the things out the door--after all, the Web exploded before any of the popular browsers left beta--or it can be explained by the complexity of the standards (although, arguably, they aren't that complex). Maybe it's just that when one standard, say HTML 2.0, gets somewhat established another cooler one, say HTML 3.0, begins poking its head out of its egg and browsers start acquiring features from the new standard before they get all the previous standard's bugs worked out. Regardless, what now exists is a mishmash of Web browsers with various quirks, bizarrities and--yes--even bugs which plague your best design efforts and make you run around the office yelling "Life sucks! The Web sucks! Computers suck! I should have listened to my mother...." (Well, okay, maybe I'm putting a little more personal experience here than necessary, but you know what I mean ;-).

So what do I do?

Well, there two ways to go about this: a technological approach and a design approach (well, okay, there's also the Zen approach, but I've never been able to just be with my browser, so I'm not qualified to write about it).

The Technological Solution

For most designers, this is a tough one, but I feel it's an important enough (and underused enough) feature of the Web to mention.

Anyway, here's the scoop: every request that's made to a Web server by a Web client (which means, basically, every page that's not cached) contains some telltale information about what browser is being used. This is the User-Agent: line of the HTTP header. Thus, it's possible (in theory) for the server to use this information and serve different pages, or parts of pages, to different browsers. A person looking at the page with Lynx would see a much different (and, hopefully, much more appropriate) page than a person looking at the page with, say, Netscape Navigator. Unfortunately, few servers do this and even fewer designers get to take advantage of such technology. EXAMPLE

The Design Solution

In the absence of the necessary technology, the best that you can do is to make it so that your site caters to the widest possible audience. It's very important that the site be usable by any browser.

So how do you design with every browser in mind? Well, to contradict what I just said completely, you can't. Remember the mantra: "All browsers suck." There are, however, a number of things that you can do to maximize the acceptability of your designs in the Web world:

Make your site read well both with and without graphics.
Most people connect to the Internet via modem. Most modems are 14.4 modem. 14.4 modems are much, much slower than the connection you see when you design your site (unless you're designing over modem, in which case I feel for you and have a '72 Nova you may be interested in driving to work). Users who use such things with any intent of getting some work or shopping done will likely turn off graphics or use a nongraphical browser at some point in their Web surfing. You need prepare for such "text-only" situations. A good way of doing this is through appropriate usage of the ALT= modifier to the IMG tag. When creating these, make sure that the text either matches the text of what's contained in the graphic, or describes the graphic in some useful way.
There's also no rule that says that users have to know what they're missing. Seeing "Groovy Picture" isn't very pleasant or useful if the person can't see the picture. In situations like that, it's better to just make the tag look like <IMG SRC="groovy.gif" ALT=""> . This will mean that Lynx users see nothing instead of the picture.
Note also that the ALT= technique doesn't work very well with ISMAPs, for obvious reasons.
Since modems are so cheap, you may consider buying one and hanging it off your computer. Then, when you're wondering how Betty Modemuser will see the site, just try it yourself. It'll be eye-opening (or closing), trust me. ;-)
Make sure all of your site reads well on different monitors.
Everyone doesn't have the same monitor. Certainly, the majority of people out there don't have 32-bit color 21" monitors. Therefore, it's important to make sure that your design looks good on Abe Littlemonitor's computer. There are two parts to this: color depth and image real estate.
You can make sure that you're not making an unreadable image by looking at it under various color depths (black and white is a particularly useful, and painful, one to try). Add plenty of contrast between the background of the image and the informational content. This will help you prevent the dreaded "Big Black Rectangle of Doom" effect.
When I surfed the Web as a youngster I noticed the following effect: occasionally, I would bump into a site where I with my puny 13" Apple Trinitron could see either the left half of all the pages or the right half, since its designer assumed that everyone had 21" monitors. This is bad. The average user probably does not have a screen the same size as yours and probably doesn't want to make their Web browser the full size of their screen. A good "standard" to go by for maximum image size (with appropriate browser window borders and whitespace) is standard US sheet width: 8.5 inches (21.6 cm). This gives you a pretty good shot at being able to fit on their screen and it gives them the option to print out your page and proudly hang it on their refrigerator.
Rely on esoteric browser features as little as possible.
Sure Arena, Netscape Navigator and Mosaic have cool "special" features, but if you assume those features when making your site, then you're eliminating all the people who don't have the exact browser and version you're depending on. The pages you create may look bad or--in the worst case--unreadable. EXAMPLE
Because most browsers ignore tags they can't understand, it's OK to use some tags (such as Netscape's handy <CENTER>) with relative impunity, but you shouldn't rely on such things for the basis of the look or functionality of your site. In our studio, we have a pretty big "browser zoo" and use the following 5 browsers as benchmarks for our stuff: Netscape Navigator 1.*, Lynx 2.*, NCSA Mosaic 2.*, Prodigy, AIRMosaic 3.*. When we complete a site such that it looks fine on the benchmark browsers, we go over it with all the other browsers we have, on all the platforms we have access to.

Minimizing the Suckage

Ultimately, the most important part of your design is the user experience. Put yourself into as many users' shoes as possible and go through the site in its entirety, writing down any rough spots. When you've done that and fixed the problems, invite some friends over, buy them some pizza, and let them go through the site in its entirety. Ask them questions, look over their shoulder. Try to see, as many perspectives on your work as possible before releasing it to the Net. The result should be a site that's usable by as many people as possible, without worry about what browser they're using. ('Cuz you know they all suck ;-)