A few weeks ago I gave you some tips for cross-compatibility, but in this article we are going to focus more specifically on cross-browser compatibility. Building websites to work properly and look good in multiple browsers is a fact of life that web designers must deal with. It is probably one of the most frustrating aspects of designing for the web, but thankfully there are tools out there that can help and hopefully keep you from pulling all of your hair out.
Adobe Browser Lab
This tool shows screenshots of your website as seen by several different environments. The default test includes Firefox 3.0 on Windows XP and OS X, Internet Explorer 7.0 on Windows XP, and Safari 3.0 on OS X.
You can change which browsers you’d like to test under “Browser Sets.” Another nice feature of this tool is a 2-up view that lets you compare side-by-side views of your site in different browsers. You’ll need an active account with Adobe to use the site.
Browser Shots
You can view screenshots of your website as it displays in different browsers, with a great degree of customization. Browser shots lets you choose your screen size, color depth, JavaScript and Flash settings. This website features the kitchen sink of browser lists, including a few you may never have heard of before.
This is a great free option for glimpsing multiple browsers. Keep your requests speedy by selecting a small sample of browsers. You may need to grab a cup of coffee while you wait for your screenshots if you selected every browser from Avant to SeaMonkey.
SuperPreview
Microsoft is working to make your life easier. No, really. This tool makes optimizing for the various IE platforms a little less painful. The SuperPreview download for Internet Explorer allows you to check your site in multiple versions of Internet Explorer.
Side-by-side viewing options stack horizontally or vertically. There’s also an overlay option to let you work out minute layout differences. Rulers, guides and other toys ease the burden of compatibility tweaks.
Unlike other testing options, SuperPreview allows you to test pages as you’re developing them on your local machine. Still under development, but a promising program already.
Litmus
Beyond screenshots, this tool lets you check your site in multiple browsers, track bugs, and create reports to dazzle friends and family. This tool also works on password-protected sites, a unique feature among a screenshot-dominated market.
The tool is free for 50 tests per month, limited to Explorer 7 and Firefox 2. Access all 24 browsers for a $39 project pass.
Cross Browser Testing
Pick an operating system, pick a browser, and off you go! Well-organized screenshot views on multiple browsers give you a nice overview of your site.
Going the extra mile, their live testing service gives you a hands-on view of your website on their bank of test machines.
Spoon Browser Sandbox
A very sleek, fast tool that puts multiple browsers at your fingertips. From their launch page, you can test pages live in Safari, Chrome, IE, Firefox. One click opens a new window with your preferred browser. The next best thing to native environment test.
This tool requires a plug-in download, but the process is very fast and seamless afterwards.
Virtual Desktops
Want more? To really get your hands on a website, you need to run multiple operating systems to get the full experience.
There are several programs available for you to do just that: VMWare, and of course Windows Virtual PC.
About the Author
Jessica Cox explores the far reaches of the Internet, researching the latest marketing, web design and development techniques for Aqua Vita Creative. Sign up for our newsletter for more news, tips and updates. @jessicafcox
Check out IETester:
https://www.my-debugbar.com/wiki/IETester/HomePage
You cann check with this tool one page with IE5.5, IE6, IE7 and IE8. Painless;-)
For a fast IE check use this online-service:
https://meineipadresse.de/netrenderer/
IeTester is also a tool that i would expect in a list like this. I use it all the time. A like the firebug point and track way of the plugins a lot!
The tool is also free.
On a side note: The tabs sometimes do crash on my win7 box…
Spoon Browser Sandbox is great. Solved my problems with Windows 7 and IE6 🙂
Great list! You could also add browsercam.com and browsera.com which also help in testing web apps for cross browser compatibility!
MS Superpreview is under development still? It’s been shipped with Expression Web 3 for months.
I also use Spoon Browser Sandbox. It’s very fast and useful 🙂
hey thanks for this list. i generally use browsershots.org and i am quite impressed with it.
I use the virtual desktop approach, then I can truly get a feel for what users are seeing.
I’d add ietester:
https://www.my-debugbar.com/wiki/IETester/HomePage
Even if it’s just an alpha release, it’s pretty usefull.
Spoon is amazing! I went through flaming hoops to install a Virtual XP on my Win 7 laptop just to get IE6. Spoon eliminated all that pain. Thanks!
For virtualization, give VirtualBox a try. It’s a great product created by Sun…open source and platform independent.
https://www.virtualbox.org/
VirtualBox is great. Definitely more stable and than either Parallels or VirtualPC in my experience. I have Win2000, XP (IE 7/8), and Vista installed on my Mac for testing.
does this works on vista??
Anyone a useful tip for testing html e-mail designs on different clients?
for e-newsletter check: https://litmus.com/
Good article. Look for Adobe to continue developing their software to be a leader in this type of thing.
To be honest I don’t know if I trust Microsoft since their software is the primary reason we need to do browser checking anyway!
I’ve tried just about all of these and VMWare fusion is far an away the fastest, least frustrating way to test all browsers. Couple it with IETester (win) to cover each version of IE and you’re good to go!
@niraj it should work on Vista. Can’t say that I do much development on Vista, but it works good on my macbook pro and linux machines.
Good post – this will make my design life just a little bit easier. 🙂
Adobe Browser Lab is a great tool that has helped me out no-end of times. A great feature is the 2 up screen mode, which enables you to compare to browsers side by side.
ie tester is another great tool for testing cross browser compatibility, but when using a mac i will always stick to Adobe Browser Lab.
Thanks for the kudos and additional tips. It’s great seeing what everyone uses.
@Jason & @Daniel, Adobe has always created solid tools. I’m interested to see where this one goes.
IMHO nothing beats having the browser installed natively in front of you, as close to how your users would have it as possible – either on your main OS or in Virtual PC 2007 – plus Microsoft provide 100% free XP and Vista (and maybe 7 now?) VPC images for testing, so you don’t have to worry about licenses!
IETester et al are not 100% accurate and so you can’t be sure it’s rendering properly, so why risk it? And screenshot apps are so out of date – you can’t interact with the page (v. important in this age of JS heavy, interactive sites) or use tools like Firebug and the IE Toolbar to debug issues.
So just grab VPC2007, extract the free image drives and away you go!
You can also add this good website for IE testing https://ipinfo.info/netrenderer/
I tried those tools but to me the best way is installing all the browsers I need in my OSX and then switching to Windows by using Virtualbox where you can put IE from 5 to 8 all toghether…. Great satisfaction 😀
That’s a good list of browser testing tools.
Further testing tools (including browser compatibility) that may be of interest can be found here:
https://www.testing-web-sites.co.uk/testing-tools/
Good list, by far from being comprehensive. Did you check BrowserSeal – https://www.browserseal.com ?
It has some nice features, for instance in addition to static screenshots it allows you to interact with the site with all ther supported browsers
Hi Jessica,
Great list you have here. I’m hoping someday we can make it 😉 If you’re open for trying out some other services, I’d love hear what you think of MogoTest.
IE Tester is great! and it’s free as mentioned above. It doesn’t always do so great you some hardcore javascript widgetry or frameworks but is perfect for testing XHTML and CSS builds on the fly while doing your web design. I use it almost all the time. Parallels for Mac is also very useful but can take time to set up. IE tester is easy to download, install and works within 5 minutes which is just what you need when stuck in the cross-browser scenario at the end of a build.
Hi RBRILL,
IETester supports only IE versions. But i also need to open my app in other browsers like FireFox and NetScape. Can u suggest some tool (an not web services) so that i can install and start my cross browser testing
Thanks
I never knew all these existed. I use IE tester for the moment by I am changing to Mac because we had it with Windows and I really need a program that will work on mac.
Browser Shots get a 502 Bad Gateway error and Adobe Browser Lab is not accurate.
VMware Fusion rocks!
Hi, i’m testing the compatability of a pages developed locally on my machine, not published on the internet. I tried to use SuperPreview of Microsoft and found that it only works on IE different versions. I need a tool that test the local pages but for IE, FF, Chrome, and Safari. Do you have any idea where i can find such a tool?
Thanks.
Nermeen AbdelSalam
On-line Modern Solutions
Egypt
Browser compatibility is very new subject for me. I am going to re-launch my eCommerce store[https://www.vistastores.com/]. I have made too many changes in design and code. I visited each and every tool which was listed by you in this blog post. But, all are over my head. Can any one recommend simple tool which help me to check for most famous browsers like FireFox, Safari, Chrome, IE and Opera. I don’t want to focus more on other browsers. I will but no for now. Thanks for such a great information.
thanks, using browser lab, but looking for something thats an app.
Browser Shots is not working. Do you have another FREE browser compatibility tool ?
Hi,
our new cross-browser testing tool BrowseEmAll (www.browseemall.com) should also be considered for cross-browser testing.
Greetings
I just testet Adobe Browser Lab and I think the quality of the screenshoots really sucks. Also it is not accurate, It showed the View in Fierfox diffrently than it is in the real browser. Really not usefiul.
I like browsershots, but it takes time. You can get Priority Processing which costs €23.95 EUR/month or €142.00 EUR/year. And it does not provide Mac Screenshots.
I have been using browserbite.com lately for cross-browser testing. Currently it’s free (including Mac).
Karl