Working with Different Browsers

One of the most frustrating aspects of web design is that different browsers—and even different versions of the same browser—display pages differently. As a designer, it can be difficult to cede control over the final page layout to the whim's of your audience and the peculiarities their favorite browsers. Unfortunately, you don't really have a choice in the matter... giving your audience control over their own web experience is not only an inherent aspect of the medium, it's one of its most alluring aspects as well.

Web usage statistics

As of May 2007, web audiences used the following browsers. Current and historic usage statistics can be found at w3schools.com. (Click the links below to visit the download pages for each browser.)

% Browser
19.2%

Microsoft Internet Explorer 7
38.1%

Microsoft Internet Explorer 6

1.5%

Microsoft Internet Explorer 5

1.6%

Opera
33.7%

Mozilla Firefox
1.5%

Apple Safari
1.3%

Mozilla (pre-Firefox)

Browser peculiarities

The differences between browsers manifest themselves in many different ways, including:

User settings

In addition to browsers behaving differently, you will also encounter user settings and preferences that can override your specifications. Opera, for instance, allows a user to specify the minimum size text that the browser will present, overriding the author's CSS and potentially wreaking havoc on a static layout. The user may also opt not to load images, or they may have plug-ins (such as Adobe Flash, Adobe Acrobat, or Quicktime) disabled. The resolution of the audience's screen will also vary. As of January 2007, web audiences used the following screen resolutions (current and historical usage statistics can be found at w3schools.org):

% Resolution
26% Higher than 1024 × 768
54% 1024 × 768
14% 800 × 600
0% 640 × 480
6% Unknown

 

What now?

So what is a web designer to do? With so many different ways of rendering the exact same source code, how can a designer exert any control over the audience's experience?

  1. Give up the idea of designer omnipotence. You may find it helpful to rethink what your job is as a designer... you are there to ensure that your site works well rhetorically, not to show off your prowess and control. Making a rhetorically successful site typically means ensuring a pleasant, hassle-free experience for the audience, including allowing their tastes and preferences trump the rhetor's where appropriate.
  2. Keep it simple. Don't get caught up always trying to do the latest and greatest, and remember that the cutting edge is where the blood is. Re-evaluate your rhetorical triangle, and ask yourself, "is it really necessary to use animated GIFs/Flash/Ajax/the current flavor-of-the-month technology to accomplish my purpose, given my audience, context, and rhetor?" Just becasue a technology is available to you doesn't mean it's prudent to use.
  3. Follow web standards. Many browsers have problems following this piece of advice, but that doesn't mean you should. Building standards-compliant web pages is a good hedge against quirky browsers messing up your design.
  4. Test, test, and then test again. This simply cannot be stressed enough!