Wild Apricot Blog

View: Tags  |  Archives

Sign up to have the latest blog posts sent straight to your inbox!

    or RSS feed:  

How to Check Your Website on Different Browsers

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?

Yes.

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!

Get a Special Report on Simplifying Membership Management

Enter your e-mail and receive this special report in your inbox.

Learn how to stop doing all those tasks manually.

Get frustration-decreasing, time-saving, stress-relieving membership management tips in your inbox.

Comments

  • Sharon Hurley HallSharon Hurley Hall

    Sharon Hurley Hall said:

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

    Wednesday, 02 July 2008 at 9:46 AM
  • taptap

    tap said:

    Yes, I spend so much time checking different browsers

    and operating systems, for every new site created.

    Thanks for this great post!

    Wednesday, 02 July 2008 at 1:56 PM
  • DamienDamien

    Damien said:

    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

    Wednesday, 02 July 2008 at 6:19 PM
  • Rebecca said:

    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.

    Thursday, 03 July 2008 at 6:38 AM
  • CelineCeline

    Celine said:

    Hi Jen,

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

    Celine

    Monday, 07 July 2008 at 6:14 AM
  • Brad BellBrad Bell

    Brad Bell said:

    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.)

    Wednesday, 09 July 2008 at 4:00 AM
  • Rebecca said:

    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.

    Wednesday, 09 July 2008 at 4:50 AM
Sorry, this blog post is closed for further comments.
Membership Software - Wild Apricot For sales and support questions, call us!
1-877-493-6090 or schedule a callback
Not a big talker?
email support@wildapricot.com
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7