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.)
The differences between browsers manifest themselves in many different ways,
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
||Higher than 1024 × 768
||1024 × 768
||800 × 600
||640 × 480
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
- 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.
- 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
- 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.
- Test, test, and then test again. This simply cannot be
- Test your site on multiple browsers. Download and install the
above browsers and load your page on each one. Scan through all of your
sites content... just because one page looks right doesn't mean they all
- Test your site on different machines and operating systems.
Don't think your job is done just because you tested everything
on a PC... switch over to a Mac and load the pages again. Load the pages
on every system and platform that you can get your hands on.You can also
use online tools such as broswershots.org
to get screenshots of your page as it will appear on different machines.
- Test your site on different displays. Don't forget to check
out your site on different displays as well, such as a CRT, a flat-panel
monitor, or even a projector... there can be surprising variations among
these different displays, particularly when it comes to color. Also, change
the resolution of your display
- Test your site by changing the size of the windows. Make sure
your layout behaves as you expect by changing the size of the windows.
Is your layout fluid, or does it "break"? You may also want
to try making the window very small and narrow, in order to simulate a
handheld device like a cell phone.
- Test your site by changing the size of the text. Make sure
the default-sized text is readable across different machines, and make
the text larger and smaller to test the design of your layout.
- Test your site by removing fonts. Uninstall fonts (or change
the CSS) to see what your page will look like on machines without the
exact fonts you specify. Are the results still acceptable?