The same Web page, shown in Firefox 3
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 multimedia 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.
The same web page shown above, displayed in Internet Explorer 6
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, current versions of IE 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.
Janine,
Thanks for the resources.
Sir,
Thanks a lot
very nicely explained.
Mani Nair, Bhopal. India.
“(even Microsoft has publicly said they have stopped supporting the notorious IE6)” . . . not true. Microsoft supports a browser as long as the OS the browser shipped with is supported. IE 6 shipped with Windows server 2003 R3 (I think that is the version number). So it officically dies on April 8th, 2014. http://www.ie6death.com/
Thanks for the comment, but you’re breaking my heart with that message, Carl. And you’re probably right, but I do believe that there was some, perhaps less official, message sent out to large organizations and others who were still using IE 6 that even Microsoft no longer recommends it… Thanks for the link.
Yes, you are completely correct. Microsoft had there own “death of IE6” party when the browser fell below 1% in the US and was dead to them (but sadly still officially supported): http://www.slashgear.com/microsoft-says-goodbye-to-internet-explorer-6-03205749/
Microsoft even created a countdown page to track IE6’s demise around the world: http://www.ie6countdown.com/
But it officially dies on April 8th 2014. I created a death to IE6 event in facebook and me and several other web developers and usability groups will be toasting the official dead of this dog.
Thanks, Carl, I appreciate you helping me to fill in the details with the full story.
Is there any way to prevent this incompatibility?
I have a similar problem, but i cant know which browser the costumer will use.
it seems that IE and chrome have different screen size (IE opens the site with a scroll bars)
is there any way to make my site fixed on the same size and resolution on all the browsers?
thx
Hi David,
Sorry, but this really is one of the biggest challenges of being a web designer. You never know for sure what your client, or anyone else who visits a website will be using. That’s why these testing tools are so useful, they make it possible to test your site in browsers and on platforms that you don’t have yourself.
Most designers these days choose a target, for example, the last 5 versions of the top 4 web browsers, and then let their clients know that the site is not guaranteed on web browsers that are older than that.
Another useful way of limiting the target is to view the analytics reports from the site and see what the most popular browsers are that visit your site. You can find general reports about browser popularity but what matters most is who is visiting your site and making sure that the pages look good to your audience.
hope that helps you deal with this common challenge,
Janine
Hi everyone,
I’am a recent graduate and i’am doing an attachment with a company, i was given a project to develop a website it is my first website and it looks just as awesome but however after loading it on the server for testing it is giving different views on different browsers and PC’S can anyone help me on this. what should i do to get rid of it???
There are many reasons that a website may display differently in different web browsers. One resource that may help you is the site http://caniuse.com/ On that site you can look up any HTML or CSS tag and find out if it has known problems on different web browsers.
Scrolling vertical is fine, although extremely long pages should be avoided – and always put the most important stuff near the top (above the “fold”). You should never have horizontal scrolling. Do a google search on responsive web design. You will find many great examples and tutorials on how to create a page that flows well regardless of monitor size.
“after loading it on the server for testing it is giving different views on different browsers” – did it look the same on these differet browsers before you uploaded it to the server? If not, you already have your answer. All the major browsers come with developer tools that help you examine individual page elements to see how the various style impact these elements. If you are not very familiar with HTML and CSS then there is nothing I could say to point you in the right direction. An online class or tutorial (search google – a ton of them out there) would go a long way to help in understanding your issues.
In firefox one of my sites is in color. And one of my sites is in black and white… it looks like the css file is not being read. The black and white site has text at the top and that text is highlighted in red. That site is http://www.ghbservices.com. And the site that is in color is http://www.sb-help.com has almost the exact same text at the top and it is highlighted in blue. Why is ghbservices in black and white… no css file usage? Thank you.
Ok it’s “fixed” now. Thank you for your helpful article! 🙂
I see color on both sites. Did you fix the problem or does it only look black and white on certain browsers?
It used to only have color on IE. My sister had me move all of the css over into the html file… and that “fixes” it on firefox, safari, and chrome. But now it’s an insane mess of code… oh well. It works now. 🙂
Hey,
Just to add on the list there is also a tool which works awesome in regards of emulators, it is very easy to use and gives almost all the options like mobile phones, different browsers with their versions too, game console like play station, xbox, etc. I have used it for long time and it is really worth.
With the emulator option it also gives the proxy option of 120+ location. Try and enjoy the ease.
Regards,
Richard
[…] changes that you make to your site, you should always check to see if everything is working OK on different web browsers. Most people tend to use only one, but that doesn’t mean everything will display fine for […]
IE6 ‘officially’ dies in say, USA. But I hear that, in spite of dumping Windows 8/IE11 for something ‘better’, China’s browser users are 2/3rds heavily into IE6, for which the Chinese government will provide full support. Naturally, the technical backbone for that ‘global’ support will come from France, where there is still just one server, the French government. We are so lost in the clouds, here in North America. LOL.
Thanks you for this article and the information surrounding optimizing for the most popular browser found using Google analytics. Loved the site testing too! Great stuff here!
We find that computers using the old XP system that are using IE 8 or below are a problem. We use SSL encryption on our websites, and we always have to show a message to visitors using those outdated browsers.
Best regards
Steve Timmins
https://www.thegroovygroup.org
Great post! I would suggest BrowseEmAll as another cross browser testing tool. It runs on your local machine (which is great for security and performance) and offers live testing, screenshots, reporting and selenium support.