An unofficial blog that watches Google's attempts to move your operating system online since 2005. Not affiliated with Google.

Send your tips to gostips@gmail.com.

June 3, 2009

Test Your Site in Different Browsers Using Adobe BrowserLab

If you create a web site, a difficult task is to test if it looks properly in most of the browsers and the operating systems that your users are likely to use. Unfortunately, this requires that you install multiple operating systems, buy more than one computer or use virtual machines.

An easier way to test your site is to use online services like BrowserShots, which generates screenshots for a web page in more than 80 versions of the most common browsers used in Windows, Linux, BSD and Mac. The process takes time and you may have to wait up to an hour to see the screenshots.

Adobe BrowserLab is a recently-launched service that has the advantage of generating screenshots almost instantaneously, but the number of browsers that are tested is smaller: Firefox 2.0 (XP, OS X), Firefox 3.0 (XP, OS X), IE6 (XP), IE7 (XP), Safari 3.0 (OS X). The service has an interesting "Onion Skin View", which superimposes one screenshot over another to see the differences between the different renderings. BrowserLab is integrated with Dreamweaver CS4, but you don't need to buy the software to use the online service.

"Cross-browser testing has been one of the biggest challenges for Web designers because it is such an arduous and time-intensive task. Now with Adobe BrowserLab, designers have a simple solution that enables comprehensive browser compatibility testing in just a matter of minutes," says Adobe's Lea Hickman. The bad news is that the service is free for a limited time.

