Adobe Meermeer Will Change the Way You Test Web Sites

Tweet

Each year at their annual MAX event, Adobe shows off some of their most compelling projects during the “Sneaks” keynote. At the 2007 conference, the most talked about sneak was “Thermo,” recently made official as Flash Catalyst. This year, the honor of coolest upcoming project at Adobe might go to Meermeer, a new cross browser testing tool that will completely make Browsershots.org obsolete.

Meermeer, which is set to debut as an online service and Dreamweaver CS4 extension on Adobe Labs sometime next year, is a cross browser web site testing tool that will be delivered as a service. I was able to get a demo of Meermeer today from Adobe Senior Product Manager Devin Fernandez and Product Manager Scott Fegette.

Fegette told me that when Adobe asked developers to name the biggest pain point when developing web sites, an overwhelming majority of respondents told them that cross browser testing was a major headache. For most developers, testing cross browsers and operating systems is a clumsy process involving multiple machines, screenshots taken by friends and emailed, and waiting on slow web sites like Browsershots.org.

Those methods generally require developers to actually publish a web page and then point a service (or friend) at the live page to test in various browsers. Meermeer simplifies the process by letting developers send local code to the Meermeer server and almost instantly receive back screenshots of that page rendered in different browsers and on different operating systems, with no need to go live with the code. The code can be set to be sent automatically from Dreamweaver (similar to the preview in browser view) and Meermeer can stay synced with the latest version of the code — so you can get continuous updates on how your code looks cross browser as you tinker with it.

Unlike Browsershots.org, Meermeer doesn’t use a batch processing method to serve up screenshots. Rather, the site scales as needed by deploying more virtual machines to take site screen shots, which means there will never be a long wait time to receive test results, and adding additional browsers and operating systems is simple. At launch, the service will support a “core” set of browsers based on those in use most by end users around the web, including Internet Explorer 6 and 7, and Firefox 2 and 3 on Windows, and Firefox 3 and Safari on Mac.

Another helpful innovation Meermeer adds is the ability to view browser tests via multiple views. In addition to the standard 1-up, and 2-up (side-by-side) views, Meermeer has an “onion skin” view that overlays one browser screenshot on top of another. Developers can adjust the opacity on each shot with a slider so they can pin point differences. As you can see in the screenshots above, this might be the first time in history that IE is rendering a page more correctly than Firefox (Fegette’s joke, not mine!).

Fegette told me that the onion skin-type overlay view is something that developers were already doing for testing purposes using manually created screenshots and Photoshop. So adding that functionality to Meermeer was natural and simplifies the process for developers.

For now, Adobe is focusing on pushing Meermeer out the door as a web service and accompanying Dreamweaver extension. Eventually, the company might look into offering an API for the service so that other applications could add Meermeer testing functionality, but there are no concrete plans for that at present. Fernandez told me that nothing precludes them from taking that route though, and we shouldn’t count it out as a possibility.

