Effectively Testing Your Website in Multiple Browsers

As a website designer you have the ability to create an attractive and functional design. Unfortunately, you do not have the ability to control which internet browsers will be using to view your site. Because each browser behaves differently you will need to test your projects in multiple browsers.

In most cases the variation from one browser to another will be minor, and probably will not even be noticeable to the average visitor. However, sometimes you site will have major problems in a particular browser that can prevent visitors from being able to use the site. The best way to be sure that your site is usable in different browsers is sufficient testing.

How Can You Test Your Website in Different Browsers?

For starters, you should be familiar with which browsers are most commonly used by your visitors. After all, you’ll want to make those browsers the biggest priority. Google Analytics will show you a breakdown of which browsers are being used by your visitors and how many visitors are using each one, breaking it down into a pie chart (shown below).

Browser Pie Graph

Once you know which browsers are most commonly used by your visitors you should focus your testing efforts on those browsers. You can easily install several different browsers like Internet Explorer, Mozilla Firefox, and Netscape, but with the huge amount of browsers available you’ll never be able to have them all. This is where you will need the help of a few specific tools.

BrowserShots – Test your website in different browsers. BrowserShots creates screenshots of your pages in a wide variety of browsers and displays them for you to see. It also has several additional options.

BrowserShots Logo


BrowserCam – A paid service that lets you test multiple URLs in a huge number of browsers.

BrowserCam

NetMechanic Browser Photo – Another paid service. Choose between one-time use or pay for an entire year.

NetMechanic Logo

Litmus – Another paid service. Also provides resources for testing email.

Litmus Logo

AnyBrowser – A variety of tools for creating and testing websites.

AnyBrowser Logo

Articles and Resources:

How to Check Your Website with Multiple Browsers on a Single Machine – from thesitewizard.com

How to Use Different CSS Style Sheets for Different Browsers – from thesitewizrd.com

Why Test Your Website in Different Browsers – from gbradhopkins.com

CSS Hacks and Browser Detection – From WebCredible.

Introduction to Browser Specific CSS Hacks – from SitePoint

Cross Browser Issues – from devarticles.com

Position is Everything – Modern browser bugs explained in detail.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

96 Responses

