Wild Apricot Blog

View: Tags | Archives

How to Check Your Website on Different Browsers

Lori Halley 02 July 2008 7 comments

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.

Wild Apricot screenshots from Browsershots.orgBookmark 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).

Browsercam does an excellent job of checking the cross-browser functioning of any dynamic elements of your website — forms, javascript navigation, etc. — and the 24-hour free trial will give you up to a maximum of 200 screen captures. Basic “web capture” plans start at $20 for one day, or $60 per month; another $10 per month adds “device capture” for checking how your site appears on web-enabled mobiles and PDAs.

And here’s a real bargain if you’re primarily interested in ensuring compatibility for Mac OS/X users who come to your website, $3 will buy 2 days of Browsrcamp service. “This is the easiest way to test every aspect of your website on Mac, including Javascript, DHTML, Ajax, Flash, etc.,” the service says, with 11 Mac browsers supported. Apple Safari screenshots of your website are free.

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!

Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Wednesday, 02 July 2008 at 5:11 PM


  • Sharon Hurley Hall said:

    Wednesday, 02 July 2008 at 9:46 AM

    I could have used this a couple weeks ago, but it's a useful resources nonetheless.

  • tap said:

    Wednesday, 02 July 2008 at 1:56 PM

    Yes, I spend so much time checking different browsers

    and operating systems, for every new site created.

    Thanks for this great post!

  • Damien said:

    Wednesday, 02 July 2008 at 6:19 PM
    Cross-browser compatibility has long been a frustration for website designers

    This has indeed caused me lot of frustration when I was designing my wordpress theme. What works perfectly fine on Firefox turns out to be a trash in IE. Thanks for your list of recommendation. I will be trying them out. Hopefully they can save me hours of frustration

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Thursday, 03 July 2008 at 6:38 AM

    It seems that Internet Explorer 6 is the source of much frustration, 'reading' web pages by its own standards and rendering fonts and spacing much differently from other browsers - I'd even venture to say that IE6 is one reason why we don't see as much fluid design vs. fixed page width, any more. Designer frustration! And if the recent Salesforce browser stats report is anything to go by, we may be checking for cross-browser compatibility for some time to come.

  • Celine said:

    Monday, 07 July 2008 at 6:14 AM

    Hi Jen,

    This article is very helpful.  I have encountered this problem and did not know that it was a browser issue.


  • Brad Bell said:

    Wednesday, 09 July 2008 at 4:00 AM

    One thing to note about BrowserShots, and undoubtedly many of the other screenshot services: everything is emulated, so they aren't 100% accurate. Don't trust the results for Internet Explorer 5.5 for example. (Read why below).

    Another thing I've been checking lately is how the site translates. Traffic reports for a site I was working on showed merely half of visitors were English speakers. So either they were translating the site, or simply leaving immediately. Suddenly, it's very important that the site translates properly and images aren't used for text. Anyway, it's fun. See how your site looks in Czech.

    Why you can't trust results for Internet Explorer 5.5

    With screen shot services, everything is typically emulated. Otherwise, places like BrowserShots would need 10 times as many computers. And that would be silly.

    In the BrowserShots report for example, you can typically see that the computer taking the browser shot is running Linux, and using software like VMware to emulate Windows. But that's not even where the problem is.

    The problem is that you can only install one copy of Internet Explorer (IE) on Windows at a time - which makes testing impossible - unless you use a hacked version of IE that you got from the very nice people at evolt.org, for example. Evolt provides versions of IE that are hacked to allow you to install version 5.5, version 6, version 7, etc. all on the same computer so you can test your site.

    However, there's a glitch: designers rely on snippets of code called 'conditional comments' to tell IE and IE alone to use specific code to layout your site.  Typically each version of IE needs it's own special code. The problem is - as QuirksMode notes:

    "If you have multiple Explorers installed the conditional comments will view each install as the highest installed version (usually IE 6)." This means IE 5.5 will use the wrong code and the site will look wrong - even though it may not actually be wrong.

    The simple conclusion: Internet Explorer 5.5 will probably look wrong in BrowserShots. This may have changed since I last used BrowserShots.

    (Incidentally, I confess I haven't checked my own blog yet as it's not actually even done yet. I don't even have an About page. But I've followed web standards, so it's probably basically right.)

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Wednesday, 09 July 2008 at 4:50 AM

    Brad, thanks for a great contribution here - and especially for picking up on a point that I should have made clearly: "emulation" is the key word. And, as the word implies, the emulation of browsers by screenshot services like Browsershots, while very useful, is not perfect.

    Browsershots will do the job for most of us - especially as IE 5.5 usage continues to drop off - but professional designers (or people with a 'finicky' website design that won't degrade gracefully to older browsers) may want to use a paid service like Browsercam, mentioned above. Browsercam is not an emulator but a remote testing service, using a pool of computers set up with different OS and browsers. That's why it can test dynamic aspects of a website for you as well as the general appearance.

    My suggestion? Use Browsershots for troubleshooting in the design stage, or when a new browser is released (as Firefox 3 just was) and you need to make sure your website can handle it. Then, especially if your site stats show a wide range of browsers in use by your visitors, take advantage of something like Browsercam's 24-hour free trial to do the fine tuning.

    BrowserPool is another live-testing service you might want to consider, for about $48/month - I haven't tried it yet myself so can't give a first-hand report, but they do offer a free test account.

Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Scroll to top