Cross-browser compatibility has long been a frustration for website designers. What looks fine in one browser may be more or less “broken” in another, with sidebars shifted and elements overlapping... But does it really matter, how your website looks in different browsers, in the big picture of what your organization is trying to accomplish with an online presence?
Browser compatibility is about much more than a pretty presentation, although the importance of a professional-looking design should not be downplayed. Sometimes, the effects of how different browsers interpret the code for a web page are so pronounced that your website can be difficult to navigate for users of one browser or another. It can become less inviting, if not downright unusable, for a whole section of your potential audience.
Ensuring that your website works for the maximum number of visitors is always a priority. That’s why Wild Apricot software was just updated to be compatible with the newly released Firefox version 3 — which recorded a stunning 8 million downloads in 24 hours — and why usability guru Jakob Neilsen keeps a sharp eye on browser adoption trends since 1999.
To check how your website will perform on different operating systems, at different screen resolutions, and in various version of each available web browser — if that seems like a daunting task, it can be! Fortunately, we’ve come a long way from the days of asking friends with different browsers to check a website for us.
Browsershots.org is a free open-source online service for testing your website design in different browsers and on different operating systems. You enter the web address of your site, select the browsers for which you’d like to see screenshots, and join the job queue.
Bookmark the page — there's no option for getting the results by email — and you can reload it later to view your screenshots online and/or download the created screenshot images as a (compressed) zip file.
Tip: It may be tempting to select All for testing at Browsershots, but I’d advise against it — it’s a considerable drain on the service’s resources, takes a lot of time, runs the risk of creating errors or timing out in mid-job… and more to the point, for most purposes it isn’t necessary to test your site in every permutation. Use a good free web stats tracker such as Google Analytics to look at which operating systems, screen resolutions, and browser versions are actually in use by your visitors, and start your testing there. You can always run more browser checks later, if you determine that SeaMonkey 1.1 is a hot browser with your particular audience.
Browsershots is arguably the most comprehensive free tool of its kind — thanks to volunteers who run more than 100 computers to create the screenshots. If the time taken to create screenshots is more than you can spare, $15 can buy you a month of priority processing which bumps your job to the head of the job queue.
Total Validator is a good free HTML validation service that has proved itself useful to catch coding errors, broken links, and so on — and now includes the option to check your page in any of 32 browsers across Windows, Linux and OS/X. When I tested Total Validator’s browser check feature this week, however, I received an error message on three of four tries. It is a relatively new feature, so perhaps there are still a few bugs to be worked out — or perhaps I simply hit a time of peak load on the service. And I have not yet tested the desktop version of the tool.
There are also a number of excellent commercial services for testing your website’s cross-browser compatibility.
LitmusApp, for one, comes highly recommended by several designers I know who use it for checking email newsletters as well as website designs. There is a free plan, but it only includes Internet Explorer 7 and Firefox 2. To test your site in all 23 browsers supported by the service, you’ll need to move up to a 24-hour pass ($24) or single-user subscription ($49 per month).
When you know how your website looks and works for all of your visitors — not just those who use the same browser — you can better decide what steps to take to correct any discrepancies. Which cross-browser differences are mission-critical errors, and which are merely cosmetic? If Internet Explorer 6 doesn't render your web page exactly as you see it in Opera 9.5, that may be okay.
The big question is whether your audience can use your website as intended, regardless of the technology they use to view it.
Want to learn more about how your non-profit organization can make the most of social media on a small budget? Get updates from the Wild Apricot non-profit technology blog by RSS feed or by email, free!