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 the time to test your web pages to ensure that they will display properly in all the different web browsers, operating systems, and monitor sizes that your visitors are likely to use.
It is essential that before you “go live” with your site, you must preview your pages in as many web browsers as possible to make sure your site isn’t broken or distorted because of a quirk in your HTML code.
If you don’t have all the possible browsers available installed on your computer, don’t worry. The online services listed below make it possible for you to test how your site will display in dozens of web browsers on four different operating systems (and all you need is one, updated web browser to use these services).
Take a look at the two screenshots of the Austin Texas massage website shown above. This demonstrates a common problem and an example of how different websites can look on different browsers. 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, 8, and 9 do a better job of handling CSS (even Microsoft has publicly said they have stopped supporting the notorious IE6). Most of the design breakdowns 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. Think of it like having a super-fast mechanic who can take a box full of parts and assemble all the springs, gears and panels into a toy car in the blink of an eye.
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 the ways browsers assemble all those parts leads to unpredictable (and often frustrating) results, because a page that looks good in one browser may be almost unreadable in another.
Why Don’t Web Browsers All Work the Same?
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 the advanced features that modern web pages use to make your websurfing experience more engaging and fun.
Compounding this problem, the companies that make web browsers — 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 mentioned earlier, IE9 is the newest release from Microsoft (and IE10 is waiting in the wings), 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 website. 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 websites that look good to everyone who may visit your pages. HTML was designed to try to ensure that web pages look good on every possible combination of hardware and software on the planet. 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 all browsers, on all platforms, is difficult (if not downright 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 the browsers that your visitors use. (Read this article to learn more about using website traffic statistic services, such as Google Analytics, that will provide you with 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 14, 23 percent uses Firefox 11, 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 websites 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 on DigitalFamily.com that are designed to look best in the most recent and most commonly used browsers on the Web, including IE9, 8 and 7, and the latest versions of Firefox (they have recently taken to rolling out new versions at much shorter intervals, so they went from Firefox 4 to Firefox 15 quicker than Microsoft went from IE6 to 7). 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: The same Web page may look very different on a 21 dpi (dots per inch) monitor than it does on a 15 dpi 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 (although newer “widescreen” displays have resulted in the 1366 x 768 resolution recently vaulting into the #1 spot); on a Mac, the resolution is generally set much higher (especially on the new “Retina Display” MacBooks), 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.
Test your web site in these online browser tools & emulators:
- The Browser Sandbox: By far my favorite, this site does more than take screenshots, it lets you test any site in different browsers. 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).
- CrossBrowserTesting.com provides ‘‘virtual machines’ where you can test your site on different operating systems as well as different browsers. 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).
- SauseLabs: Provides a professional grade testing service, for a fee.
- Adobe BrowserLab: Adobe closed this service in March 2013.