45 comments:

  1. I think this is an improvement but by far not good enough to switch. I'll stick with IE-Tester. And Firefox/Safari I have installed any way.

    ReplyDelete
  2. For those that don't need to be able to interact with the snapshop (ie. hovering/clicking, like Browsershots.org) but don't want to wait that long... There's also http://ipinfo.info/netrenderer/ (discovered it last month). IE5.5, 6, 7, 8, normal/mixed/difference.

    ReplyDelete
  3. Looks like MS Expression Web SuperPreview.

    ReplyDelete
  4. @alvinashcraft - Odd, we felt the same way when SuperPreview was announced, given we first demoed BrowserLab (nee Meer Meer) back at our MAX conference in November 2008 to a packed house- including the MS Expression team. ;-)
    A few key differences to note- BrowserLab doesn't require any local download/installation, just a Flash 10-enabled browser. You can test Mac and Win browsers in BrowserLab, which is of course cross-platform itself (runs on any Flash 10-capable OS too). But yes, same general problem being solved by SuperPreview, too- we're just taking a bit of a broader/wider approach for now.

    ReplyDelete
  5. I think adobe make an improvement and competition more gracious.

    ReplyDelete
  6. It didn't work for me an hour ago, but now that I know it isn't free forever, it really doesn't matter.

    back to my GIMP...

    ReplyDelete
  7. @Scott Fegette: According to Microsoft at least, SuperPreview does/will support Mac Safari (via a web service).

    ReplyDelete
  8. @Scott Fegette: Thanks for the clarification. Looking forward to trying both products.

    ReplyDelete
  9. Never had much of a problem testing on the browsers installed on my system. I was never able (at lest to my limited knowledge) to test cross platform. That alone is worth the price of admission.

    ReplyDelete
  10. Adobe are going to make it a paid service?
    Why not have a free service with delayed render so that they have the best of both worlds?

    This also doesn't push people away from the site, since it lets them use it, see if it is good (or not) and might stick around and consider paying for instant use.
    They could consider trials, but those are almost always easily broken.

    ReplyDelete
  11. I have tested a number of browsers from Firefox2, Safari Beta 4 and at present Google Chrome. I have to say the best so far is Chrome the simple one page system makes browsing so easy. Cannot wait for wave to hit our shores and make surfing so much easier from platform to platform. So l will not be changing to Adobe keep on going Google.G

    ReplyDelete
  12. It's already full and not accepting new users. Sounds like they can't handle people actually trying the service out, which makes me not even want to try the service now.

    ReplyDelete
  13. Hallelujah! The only one I know of is $200 an hour.

    ReplyDelete
  14. @alvinashcraft - There are a few differences between SuperPreview and BrowserLab. Let me explain...(sorry for the essay!)

    As i'm sure you are aware - there are many screenshot services on the Web - like Litmus, or BrowserShots. Both services do a fantastic job supporting a huge breadth of platforms and browsers.

    When we set out to make SuperPreview, we didn't want to make another screenshot service. We're making a tool that helps to diagnose layout issues between multiple browsers.


    So, there are a few big differences between us...

    First, while we don't support full interactivity - you can use SuperPreview to interact with the browser DOM. You can click on different elements of the page, and SuperPreview highlights the appropriate portion of the DOM in the previewed browsers. If the position of two elements differs on the page - we'll show you the difference, and even highlight the area where the element should be on the other page. You can zoom, pan, and use rulers and guides to check the resultant rendering. We think that this goes a step beyond just providing a screenshot.

    Second, SuperPreview runs on your computer. It's not just a cloud service. It's an application, and you do have to install it in order to use it. It is only available for Windows right now. Because it's an application that runs locally on your computer, this means that you can use it offline to test your markup. It also means that once you install it - it's free. No subscription fees. (Can't promise this for our cloud service - still ironing out details)

    We understand that not everybody wants to have every browser installed on their machines. We think the best place to be is somewhere in the middle - when we run locally, we can support faster rendering and more advanced features. When we run remotely, we can support other platforms and browsers.

    I hope this clears up any confusion. I think there's definitely a place on the Internet for all of these services :-) Feel free to drop me a line on Twitter (@JustinHar), or via e-mail (justin.harrison@microsoft.com) if you have any questions.

    Justin Harrison
    Program Manager - Expression Web

    ReplyDelete
  15. Cross browser testing is pretty important. In my past experience i use to hate IE6 a lot because of its incompatibility. Now, to increase the problem we have another version IE8 which also sucks.

    Usually, every browser is good for something and Good for nothing but when you ask a designer how he feels about all these browsers you won't find a nice answer.

    I don't understand why can't all these browsers works on one engine in the background?

    ReplyDelete
  16. Too bad it will eventually be released as a paid service. Good thing there's Browsershots. Enjoy it while it's free!

    ReplyDelete
  17. BrowserLab can integrate with Dreamweaver CS4 so you can test web page designs from within the WYSIWYG HTML editor without having to publish pages on to an external web server.

    http://www.pupuweb.com/blog/an-easier-faster-solution-for-cross-browser-testing-with-adobe-browserlab/

    ReplyDelete
  18. Seems like a good idea but the online version requires you to sign in which is simply annoying. For now BrowserShots is still the best solution (to shorten the load time select fewer browsers - we don't need that many anyway).

    ReplyDelete
  19. Who has time to sign in when testing? not me. I want to test the functionality as well as check out the layout and I want to do it now, not in a minute after I sign in (dont get me started on the time that takes and the crappy way it works on their site .. Ok, so I did get a bit started) and I am sure that I am not going to pay for it. IE-Tester is good for older versions of IE, Install Firefox, Chrome, Opera and you have it covered. Adobe is on the wrong track here.

    ReplyDelete
  20. @Frank- if that's your preference, then rock it. Not every solution works for every person, including our own.
    @Alex- that's a key point. You can preview very complex interactive states with Dreamweaver CS4 + BrowserLab using DWCS4's new Live View (preview Ajax widgets, back-end data on local testing servers, etc). Huge productivity boost if you build anything beyond a static HTML page (which is pretty much every web designer today).
    @Justin - I agree there's plenty of room for solutions to this problem- and on that note, looking forward to hearing details about your upcoming cloud service. Cross browser/OS design is the real crux of the problem here, according to our research.
    @Anonymous (got a real name?)- the BrowserLab preview isn't closed due to traffic or load at all, but simply as part of a tiered release program. Keep checking back (or follow @adobebrowserlab on Twitter)- we let in well over twice our projected first-round preview users the first few hours of launch (great sign for scalability/performance long-term), and we'll be going much wider in due time.
    @ACE{UK} - glad you dig Chrome (been hearing lots of requests for it already, and have been really impressed with it so far myself), but BrowserLab isn't really in competition with Chrome - it's not a browser after all - so you can probably try it out without fear of losing your Google street cred. ;-)

    All- much thanks for the collective feedback - positive and negative. It's all good here. You can always track me down at @sfegette on Twitter if you want, but we're always watching, reading and taking notes across the 'tubes too so just keep talking, and we'll keep listening.

    ReplyDelete
  21. Well this is really amazing if you want to look how your website looks in other browsers this BROWSERSHOT is an awesome tool...

    ReplyDelete
  22. crossbrowsertesting.com is a really great alternative as well. It's a bit slow (due to technology constraints, not the service), and especially good for doing quick tests on platforms you don't have. Use it for FREE or pay for some premium services, either way it's a really good deal.

    ReplyDelete
  23. An easier way to test your site.......Thanks to Adobe BrowserLab!!

    ReplyDelete
  24. thanx BrowserLab

    http://quit.awardspace.co.uk

    ReplyDelete
  25. There is a new web browser screenshot application (www.browserseal.com) that you may find useful which is not limited to IE. It currently supports FF, IE and Safari. It is still in beta, so more features and new browsers will be added in the new future.

    Fully functional free beta version is available for download from www.browserseal.com

    ReplyDelete
  26. browsershots really sucks. I'm glad to see alternatives out there. Even with a paid account, the clown who runs browsershots doesn't even answer support email when his system gets more useless than it already is. No renewal for you!

    ReplyDelete
  27. Thanks for the article, I was looking for something like this (and more reliable that browsershots).

    ReplyDelete
  28. I think this is great! Until now i checked browsershots, but it took ages! Thanks, Betty

    ReplyDelete
  29. This is pretty useful tutorial. Read few extra tips about How to Test Your Website Completely and Validate HTML,CSS , RSS, ATOM,Mobile compatibility
    http://www.globinch.com/2010/05/01/how-to-test-your-website-completely-validate-htmlcss-rss-atommobile-compatibility/

    ReplyDelete
  30. i was searching for a compatibility browser software as its really a problem when we use to check the website.

    ReplyDelete
  31. Is there one you don't have to download? I need to check my sites in opera... etc. Is there just a website I can use?

    ReplyDelete
  32. Some of my sites are not showing properly on some browsers, how can I solve this?

    ReplyDelete
  33. I tried in the browsershots but it is showing error 'unhandled exception'......Please let me know where else I can check the browser compatibility except that adobe labs...

    ReplyDelete
  34. Some of my sites are not showing properly in Opera and safari, works well in firefox, IE and chrome, any solutions?

    ReplyDelete
  35. steve Some of my sites are not showing properly on some browsers, how can I solve this? just check it on mozilla.

    ReplyDelete
  36. 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?

    ReplyDelete
  37. I also have issues like @buscharterDc. Wait for your help !

    ReplyDelete
  38. Well, a screenshot may help some. At least one gets a general idea. But all other things which require action of the viewer like for instance fixed backgrounds, cannot be checked.

    ReplyDelete
  39. This helps, but a screenshot can not let you test exciting things which require the actions of the viewer: like at least fixed backgrounds with translucent objects scrolling over them.

    ReplyDelete
  40. I also have issues like .... buscharterDc

    ReplyDelete
  41. What if we have to test our site for browser compatibility without using any tool?

    http://test-givethebest.blogspot.in/2011/11/browser-compatibility-testing-or-cross.html

    ReplyDelete
  42. you can test your website here for free and online:
    http://mobilewebsite.org.uk/test-your-website/

    ReplyDelete