How to Test Your Website in Multiple Browsers
Differences Between Web Browsers
If you create a website and only test it in your favorite browser, then you might find out later on that it looks different when it's viewed in another browser. There might be subtle changes which make no substantive difference, but there might also be other more serious problems, which would not give the right impression to people viewing the site. If parts of the text become obscured or overlap, or parts of the site are not properly aligned, then your visitors might well leave and never return.
The most common difference between browsers is the way they handle padding and margins. When you add elements (headings, paragraphs, images etc.) to your website, some empty space is inserted between them, to keep them separate. Unless you explicitly specify how much spacing there should be, the browser will use default values, and those defaults vary from one browser to the next. This means that the various elements in your website won't necessarily be spaced and aligned the same way in different browsers.
We'll cover the specifics, and how you should correct such problems, in a later section. For now though, the message from this section is that when creating your site you should test it in more than one browser.
Which Browsers Should You Test With?
According to HitsLink Market Share, the market share of the most popular web browsers in Q2, 2008 was:
- Microsoft Internet Explorer: 73.81%
- Firefox: 18.43%
- Safari: 6.14%
- Opera: 0.71%
- Netscape: 0.62%
- Mozilla: 0.11%
- Others: 0.18%
What you can see from this is that even though Internet Explorer is dominant, a significant number of people are using other browsers. So, if you only ever test your pages in IE, you may be losing nearly 30% of your potential audience if your pages don't display correctly in other browsers.
Of course, this data was compiled before the release of Google Chrome. Based on the reaction when the beta version was first released, it's reasonable to expect that Chrome will take a significant share of the market.
Using Browsershots
While you can install a few different browsers to test your site with, it's not practical to install them all. You can still find out what your pages look like on numerous browsers by using a service like Browsershots. This loads your page in a wide variety of browsers running on several different operating systems, and then displays screenshots to show you the results.
To use Browsershots, simply enter the URL of the page you'd like to test, select the browsers you want to test with using the check boxes, and click on the “Submit” button.
As your page gets loaded in each browser, a thumbnail is added to the page showing the results. It can take a while for all of these to appear, especially if you run the test during a busy time. The results expire after 30 minutes, but there is an “Extend” button if you need to increase this limit.
Rather than just looking at the thumbnails, you can also download a zip files containing all of the images via the download link which appears next to the screenshots. This allows you to open the full-size versions of the images and analyze them in more detail.
Interpreting Browsershots Results
Looking through the results, the page we tested shows a couple of problems. Firstly, Opera 9.5.1 on Ubuntu 8.04 displays the bottom of the page like this:
This isn't really a problem though, because the content is OK and it's only missing an ad unit, presumably because that browser didn't have the correct plug-in for that ad type (flash).
In a number of browsers, though, we can see something like this:
The search button has wrapped so that it's underneath the search text box, rather than beside it. Clearly there's something wrong with the way that the search box is sized and positioned, so that it doesn't always display as we intended. Since this happens in a few cases, and hopefully the fix is pretty straightforward, we should look into this.
Sometimes things that show up here may not be problems at all, of course. For example, a screenshot may not display your page correctly if there were a network problem preventing your page downloading correctly at the time that the screenshot was taken. If you suspect this may be the case, then it's worth re-running the test for that particular browser, to see if the issue really was just a once-off occurrence.
What We Do
We're not necessarily saying that this is the right thing to do, but we do the following:
- Have the latest versions of Internet Explorer, Firefox, Safari, Opera and Chrome installed on our machines.
- Routinely test our web pages using those 5 browsers.
- Occasionally spot check a random page in Browsershots. If this throws up something significant, we'll look into it. But, if it just shows up problems with obscure configurations, then we don't usually spend time investigating (figuring that our time is better served adding content to the site than investigating problems which will only ever affect a tiny handful of people).
<-- Previous Page Using Templates |
Next Page --> Frequently Asked Questions |
| Privacy Policy |
|
|
© 2008, www.computer-answers.info. All rights reserved. |