Comments are now closed on this post.

  • Adam_Y, August 21, 2007

    Some good advice there… especially using analytics to check exactly who/what is being used to view your blog.

    There is one further problem I find though, which is the question of screen resolution. I draw a webcomic for my blog and I find the line between catering for lower and higher resolution users quite a tricky one to tread.

  • Goyin, August 21, 2007

    I hate that you have to program to multiple browsers. Why can’t everyone just settle down with Firefox?

  • Vandelay Design, August 22, 2007

    Adam,
    Yes, in your case I think that is an important issue. I guess you have to find what’s best for most people while inconveniencing as few people as possible. You’re right, not easy.

    Goyin,
    I’m doing my part (using Firefox).

  • Antonius, August 23, 2007

    Glad I came across this list. I was on another site, where the blogger was suggesting that you check how your site looks in numerous browsers, but he did not give any suggestions. Just checked back at Workingathomeinternet.com, and he did respond to my question with two of the above sites.

  • Vandelay Design, August 23, 2007

    Antonius,
    I’m glad it can help!

  • Gyms & Health Clubs by Aaron, August 25, 2007

    I ran into a page one time that just could only be viewed in IE… I can’t imagine how much traffic and potential revenue that site is losing by not testing in multiple browsers.

    A lot of those testing services seem pretty unnecessary, though- I feel like as long as you have your pages tested on the major browsers, you shouldn’t have too much of a hard time with the others.

  • Sly from Slyvisions.com, August 25, 2007

    More effective internet tools. I’ve been searching for this and all Google gives me is…cr*ap.

    Sly from Slyvisions.com

  • Nick Cowie, August 29, 2007

    Your method works great with desktop browsers, unfortunately Google Analytics does a lousy job of identifying mobile browsers (they do visit your site, check screen resolutions in Google Analytics you should see some there).

    And as for testing in mobile browsers good luck, there are a lot of them and multiple versions of the same browser ie Nokia release a new S60 browser every year.

  • Adam, August 30, 2007

    Mobil browsers, oh no, that seems to be another large can of worms. The company that can come up with the universal mobile browser will be very wealthy.
    I understand that mobile technology is a rapidly growing marketing field to include search technology.

  • Vandelay Design, August 30, 2007

    Nick,
    You’re right, this doesn’t really address the issue of mobile browsers. Thanks for leaving your thoughts on the subject.

    Adam,
    It definitely is growing rapidly, so I guess it will have to be more of a priority in the not-too-distant future.

  • Methylviolet, September 5, 2007

    I am a non-professional non-designer who got drafted to create the lab website. Being arrogant, ignorant, and a masochist, I insisted on learning HTML/CSS and coding it myself. It went up on Friday. It looked beautiful in four browsers and on ten computers in various resolutions.

    But on the boss’s mom’s computer? Broken, indeed non-functional, I found out yesterday. I guess there is a reason people go to school for this.

    Thanks for the article. I may yet take this shotgun out of my mouth.

  • Vandelay Design, September 5, 2007

    Methylviolet,
    Thanks for reading! Sorry to hear about your problems with that 1 stubborn browser. I checked out your site and it looks good, especially if that’s your first crack at web design. Not too many 1st projects look that good. Have you found the problem with the 1 browser?

  • 虚拟主机, September 25, 2007

    It is a verygood web!
    I will email to my friends!

  • 现代ç?†è´¢, September 30, 2007

    It is a verygood post!

  • Amie Stilo, January 10, 2008

    I often forget to test my site in different browsers and then when I find out down the track that the site does not look good in ie I need to revamp it. I use firefox most of the time and forget about internet explorer lol.

  • peri oyunları, March 9, 2008

    sometimes visitors tests our sites at other browsers for us :) one of my site was not working on opera and some of my visitors send me feedback about it.

  • Mike, April 28, 2008

    I’ve always found that a standards-based approach works wonders when developing a website. Having said that, some browsers really do not agree with standards (IE).

    Once you’ve had a few years of practice when dealing with browsers like IE you learn what CSS parameters will cause what to break. Sadly for me it still happens a lot with IE and occasionally Opera, so I often test my websites at university, where I can test on most popular browsers. Working past that, BrowserCam works wonders for me as well.

    As far as Mobile browsing goes I almost feel it’s starting to phase out, what with many handsets now pushing for 800×600 screen resolutions. Give it a couple of years (and a few more iPhone competitors) and horrid things like WML and mobile optimisation will be a thing of the past.

  • frank, May 16, 2008

    Eeek! I just found out that 30% of my viewers are using IE6 or older!!

    Thanks for the tips. Now to update…

  • Santiago, May 20, 2008

    Thanks for this post! its very important for us, have resources like this.

    Thanks Again.

    Santiago

  • Goyin, June 5, 2008

    Its too bad people can’t just use Firefox…

  • HTML CSS Expert, August 14, 2008

    Really great post for all web coders, now It’s become baisic needs for all outsourcing clients, they want to test site in several browsers/OSx.
    I am checking my projects in around 4 browsers and on 3 different OXs for Pure DIV Layouts.

  • masterza, September 23, 2008

    Adjustment of the design under different browsers is always a problem, unless us not proficient css. In the post thanks to going to work.

  • songokuze, October 23, 2008

    Great post. Thanks!

  • Romania Recruitment, December 5, 2008

    BrowserShots is the best even if they’re consuming a lot of resources to have answers like Win2000 + Opera or freeBSD + Firefox. From my point of view there are only few big combinations, maximum 15 and that’s it. A free service with only few combinations it will be the best because will cover 99% visitor’s systems and will not be such a big resources consumer.

  • promovare site, December 15, 2008

    Nice post. Thanks!

  • Mark, January 22, 2009

    I was really pleased with this advice, it allowed me to double check and tweak my site at http://www.plunderhere.com which is a very busy online auction to make sure all main browsers functioned properly, thanks very much!

  • Ross, February 6, 2009

    “I hate that you have to program to multiple browsers. Why can’t everyone just settle down with Firefox?”

    …because it’s not the best browser out there, because it’s ugly and clunky and slow perhaps?

  • themisfit, February 22, 2009

    Thanks for this list. These will come in handy

  • 4design, May 26, 2009

    Very useful article for those who are professionally involved in coding websites. Thank you!

  • Website Design Services, July 7, 2009

    The best way to test in multiple browser is to download the browser. I use Firefox as my main browser, but I have downloaded IE, Chrome and Safari all for coding purposes.

  • pratima, July 27, 2009

    test the website look on various mobile browsers,is their any tool?

  • You just made my day. I was looking for a service of this kind for so long, and when I finally found one a few months ago (browsercam) it was just too expensive. But now with browsershots.org I can test my designs as I need. Thanks!

  • alpha, September 21, 2009

    ““I hate that you have to program to multiple browsers. Why can’t everyone just settle down with Firefox?””

    Because I don’t like to wait for the entire program to start responding again when it’s loading tabs, I like to use my RAM for things other than Firefox, I don’t like having to load up GTK just to check my email, I’m not really a fan of browsers that miserably fail the Acid3 test, and I’d like my 3 hour netbook battery to last longer than 30 minutes.

    I do, however, really like Opera.

  • pla, October 29, 2009

    i take your advice.. and thanks for all tools very helpful :)

  • James, November 24, 2009

    Really nice internet tools there. Thanks.

  • BrowserSeal, December 6, 2009

    BrowserSeal is a new fast multi browser screenshot application that supports Firefox, IE6, IE7, IE8, Chrome, Safari and Opera and allows to test web sites located on a hard drive or corporate intranet. Prices are extremely competitive.

  • Hadith, February 21, 2010

    if all browsers followed the same standard that would be great, A wise man once said to me “Browsers are ever forgiving.” I usually create a site without css then go from there that way there’ll hardly be any trouble with x-browser issues, having said that its hard to stay away from using css to style it most recent browsers conform to standards except the “ONE” not referring to any names. But I have a version of ie tester by debug bar that lets you test from ie 5.5 to 8 all in one application thats a great tool, plus i use browsershots another great site.

  • kelowna photog, March 15, 2010

    I wish that all browsers would display the same, it would make designing so much easier. Until then I enjoy the challenge. Thanks for the resources.

  • jeni, March 29, 2010

    Thanks for this list. These will come in handy

  • usenet browser, August 31, 2010

    Good advise. I always just went with the most popular but, using Google Analytics is the best way since you will know your users preferences.

    thanks

  • promovare site, October 14, 2010

    indeed nowadays is MANDATORY to test your web pages in many different browsers. I happened to have an issue with one of my clients’ pages in Safari , which i was not aware of it at the beginning, that impacted many sales. Always test new pages in different browsers.

  • the testing in mainly IE and Firefox should be done before even launching the site. these are the 2 main internet browsers that people use nowadays, so therefore displaying bad results may affect in a bad way your online business

  • Doug Wilson, November 5, 2010

    I hooked up another computer the other day. Running XP, firefox – went to my website – it was blue. Font looked awful, width, height sizes were crazy….I felt kind of sick to my stomach. I had know idea.

    The only real difference is the monitor and the monitor/machine screen resolution.

    For back ground color I had to make sure the css used “bgcolor: #FFFFFF; – using ‘background-color’ or ‘background’ came out blue (ish) leaving image backgrounds white so the whole page looked awful.

    Fonts: I like goergia for content but I’m considering generic arial or verdana – just because of the rendering differences.

  • Chad Walls - SEO, November 29, 2010

    Thanks for the advice. I was advertising my site with adwords and didn’t realize that it wasn’t displaying properly on various browsers specifically Explorer 6.0. This is a problem as when I checked Google analytics about 6% of visitors were form those who used this version of Explorer.

  • carson, December 3, 2010

    thanks for these as well, I had a cross browser problem today and thanks to Browsershot I was able to fix it. Now if only IE would get it’s act together.

  • southall, January 2, 2011

    Just testing out my site in BrowserShots again.

    So many browser options to choose from.
    Only chose 4.
    Took 20 minutes to upload 2 browser shots, 23 minutes for all 4.
    Free but very slow again.

  • Austin Fitness Gyms -Steve, January 15, 2011

    One of our customers told us our website wasn’t looking too well and after a little digging, I Googled your blog (Thanks for the helpful links!). Found it was not working on Chrome. Got me interested and went to Google Analytics and saw the % usage of each browser…I would never have thought that.

    Also, found usage of mobile devices, especially the Iphone is growing fast. Going to keep an eye on this now. Thank you for the helpful website!

  • Bhathiya, February 16, 2011

    Really helpful article, I hosted my site in blogger with a custom domain but with my friend’s computer IP address, i can’t get into my site. but with proof IP i would able to see my site, i though the problem with browser (I checked with Google Analytics) but almost all browser visitors came to my site. I don’t know what is the problem. Is the problem with my Server or Browser?

  • RMM, April 5, 2011

    Hello Everybuddy,
    I m new in web development. Currently I m developing a web application in ASP.NET 08 with C#. Problem is that, when i test my page in browsers like IE, Opera, firefox it shows diferently, The Panels, Tables that i hv used all r misplaced in several browsers. Suppose in Opera its same as I designed, but in IE some objects lost its TOP,LEFT etc.

    Please help me.

    RMM
    Bangladesh

  • shane burnham, April 12, 2011

    I use a website program called MRSITE to create my website. With NO programming knowledge what so ever I am extremely confused. I have however learned quite a lot from viewing the source of every website and trying to see how it relates to the website we all see in front of us. MRSITE does not however allow the basic page structure to be changed via HTML. There are many things I can do but the css part is all fixed. I therefore have to upload a background image and hope it fits via trial and error. I also have to test on different screen resolutions. A I correct in saying make it look best at the most common resolution used and put up with the fact it will look poor on other resolutions. Great article none the less.

  • Toronto Web Developer, June 10, 2011

    Really great advice. I will definitly implement it.

  • Andy Kuiper, November 17, 2011

    Is Keynote Net Mechanic still available?

    Andy :-)

  • tactual, June 1, 2013

    Born For Tone: Home Live theatre Wiring Assembly