Test your site in many web browsers: Internet Explorer, Firefox, Safari, Chrome, and more
It’s a shocking scenario: You create a page design that looks just perfect in your favorite Web browser on your own computer.
You publish it on the Internet and tell all your friends.
And the next thing you know, your cousin in Iowa and your friends in Brazil are telling you that it looks terrible, the text is unreadable, and your Flash files don’t play at all.
Don’t let this happen to you.
Take time to test your web pages can make sure that they will work well in all the different Web browsers, operating systems, and monitor sizes that your visitors are likely to use.
Before you “go live” with your site, preview your pages in as many web browsers as possible to make sure that your site looks the way you intend. If you don’t have that many browsers on your own computer, don’t worry. You will find a collection of online services below where you can test how your site will display in dozens of Web browsers on four different operating systems.
If you take a look at the two screenshots of the Austin Texas massage web site above, you'll see a common problem and an example of how different web sites can look on different browser. This problem was caused because not all browsers assign the same amount of space to elements that use padding and margin space in CSS, the second column drops below the first and the design falls apart in Internet Explorer version 6 (which is notorious for not displaying pages according to CSS standards).
Fortunately, IE 7 and 8, do a better job of handling CSS and most of the problems you'll find between browsers aren't this dramatic, but things can get ugly. FYI -- the designer of this site (Jeff Noble) was careful to make sure the final, published site at www.AustinRelax.com looks good in many different web browsers.
How Web Browsers Work
Essentially, browsers read the code in a Web page and interpret how to display the page to visitors.
Unfortunately, because Web browsers are created by different companies and the code they display has evolved dramatically over the years, not all Web browsers display Web pages the same way.
Differences in browser display can lead to unpredictable (and often frustrating) results because a page that looks good in one browser may be unreadable in another.
Why Don't Web Browsers All Work the Same?
Test your web site in these online browser tools & emulators:
The Browser Sandbox: By far my favorite online tool for testing web sites in different browsers on a computer screen, this site gives you the chance to surf through any site with the most popular browsers on the web.
Just click on the browser you want to test with to launch IE, Firefox, or Safari (in multiple versions) as if the program were installed on your computer. Then enter a URL and see how it looks. It's easy and robust.
BrowserShots.org — Enter any URL into this online tool and it will return a collection of screenshots of the site as it appears in a long list of browsers.
You can pick and choose which browsers to test in, the more you choose, the longer it takes. You usually get results in 5 to 45 minutes (faster if you pay for their premium service).
For more advanced testing (albeit more time-consuming) visit CrossBrowserTesting.com where you can use ‘virtual machines’ to test your site on different operating systems and browsers.
Want to see what your site looks like on IE 5 on Windows XP? (Brace yourself, it may not be pretty, but you can do it on this site). The biggest advantage of the CrossBrowserTesting.com is that you can experiment with interactive features on your sites, so you can see how drop-down menus, collapsible panels, animations, and other dynamic features will work in different environments (which can be far more useful than just how they look in a screenshot).
Now I'm looking for the best mobile phone emulators. If you know of any good places to test how a web site looks on a mobile phone, please email me janine@digitalfamily.com
Of the many reasons why Web pages can look different from one browser to another, it boils down to this: Web browsers have evolved over the years to support new technologies on the Web. Thus, many older browsers still in use have trouble displaying some of the advanced features you can use on your Web pages today.
Compounding this problem, the companies that make Web browsers @@md including Microsoft, Google, and Apple -- don’t all agree or follow the same rules (although most are getting better at complying with the same set of standards in their latest browser versions).
Dozens of browsers are now in use on the Web, not counting the different versions of each browser. For example, as I mention earlier, IE8 is the newest release from Microsoft (at the time of this writing), but a significant percentage of Web users haven’t yet upgraded and are still using IE7 or even IE6, which is notoriously bad at displaying CSS (Cascading Style Sheets) and other modern Web features.
The result is that the same Web page can look significantly different to the many people who visit a Web site. The differences can become even more pronounced in older browsers or in monitors of different sizes.
This challenging aspect of Web design is at the root of many of the limitations and complications of creating Web sites that look good to everyone who may visit your pages. HTML was designed to help ensure that Web pages look good on every computer on the planet, and as a result, some of the rules of Web design may seem strange or limiting at first.
Despite these efforts, and a growing movement toward more standardized Web development, getting your pages to look exactly the same on every computer on the planet is difficult if not impossible. As a result, most designers strive to create pages that look as good as possible on as many browsers as they consider important, even if the same pages don’t look exactly the same on all browsers.
Which browsers you should design for depends on your audience. If you have the luxury of having accurate reports on the visitors to your site, you can see a list of all browsers used by visitors to your site. (Read this article to learn more about using Web-statistic services, such as Google Analytics, that include browser usage information.)
For example, your Web statistics may reveal that 27 percent of your audience uses IE7, 18 percent uses IE6, 25 percent uses Firefox 3, 23 percent uses Firefox 2, 5 percent uses Chrome, and 2 percent uses Safari. With those numbers in mind, you may decide that your pages should look attractive in IE and Firefox, but you’ll settle for them not looking quite as good in Safari and Chrome, which at this point have lesser percent of your audience and display some features quite differently.
Entire books and Web sites are dedicated to the differences among browsers, and how to best design for everyone on the Web. To help keep things simple for you, I include templates in this book that are designed to look best in the most recent and most commonly used browsers on the Web, including IE8 and IE7, and Firefox 3 and 2. However, you should note that making significant changes to these designs may result in unpredictable results, which is another important reason to test your work thoroughly before you publish your site.
More than just browser differences
In addition to the differences among browsers, keep in mind that there are other factors that can affect the way your pages look.
Hardware differences: Another challenge comes from the differences between Macintosh and Windows computers. For example, most fonts appear smaller on a Macintosh than on a PC (Times 12 on a PC looks like Times 10 on a Mac). Image colors can also vary from one computer to another.
Monitor resolution settings: In addition, the same Web page may look very different on a 21 dp monitor than it does on a 15 dp monitor. And even on the same monitor, different resolution settings can alter the way a page looks. On a PC, a common resolution is 1024 x 768; on a Mac, the resolution is generally set much higher, making the design look much smaller, even if the monitor sizes are the same.
Browser and computer preferences: Finally, remember that your users can change many things about how your page appears on their computer. For example, you can enlarge the font size in most web browsers
In Firefox, you can choose View > Zoom in or Out to enlarge or reduce the entire size of a web page. In Internet Explorer you can change the text size, independent of the rest of the content on the site, and that can really change things. It's why most of us recommend you create 'flexible layouts,' so that they adjust gracefully to browser differences.
...
Partners and sponsors
