Try Tuts+ Premium, Get Cash Back!
Quick Tip: Top 5 Ways to Browser-Test your Website
videos

Quick Tip: Top 5 Ways to Browser-Test your Website

on Jan 22nd 2010 with 62 comments

The great joy that comes from being a web designer is getting to view your new website in a variety of browsers, only to find that each renders the site at varying levels of consistency – namely Internet Explorer 7 and below. This video quick tip will demonstrate the five most popular services and tools for testing a website in a variety of browsers.

Browsershots


Browsershots

Adobe Browserlab


Adobe Browserlab

Litmusapp (paid service)


LitmusApp

VMware Fusion


VMware Fusion

Please note that there are multiple applications like this. Choose the one that works best for you. I prefer VMWare Fusion, though admittedly, I don’t have a huge amount of experience with the others.

IE Tester


IE Tester

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Misael

    Great article.

    • http://www.thescube.com Shovan

      indeed thankss

  • http://www.alfystudio.com Ahmad Alfy

    Sometimes IE tester fail… I don’t know but I’ve noticed that when the page contain too much JavaScript :)

    • http://labor8.eu Vot

      I assume that you’re testing the pages against IE6. In this case open a tab containing newer IE (7 or 8) first, can be left blank and IE6 tab next to it. I don’t know why that occurs but I happened to see that solution on some forum and it actually helped in my case.

    • Karan Saini

      Yes, the IETester does fail when the page is loaded with js code.

  • Pieter

    IETester is a very bad way to test your sites for cross-browser compatibility as it behaves very different from the actual IE versions. Best thing to do for testing Internet Explorer is to get Virtual PC and the (free) IE virtual harddisks (they’re available from the Microsoft site). Then you can be sure the shown behaviour is that of the actual browsers.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I wouldn’t say “very bad.” I, too, have noticed a few consistency problems, but, in general, haven’t had many problems using it.

      • Pieter

        As long as it’s just HTML/CSS it’ll do okay (some issues, not much), but use Javascript and it looses it’s reliability.

      • http://www.seowisedesigns.com Yheng

        I just hope there’s a mac version for IEtester coz I haven’t found one yet since.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Wasn’t familiar with the VHD. Going to check it out right now!

      • r_jake

        They’re okay, but a bit of a pain to set up and install (you need a separate virtual image for each version of IE), and need to be re-installed every three months. I think IE Tester is a more convenient solution unless you are experiencing a lot of issues with the JS errors that others have mentioned

  • http://www.portlandonrails.com Jason Schmidt

    Today, I will try to be nicer ;)

    I prefer VMWare fusion, and have 3 different Virtual machines. One for IE6, IE7, IE8. I did have one for Chrome, but now that it’s available for Mac, I just use that. Some may say it’s overkill, but it’s the closest you can get to how a user with that particular browser will view your site. This way you can test all aspects of the site, not just the look.

    • http://www.otheroom.com Barry Wood

      That’s the exact same setup I use.

  • http://www.furtzdesigns.com Ryan

    I have found the absolute best way to do it is using this http://spoon.net/browsers/ you install their plugin and then you just run IE6 some how, it just opens!

    NO idea how it works but you get yto use a full version of IE6 on your PC.

    • dan

      using a mac it’s telling me that its not available on my device :(

    • Marco

      I totally agree, spoon.net is a really great IE6 alternative (and lots of other browsers, too)! For a long time, I did my IE6 testing with multipleIE, but it doesn’t behave like the real Internet Explorers.

  • http://www.donothavedomainyet.com Eugene

    Nice tut. Adobe labs are quite okey, but still prefer the set of browsers to test it myself.
    Maybe I will change my way of thinking…:D

  • http://sp2hari.com Harishankaran

    I prefer to test it myself. Especially the pages after authentication. I use Lunascape and IETester. They both seem to work for me.

  • http://codefusionlab.blogspot.com Hirvesh

    Nice tools there! You might also consider the rest of the tool which I’ve reviewed here:

    http://codefusionlab.blogspot.com/2009/08/18-handy-tools-to-check-cross-browser.html

  • http://www.preeminentproductions.com Anthony

    As was mentioned above. The spoon.net browser plugin in amazing!

  • Atif Majid

    I personally test on different browsers myself. But these tools are really helpful. I will definitely give these a try.
    Thanks for sharing

  • http://sideradesign.com paul

    IE Tester is buggy, and crashes a lot.
    I use browsershots, adobe browser labs, and I have all the major browsers intalled locally.
    I also have dual boot with windows and linux to test different OS (useful for font rendering)
    I don’t think it’s possible to run Mac OS X in VMWare yet.
    Microsoft has released a tool for testing different versions of IE:
    http://expression.microsoft.com/en-us/dd565874.aspx

  • Akshay

    The Concept of Quick tip is really nice, along with a mini screencast to explain things even better.

    Great work JW!!!

  • http://www.nopun.com Noel Wiggins

    One of the most frustrating things to designing websites is having it pixel perfect then reviewing the site on the clients computer at a meeting and trying to cover up mistakes that shouldn’t have been there.

    I love adobe’s solution and browser shot is good but takes a while, I wished that some of these solutions would somehow allow you to “navigate” the site through these platforms, I guess we’re not quit there as of yet. Sometimes I need to double check how a css navigations functions on multiple platforms…

    –

    Thanks and Regards

    Noel for Nopun.com
    a professional graphic design studio

  • http://www.rentlinx.com Jeremy

    You should check out Browsera:

    http://www.browsera.com/

    It automatically compares versions and finds differences in the different browsers. It can also find JavaScript errors and test dynamic pages (that run a lot of Javascript to render, etc).

  • http://www.gayadesign.com Gaya

    Hmmm, I really really dislike IEtester since it’s not 100% the same as the real IE’s. I use different VMs with different IE versions (yeah it’s pretty lame, but gets what I want.)
    So my advice: don’t use IE tester, it failed on me a lot.

  • Nick Tulett

    I like to walk around with my eyes shut – can you recommend a good talking GPS device so I don’t have to open my eyes or read a map or anything?

  • tonetheman

    I am biased (a cofounder) you should check out crossbrowsertesting.com We give you the browser and OS combinations and you dont have to keep them up to date… we do. You can take screenshots and do live testing.

  • http://flickr.com/photos/lorenzhs nuk

    Looks like Browsershots is down?! I have been unable to use it for several days now, it just says “No active Screenshot factories!”, and that’s it. Maybe it filters by Location (I’m in Germany)?

  • http://www.kaplang.com/blog Kaplang

    thanks for this, I really needed to find a service such as this due to receiving a few comments over my own blog appearance. Every time I test it I find nothing wrong, but people are still telling me about these problems they are having…don’t know what else I can do so maybe using these services above I will be able to see where I have gone wrong.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’ll definitely show you what’s wrong. If they’re using some older browser/version that you don’t have on your computer, this will be the only way to test.

  • http://www.gold-price-today.com اسعار الذهب اليوم

    thanks
    but “VMware Fusion” not good solution yet
    but iam very thanks for other solutions

  • Mick

    For testing IE (6,7,8), the best thing is SuperPreview, part of ExpressionWeb. Expensive, but very good.

  • http://www.jordanwalker.net/index.php Jordan Walker

    Thanks,

    I personally use IE Tester.

  • http://nintendoaddict.com Tanshin

    I personally prefer BrowserLab, however it’s good to know some of the options available when you can’t test browsers easily. I only wish you could browse with the previews on there.

  • http://skinbox.net Olivier Turbis

    Amazing, thanks :)

  • gk7Qezpb0EcT4mHjUNnU9R7ecc0xL6SEx57UIm2SrZg1j7P8BDVJ1iriUo8S4rf6ulOsi3hm1iIGCYzyHaQ44qxV8IkorpAKKrEEgDVgLrtmtODcPcMjd8XFW9WgiY4Rf1JviWLekuCc1hGf6tHazJZ815MYdzaNtKo4IOxfNMx7RMr8B4jLvb8qFOn3hx4ZVsvYt0lNppgKR6mrG0jwGOuIMppoUOCfPlMVesvKxI5hypf3FQw0doUTGW00fsc

    Out of the available options, going the virtual machine route seems to be the surefire way to test for IE6/7. IETester is good for quick tests, but seems to have issues with javascript.

    As some others have mentioned, using Microsoft Virtual PC (http://www.microsoft.com/downloads/details.aspx?FamilyId=04D26402-3199-48A3-AFA2-2DC0B40A73B6&displaylang=en) is a good option–namely because Microsoft provides free stripped down images of Windows XP/Vista with different versions of IE specifically for website testing: http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

  • http://simon-north.com Simon North

    I’ve used most of them, I’m now settled on a mixture of browserlab (which is fantastic) and IE Tester. I used Litmus app for months but month after month it got slower and slower until the point I had enough because the free alternatives were much better in terms of speed, there support was rubbish as well and they ignored my tweets to them after a while.

  • http://www.blogpersonal.ro Aurel Dragut

    Thank you for sharing this information. Many times i had problems testing sites in different versions of browsers and this information now helps me a lot. I follow this site for quite a time and i must say it’s completely awesome: keep up the good work! And thank you again!

  • http://www.graphicrating.com/ Andy Gongea

    The best solution by far is Xenocode. Their sandbox browsers let you test anything from IE6-IE8, FF2-FF3.6, Safari, Chrome, Opera. It is definitely the best way to test your site.

    Also, another nice solution is the SuperPreview from Microsoft Expression Studio. Using this application you will get the actual values of spacing and you can compare them live.

  • http://www.donothavedomainyet.com Eugene

    How valid is adobe browser testing?
    Is it displayed correctly or are there many flows?

    Great tutorial by the way…:)

  • http://dailypush.com Chad

    You for got about my favorite:

    http://spoon.net/browsers

    Uses a virtual application.. No need to load an entire os.

  • http://dailypush.com Chad

    You for got about my favorite:

    http://spoon.net/browsers

    Uses a virtual application.. No need to load an entire os.

    Andy Mentions this

  • http://sonergonul.com Soner Gönül

    Thats great !

    And very useful !

    Cool !

  • sheena

    hi jeffrey…love the work you do! keep it up!!!

    Just another suggestion…..for people who want to see their site actually working in all the major browsers, i.e. multi level dropdowns, flash, javascript etc I would suggest trying out Xenocode. I use this sandbox all the time and as far as I can tell it’s pretty accurate!

    http://spoon.net/browsers/

  • http://netnewmedia.com Martin

    useful list, but as someone mentioned before, i much prefer using the true virtual hard disks available from the Microsoft website.

    one thing is to see that a complex layout is not working correctly in IE 6/7, which you can do with any of the above tools. another thing is to open up the IE developer toolbar (also available free from the MS site) and fix the problem.

    the latter you can only do if you’ve got the real deal running on your machine.

    • jem

      I agree, this is one of the best solutions for testing versions of IE.

      We also have some IE6 machines on our network at work that literally just sit on the network so people can remote desktop into them for testing purposes.

  • http://www.serenedestiny.com Nicole Foster

    Personally, I haven’t found too many problems with IE Tester. IE Tester is accurate for me, so I’m happy with it.

    The best way to test is to download the browser itself. Even if it’s a newer version, it’s better than most other solutions.

  • http://starpointemarketing.com Ryan

    Best/quickest solution I’ve found so far?

    NetRenderer http://ipinfo.info/netrenderer/

  • http://www.otygblodhemn.com Otyg

    I’ve found this after some search : Internet Explorer Collection

    Or how install all version of IE in the same OS (only for Windows OS unfortunately)

    http://finalbuilds.edskes.net/iecollection.htm

  • http://www.crearedesign.co.uk Stephen Webb

    Browsing testing is such an essential part of website design but is something that isn’t that well addressed, especially if you are using a Mac. Having each browser installed on your computer is certainly the best way to test any website, but this can be difficult to achieve and can be a time consuming process to switch between browsers.

    There are some good examples of solutions here. Personally I used to use net renderer, but this offers quite a limited service and can often be overwhelmed with users, resulting in very slow or little service.

    Due to this I switched over to Adobe Browserlab recently. This is definitely a better piece of software and allows you to see multiple browsers at the same time. Ultimately though I think there is little comparison to having the actually browsers on your computer, and being able to test a site and it’s interactivity live.

  • http://www.fluidbrush.com Rajeesh

    i prefer spoon sandbox.

    The Adobe browserlab will not work with the offline files.

    try this: http://spoon.net/browsers/

  • Alex

    So, it’s great opportunity!!
    But what about IE Developer Toolbar?..
    Did You know something about how to add Developer Toolbar to IE’s packs?

  • http://www.twitter.com/netjunky88 Eugene

    I have installed Win7 some days ago and in IETester IE 6 and IE 5 crash all the time.
    Is it everywhere so or just on my PC?

  • http://browserseal.com BrowserSeal

    Please consider adding BrowserSeal to this list – we have some unique features that other services lack.

  • http://www.mikejohnsondesign.com Mike

    Spoon all the way!

    http://spoon.net/browsers/

  • http://zahidbin.blogspot.com/ zahid

    thanks for the tip ….

  • http://compuzine.tk Compuzine

    I never see this stuff before

  • http://atompad.com John Griffiths

    I prefer VirtualBox for IE testing.

    In reality you can probably get away with just 2 VM’s (1x IE6 & the other for IE7/8/9)

    Pretty steamed Microsoft pulled IE from spoon.net

  • http://MikeJohnsonDesign.com Wordpress Web Designer

    Browserling is the “new thing” these days, from what I hear.

  • http://klinikpsikis.wordpress.com sandi

    thanks for this, I like

  • http://klinikpsikis.com/ klinik terapi

    thanks for sharing. I can take advantage of this knowledge