When I asked where the rather unusual name “Meermeer” came from, Fernandez told me that the original name for the application was “Mirror Mirror,” as in “Mirror, mirror on the wall,” but after saying it over and over, it was eventually shortened and the meerkat became the unofficial mascot for the app. Hence, Meermeer.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • ian

    you guys really likes adobe…

  • Matthew Todd

    this looks very promising. Hopefully it will be as great as it sounds.

  • Danny Bishop

    Wow… that looks rather trick. The onion skin feature will be a big bonus and time saver. I’d be keen to know if the system will allow for interactivity with elements – so that clicking on a element (for example) would highlight that element in all the various browser renderings. If so then the process of ‘debugging’ css code will be SO much faster than it is right now. If they could somehow get people to drop IE 6 then the every web developer will cry tears of joy!

  • Florent V.

    So basically it’s like browsershots but 1) fast and 2) allowing file upload to some extent. Nice.

    But testing in different browsers never required screen captures. Actually it’s a rather broken way of testing a page, since it doesn’t include interactivity, which is essentiel if you use some JavaScript or even some simple CSS effects (:hover, :focus, CSS transitions…).

    The right testing environment right now is this:
    1. Windows XP (not Vista) with a native IE7.
    2. Multiple IE (with versions down to 5.0 if you really need that, or just IE6 otherwise).
    3. Firefox 2 and 3, Safari 3, Opera 9. Earlier versions of Firefox and Opera if you really need that but chances are you won’t.
    4. IETester as an added bonus, for IE8b2 for instance (don’t mess up your system by upgrading to IE8 before it’s final).

    Working on a Mac? Buy a XP license (or “find” one), install it through Boot Camp, and maybe use some virtualization tool like VMWare Fusion or Parallels Desktop to launch you XP system without rebooting (2+ GB of RAM advised). Reboot on Windows when doing some performance and reactivity testing.

    Working on Linux? See the steps for a Mac, but you might want VMWare Server, VMWare Workstation, VirtualBox or KVM for virtualization (if using any).

    Meermeer sounds nice, and it might prove useful to some extent. But most of the time you need the real thing.

  • Anonymous

    I agree with Florent. Meermeer has some nice features but I’d worry about css and javascript behaviors, which usually requires some sort of human interactivity.

    Ex. Click on a link, and an AJAX response is a popup box.
    I guess the way around the missing interactivity is to display the popup box without the AJAX call.

  • Burt

    I use Litmus. IE NetRenderer does the onion skin stuff for different IE versions.

  • all4nerds

    It’s not that difficult to do it cross browser not even for IE, so why the fuss Josh Catone !

  • http://www.magain.com/ mattymcg

    @all4nerds You obviously haven’t tried to do anything too complex in your site layouts. Having this integrated into Dreamweaver is something I’d once have considered a pipedream. It’s a service I would pay for in a heartbeat. Exciting!

  • all4nerds

    DW ? your nuts

  • Paul G

    Regarding the comments around working with JS and CSS effects:

    You can use DW’s new “Pause JS” feature in to place a web page into different states (e.g. click on a link and an Ajax response is a popup box, choose 2nd panel of an Accordion) and then view the page in that state in Meer Meer. This workflow is specific to DW CS4 because of the new Live View (webkit rendering) engine. This will help address the issue you described.

  • all4nerds

    Negative on IE will bring you nothing, stay of the sports car, and drive the mediocre, get it going is no problem in most browsers, for the mediocre pages, mediocre that’s what they are most of the time.

  • http://www.magain.com/ mattymcg

    It’s true, I am. But that’s nothing to do with using DW ;-)

  • http://fcOnTheWeb.com ferrari_chris

    This looks a great service. I can’t wait for it to come online so I can take it for a test drive.

    If they add more browsers, and perhaps even some mobile browsers, it will be very good. They should just go “the whole hog” with it and offer all the browsers on all the operating systems so they can cater to all my needs. :)

  • http://www.tyssendesign.com.au Tyssen

    @all4nerds what’s with all the sports car analogies? You’re making no sense. :?

  • Genjutsushi

    This could, if executed correctly, be a huge time saving tool for many. That said, most people are already going to have tools in place to test their sites, virtual machines being one of the better options (browsershots is horrendously slow).

    Any indication at this stage as to whether the service will be free? I think that could be a deciding factor in it’s popularity. Regardless, I’ll await with interest.

  • http://www.myburg.com cajebo

    @Genjutshi: “delivered as a service” sounds like a paid plan to me.


    MeerMeer sounds like a great tool. But as a user of the free services of BrowserShots, and having done so since they were REALLY slow, I think it’s a bit unfair to single out the “free service” as a benchmark to one obviously faster, and probably ‘paid’ service.


    Your review and sneak peek makes me and others a bit jealous of you and this soon-to-come new toy, er, um, I mean Tool.


    Also, comparing paid-services to paid services, although I can offer no input here myself as I’m a ‘free user’, I believe the “subscribed/paid” use of Browsershot offers significant speed increases. Perhaps other Browsershot users could chime in here?


    Also, rumor has it that just like Adobe’s shortening of MirrorMirror to the toddler-like pronunciation of MeerMeer, BrowserShots in their infancy considered too a name shortening. They of course opted ‘against’ said shortening, but acknowledged it did speak to the hassle of cross-browser testing.
    Unfortunately, BS.com was never realized by them.

    :)

    Looking forward to the paid MeerMeer vs BS testing.

    Thanks for your article.

  • V1

    MeerMeer is dutch for MoreMore.. And If i remember correctly Dough winnie also told us at the sneak peaks EU that was build by some dutch people? But than again..

    But than again,, who cares about code names ;)

  • ArchCarrier

    It’s funny: ‘meer’ means ‘more’ in Dutch, so I read the name as ‘MoreMore’ – which is a good description of Adobe’s product line :)

  • Mike

    I agree with Florent. That’s why some colleagues and I created a site just to do that (and a bit more). We do it with VMs and keep the images up to date so you don’t have to. It is a paid service, but there is a free option as well. Won’t post the link out of respect for this site, but just wanted you to know that multiple services exist (not just ours, use google) that do all the hard work for you so that designers/developers can focus on their work and not maintaining a test environment.

    Though I disagree on one thing, there will always be a place for browsershots. They have a great service and have served the community for years. I think they should get some props for being one of the first services of this type available. Yes, it has become so popular that it is not as responsive as you might like. A victim of their own success. However, as other cross browser testing tools become available, their load should decrease a bit and that will help with their performance.

    Just my thoughts.
    Mike

  • Tina

    Also what’s the point if it ONLY works with Dreamweaver?

  • Adam Boalt

    This looks like an awesome product. I just starting using litmusapp.com and it rocks! The email testing is super cool.

    BTW, I’m looking for UX Developers – find me if your interested in some work @boalt

  • Teej

    I use this system for cross browser testing… It actually allows you to test your site free for 5 minutes as many times as you need! Not just a screenshot. I am sure that once these guys get popular it’ll start bogging down in speed, but right now the demand times are fairly slow.

    http://www.crossbrowsertesting.com/

    Pretty sweet, check it out.