Quick Tip: Top 5 Ways to Browser-Test your Website
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
Adobe Browserlab
Litmusapp (paid service)
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
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great article.
indeed thankss
Sometimes IE tester fail… I don’t know but I’ve noticed that when the page contain too much JavaScript :)
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.
Yes, the IETester does fail when the page is loaded with js code.
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.
I wouldn’t say “very bad.” I, too, have noticed a few consistency problems, but, in general, haven’t had many problems using it.
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.
I just hope there’s a mac version for IEtester coz I haven’t found one yet since.
Wasn’t familiar with the VHD. Going to check it out right now!
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
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.
That’s the exact same setup I use.
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.
using a mac it’s telling me that its not available on my device :(
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.
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
I prefer to test it myself. Especially the pages after authentication. I use Lunascape and IETester. They both seem to work for me.
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
As was mentioned above. The spoon.net browser plugin in amazing!
I personally test on different browsers myself. But these tools are really helpful. I will definitely give these a try.
Thanks for sharing
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
The Concept of Quick tip is really nice, along with a mini screencast to explain things even better.
Great work JW!!!
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
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).
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.
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?
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.
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)?
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.
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.
thanks
but “VMware Fusion” not good solution yet
but iam very thanks for other solutions
For testing IE (6,7,8), the best thing is SuperPreview, part of ExpressionWeb. Expensive, but very good.
Thanks,
I personally use IE Tester.
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.
Amazing, thanks :)
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
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.
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!
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.
How valid is adobe browser testing?
Is it displayed correctly or are there many flows?
Great tutorial by the way…:)
You for got about my favorite:
http://spoon.net/browsers
Uses a virtual application.. No need to load an entire os.
You for got about my favorite:
http://spoon.net/browsers
Uses a virtual application.. No need to load an entire os.
Andy Mentions this
Thats great !
And very useful !
Cool !
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/
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.
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.
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.
Best/quickest solution I’ve found so far?
NetRenderer http://ipinfo.info/netrenderer/
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
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.
i prefer spoon sandbox.
The Adobe browserlab will not work with the offline files.
try this: http://spoon.net/browsers/
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?
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?
Please consider adding BrowserSeal to this list – we have some unique features that other services lack.
Spoon all the way!
http://spoon.net/browsers/
thanks for the tip ….
I never see this stuff before
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
Browserling is the “new thing” these days, from what I hear.