cross-browser compatability testing basics

A subject that has come up repeatedly in class is cross-browser compatibility.  While many of the most frustrating web browser inconsistencies involve scripting (which we haven’t really gotten into yet) there are a substantial number of pitfalls to fall into regarding layout and CSS.  Also, the syntax of your HTML can lead to cross-browser frustrations (some browsers will fail to properly parse validated code, others will properly parse improperly written code and hide your mistakes from you).

The best way to assure you don’t get surprised when your pages are viewed on someone else’s computer connected to a differently-sized display device is testing, testing, testing!  This means installing several relevant browsers on your system and checking your pages’ behavior in them continuously during your development process.

What browsers should you care about?

In a perfect world, you could worry about every user and every configuration, but you have neither the time nor the resources to mimic every possible scenario, so pick your battles wisely.  There are a number of resources out there that track browser usage trends and tell you how many folks are using what including w3schools, w3counter, statowl, wikipedia.  If you want to track specific usage of your own site, ask your provider if they offer your web server logs or consider using a service like Google Analytics.

What screen resolutions should you care about?

When testing your web content, always resize your display or your browser window to at least as small as 1024×768 occasionally to make sure your content is usable.  This is a smaller screen resolution and narrower aspect ratio than many modern minitors and notebooks default to, but you will want to be supportive of netbooks, projectors, and older systems.  If you use Firefox or Chrome primarily, a helpful browser extension is available for automated resizing on demand.

How to mimic the user experience of another Operating System?

You have many options here.  If you use Microsoft Windows, the very least you can do is download Safari for Windows from Apple.  The rendering engine is the same as the OS X version and this will help you duplicate bugs that might effect a large number of Mac users.

If you are a Mac OS X user, the browser you’re most significantly missing out on is Internet Explorer.  There is no modern version of Internet Explorer for Mac OS X, but as a Pitt student, you are entitled to a free license to use Microsoft Windows (even if you only own a Mac).  Visit software licensing services on the second floor of Bellefield Hall to get yourself a Windows disc.  You can install Windows on your Mac using what’s called a virtual machine without having to mess with the partitioning of your hard drive or do anything difficult or dangerous.  A free tool available to do this is VirtualBox.  The complete user manual is available as a PDF.

Where can you turn when you can’t seem to fix an issue?

Sometimes solving cross-browser compatibility issues can drive you a bit nuts.  There’s nothing like that feeling when you finally get something working, and it just breaks someplace else!  There are excellent guides out there, including this basic tutorial from Smashing Magazine published last year.  Also, when in doubt, try clearing the caches of all your browsers.  Sometimes a change that you make may not immediately appear on all platforms.  Last but not least, always glance at your editor…did you hit Save and upload your new file yet? 😉

Drew Wallner


~ by atw17 on February 28, 2011.

%d bloggers like this: