Multiple Browser Testing: Beginner’s Guide

Are you a webmaster? Do you publish on the web? There is one big question any webmaster or site owner must answer: do my site looks as expected in different browsers and operating systems?

If you already know how to test the integrity of your design on different platforms and browsers, you may skip reading this post right now. For anyone new in website publishing: the testing services listed below are “a must”. Every browser (and even the same browser in different operating system) will render your html in a different way, and (unfortunately) often the end user can see something ugly instead of the beautiful page you designed. But (fortunately), there are very good and free cross-browser test services online and you don’t have any excuse to avoid them. These below are my favorites:

Adobe BrowserLab

This is one of the best and most used cross-browser testing services that works as standalone online service (https://browserlab.adobe.com/) and also from within Dreamweaver. I would advice, however, to use the online version with testing on real, remote server (not from your development machine). In fact, when I am building sites, I am always testing this way — local files tend to lead to problems. The way I am doing it: create a testt site online (some subdomain or a domain I am using for tests only), then uploading the site as on the final (real) server and testing this online demo. This is the closest thing to the real site I am building and gives me the exact result on how the final site will perform. But for quick tests while you are designing the Dreamweaver integration is fine. The browser lab service is still free — just go oand create your account with Adobe (they will ask for confirmation of your email in the usual “confirmation link” way).

How to use it:

1) Create an account at https://browserlab.adobe.com/en-us/index.html and click the confirmation link you’ll receive on your email address

2) login to the service home page (click the “Start” button at top-right:

3) Type the URL of the page you want to test and click the “refresh” button:

4) That’s it. you just need to wait some time to get your screenshots ready and then — just change the browser shot from the combo-box at top-left:

Hint: don’t forget to take a look on the options — for example, create your own browser sets to use when testing new pages or at least check the “view” options (top-right) to see which preview format best fits your needs…

BrowserShots.org

This is probably the oldest kid in town when it comes to cross-browser testing. It’s free and it works — what more one could want? Just go to http://browsershots.org/, type the url of the page you want to test, select the browsers / operating systems you want to test with and click “Submit”. Sometimes not all sandboxes are available, but that’s why we have BrowserLab service too — when one of them is out, the other may work…

Usage:

1) Go to www.browserShots.org and enter the URL of the page you want to test

2) Select the browsers and operating systems (just check the respective boxes). You can also select additional options from the comboboxes at bottom (screen size, javascript etc.)

3) Click the big green “Submit” button and wait until your screenshots are ready. You must stay on the “waiting” page because you may need to click a button to extend the waiting time (seems like feature made to avoid robots)

Hint: if you want to check the same site more than once per day, you’ll need to create an account.

These 2 browser testing services are among my “most visited” sites when it comes to web mastering. And I think I wouldn’t make a mistake if I say these are the best in what they do. But all such screenshot-based services come with one downside: you can’t see how your site works when user interacts with it. There are some nice options on the net that can fill that gap, but so far I didn’t find free one. However, lately I found one site that may be useful when the two above aren’t enough:

Spoon.net Browser Sandbox

You can create a free account at spoon.net to use their nice browser sandbox service (and will need to install a browser app to get it working, but everything is quick and takes under a minute). The big advantage of this service is that you can actually interact with the page you are testing. The disadvantage is that the free account is quite limited (you have only 2 minutes machine time per day) but well, that’s a good way to try the service and why not to test in one or two browsers some specific behavior of your page that doesn’t require so much time? I found the spoon.net site just weeks ago so, no long-term experience yet, but so far I tend to think this one could be one of the webmaster’s online friends…

To use it:

1) Create an account

2) Run the browser you want to use (on the first run you’ll be asked to install a plugin to your browser)

Hint: the free accoun gives you only 2 minutes usage time per day, but for quick test in specific browser that could be a good deal. Still, there is a downside: the service works on windows machines only (and that’s not the smartest thing on earth, because… well, why pay for their pro-version if I cannot use it from mac? I can install these browsers on any windows machine my own…but that’s another story)

No matter what you do, no matter how well your pages are looking offline, you must always confirm the result and these nice and free services listed above are one good way to test your site before making it public (or invoicing the client;-))

2 thoughts on “Multiple Browser Testing: Beginner’s Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *