One of the first things I have noticed, when I started out as a web designer, was the importance of testing your designs with different browsers. If you omit it, chances are that a part of the audience might see something totally different than what you have envisioned with your design. However, I must state that no matter how important testing is, it still stands second to a well implemented design. This is why you should make sure you know your theory, and stay up to date with the best practices. With this article, I hope to answer some fundamental issues in the testing process.
When to Test
It might seem like a no-brainer, but you should consider the caveats. If you test too early and it turns out you have to make more changes, you will probably have to spend time in order to test again. This is why you should test the design when the client is happy with it. Ideally, you should test only once for the initial implementation, and once more for each further change the client requests, if necessary.
What to Test
You should have a predefined list of browsers to test against, because it gives you a consistent set of goals for performing quality checks on the implementation of your designs.
Additionally, some customers might come with their own demands for testing. If they are not in your list, you might choose to charge them for the extra work. If the request is something you consider unreasonable (for me that would be testing for IE 5.5, or wanting to have the design looking perfect for IE 6), you will have to talk to your customers about that and manage their expectations.
If you are left unsure with what to test against, I have a few suggestions for you:First, make sure you have all the modern browsers covered, i.e. latest versions of Firefox, Chrome, Opera, Internet Explorer (IE), and Safari (and maybe Konqueror if you have access to it). Most of them have a decent updating system, so the dominant version in the wild, will likely be the one up to date. If not, browsers other than IE are highly consistent with their rendering between versions, at least so far. For that reason, it should be fine to test against the latest ones, while still keeping in mind the browser compatibility, or maybe using a JavaScript-based tool like Modernizr to manage the compatibility for you.
Second, you should include all previous IE versions from 7 upwards. This is easy if you have access to a Windows machine, or otherwise you might need to use an emulator or a browser testing service. The good thing is that the F12 developer tools in IE9 let you emulate versions 7 and 8, so you do not need to install separate copies for the different versions. I would not really bother with IE6 at this point, but it all depends on what your customers want, and the amount of people currently using it. If the customers have an existing website they might have access to some visitor statistics to help make the decision. Otherwise, you could try using the statistics information of a third-party source, like http://www.ie6countdown.com/. If your customers are okay with letting go the portion of their audience which uses IE6 as a browser you might be fine. If not, you should insist for using progressive enhancement with your design.
Additionally, if you care about mobile browsers, be sure to test for them too. I suggest getting your hands on an iOS and an Android device. If you do not have the budget for that, you might try the free Android SDK—it comes with an emulator for Android (which unfortunately starts up a little slowly) and Xcode—for the iOS Simulator, but you need a Mac to run it and you have to pay a subscription for it.
When it comes to choosing which pages to test, if you already have a huge site with many pages, it should be okay to test only the ones with one or more unique design features (like extra widgets, differing layouts, or the error pages). If your design is flexible enough it should suit the possible variations in content for the rest of the existing pages. You should also try testing against different screen resolutions and keep in mind browsers with varying amount of chrome taking up the space of the screen. This can be accomplished most easily by resizing your browser window while testing, and designing with the thought that “not everyone surfs the Internet, looking at a screen identical to yours” in mind.
