Microsoft SuperPreview: a New Way to Test Web Sites

Tweet

Microsoft SuperPreviewBrowser testing is much harder than it should be, but a new Microsoft tool announced today at the MIX09 Web Developer Conference in Las Vegas could be the answer to many of our problems.

Microsoft Expression Web SuperPreview allows developers to compare how a page is rendered in different browsers at the same time. The tool is a similar concept to Adobe Meermeer (reviewed by Josh Catone in December 2008), but SuperPreview can be used as a standalone application and a free version is available.

The SuperPreview team visited customer sites and interviewed web developers to determine the feature set:

  1. Different browsers can be viewed and compared in vertical and horizontal layouts. Scrolling moves all the pages at the same time.

    SuperPreview layout

  2. The pages can be rendered at different browser sizes.
  3. A pixel ruler and full-page thumbnail helps page navigation.
  4. PhotoShop-like window guides can be positioned to check element alignment.

    SuperPreview ruler and guides

  5. Hovering or clicking highlights individual DOM elements and reports the ID, classes and dimensions.

However, the killer feature is overlay layout: it allows you to stack a partially transparent browser on top of a design mockup or any other browser. Rendering differences can be spotted in an instant.

SuperPreview overlay

Further screenshots (unreleased development build):

SuperPreview screenshot 1

SuperPreview screenshot

026-superpreview-screen3t

SuperPreview screenshot

The full version of SuperPreview appears in the next release of Microsoft Expression Web and will support IE, Firefox, and Safari. The team is eager to work with other vendors so additional browsers may appear as the product evolves.

The snappily titled “Microsoft Expression Web SuperPreview for Windows Internet Explorer” is available for download from Microsoft.com now (250MB and requires .NET). This is a pre-release of the free product and allows you to test IE6 and IE7 (or IE8 if you have it installed). Several features are missing and the usual beta software warnings apply.

SuperPreview has not undergone usability testing until now. The team would appreciate bug reports and suggestions, so click the bug icon to send your feedback.

Have you installed SuperPreview? What are your impressions and will you find it useful?

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.

  • http://spigotdesign.com/ Spigot

    Of course there’s no mac version.

  • http://www.optimalworks.net/ Craig Buckler

    There is no Mac version, but running the latest versions of IE on a Mac is never going to be easy (not without booting into Windows or using a VM, anyway).

  • http://spigotdesign.com/ Spigot

    @Craig – This is true, and I guess I should be a bit more constructive. I’ve gone to great lengths to get my IE testing set up working right, and it’s still not perfect. I use a cheapo compaq laptop running vista. I use MS Virtual PC to test IE6…

    Could just run this app instead, eh?

  • Bradley Wright

    When will people give up on the idea of pixel perfection on the web, and realise that users consume it the way they want, rather than the way YOU want?

    This release is also particularly ironic given Microsoft’s poor track record of support for established web standards.

  • docgnome

    Interesting. I currently use IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage for the same thing.

  • http://www.optimalworks.net/ Craig Buckler

    The current version of SuperPreview still has a few problems with IE6 (such as filters not working) but, in most cases, I suspect you could use it rather than a VM. It would certainly be faster.

  • http://www.optimalworks.net/ Craig Buckler

    @Bradley Wright

    When will people give up on the idea of pixel perfection on the web…?

    I totally agree – there is no such thing as pixel perfection. HTML/CSS is not postscript; it only suggests how the layout should look. Browsers and user preferences can override anything you do.

    However, SuperPreview is useful for spotting problems that may have normally gone unnoticed.

  • Alshie

    @Bradley Wright Whilst you are quite right with the pixel perfect statement, I don’t feel that this product is really about that. You still need to check that your site displays ok in different browsers even if not identically. Anything that makes cross-browser testing easier should be welcomed.

  • http://www.optimalworks.net/ Craig Buckler

    @docgnome

    I currently use IE Tester

    SuperPreview is a little different to IE Tester … I suspect I’ll use both.

  • Mir

    I think every Microsoft product contains some bugs so is case with SuperPreview. Lets see if UI people will like this.

  • dmwalk

    Just tried out SuperPreview on a Vista Ultimate machine (4GB RAM) with IE8RC1 installed. SuperPreview would not show IE8 or IE7 views due to some kind of memory error. The IE7 view is simply the IE8 compatibility view which you can get right in IE8. From previous testing, IE7 view in IE8 is not exactly the same as installed IE7, so it’s not really sufficient. The IE6 view appears static, so you can’t check javascript. I use Microsoft Virtual PC to test different browser versions. I’m not very impressed with SuperPreview. I don’t care if my pixels line up exactly in the different versions. What I care about is if the page basically displays correctly and functions correctly. As of now, SuperPreview doesn’t help me much.

  • http://www.18aproductions.co.uk lisaanne

    Any mention of Google Chrome?

  • http://www.mikedesign.net/ mauteri

    @Spigot

    You can also check out IE Tester:

    http://www.my-debugbar.com/wiki/IETester/HomePage

    No Mac, but it runs on both Vista & XP. One stop testing for IE5.5, IE6, IE7, & IE8beta. Not perfect yet, but it’s free and still being developed.

  • David Eldridge

    I am excited about it. Without being a big Microsoft fan, I can still give a hearty thanks for a tool that makes web dev a bit easier.

    @Bradley Wright
    While I can appreciate your sentiment, and even agree that some will consume our sites however they want (as you and many here arguably may), not everyone is using RSS, Twitter, &c. Many cannot figure out why clicking on mailto: links opens up Outlook Express every time they want to write someone from a website. And whether or not they do, it behooves us to work—not at pixel perfection, but—at making the appearance of the standard web presence agreeable. I don’t care if I have a 600×800 display in Black and White version for IE6 users, and another full-color, textured site that uses rounded corner, alpha transparency, and shading for CSS3-supporting browsers. In the final analysis, some people are just going to reach out across the wire and hit our sites on port 80 with their default browser. I just like the fact that checking them without virtualization (or in my case, KVM) is within my grasp. This takes one more step out of my development process, and for that I am abundantly (though a smidge reluctantly) thankful to Microsoft for this offering.

  • http://www.studio-gecko.com/ XLCowBoy

    Microsoft shouldn’t be criticized for helping. That face that they are is enough cause for hope and joy.

  • http://altoonadesign.com halfasleeps

    Any mention of Google Chrome?

    Well they did mention Safari, and they both use webkit, not sure how similar they actually render but I think its pretty close.

  • me

    complete waste of time… its 250 megs and doesn’t do anything

  • Justin Harrison (Expression Web Team)

    @lisaanne – Chrome did not exist when we started working on SuperPreview. Right now we are focused on making sure that we work great with Firefox and Safari. Since Safari is based on WebKit, we hope that this is enough until we have the time to investigate Chrome further.

    @dmwalk – The memory error is one that we are tracking carefully. We need help diagnosing this issue – if you could contact me via e-mail (justin.harrison@microsoft.com) I’d love to help track down what is causing the problem for you.

  • http://fcOnTheWeb.com ferrari_chris

    Sounds like a useful tool. I can’t wait to try it out. :)

  • http://www.arwebdesign.net samanime

    Also note they said they are eager to work with other vendors to add more, so I’d say if Google, Opera, etc. decided to make it know they’d like to work with them, they’d likely join in.

    While Microsoft is still the bane of the web developer’s existence, it is nice to see they are trying to help. I think they finally have someone on their team that has realized that we hate them, and they do seem to be trying to fix this.

  • torlowski

    I think this is a great tool. But, I’m wondering… Do you have to have all the browsers you want to test in installed on your machine, including multiple versions of each browser? If that’s the case, I’d rather use browsershots…

  • http://www.optimalworks.net/ Craig Buckler

    @dmwalk
    I haven’t experienced the problems you have, although I’ve got IE7 installed. Contact the team directly; they do appreciate feedback and are already investigating several issues I discovered.

    The IE6 view appears static, so you can’t check javascript.

    The browser will/should run onload events but then stops. SuperPreview is more useful for checking layouts than functionality. None of the IE6 solutions are perfect in that respect; I’d recommend using a VM.

    @torlowski

    Do you have to have all the browsers you want to test in installed on your machine…?

    You do not need IE6, but you are likely to need all the others. Remember that the free version is IE-only anyway.

    @lisaanne

    Any mention of Google Chrome?

    Chrome is open source so, in theory, Microsoft could adopt it. Whether MS and Google would work well together is another matter!

    I contacted the team specifically about Opera, which is not open source and is hardly MS’s biggest fan. The response was positive: they are concentrating on the most popular browsers first (IE, Firefox, Safari) but are eager to work with Opera if the opportunity arises. Let’s hope it happens.

  • Felix Nagel

    Why? Why? GODDAMN why?
    Why cant MS think about something before release it? We need to test IE6, IE7 and IE8 for our clients. Not only 7 or 8. Both are necessary…

  • btimms

    I thought the whole point of a vm was because different versions of the same IE can’t coexist on the same machine. So now they can?

  • http://www.mikedesign.net/ mauteri

    @btimms i wrote a blog post on this topic last month. check it out if you like:

    http://www.mikedesign.net/2009/02/14/testing-for-internet-explorer-especially-ie6/

  • Justin Harrison (Expression Web Team)

    @btimms – Yes. SuperPreview uses the IE6 rendering engine. This took quite a bit of work to make run side by side on the system.

    @Felix Nagel – We understand. If you watch the interview with Erik Saltwell he mentions that we found during customer research that IE6 presents the biggest challenge for web designers. This is why we chose to include IE6 with SuperPreview. We hope to have more to announce in the future as we hopefully make our cloud rendering service available. Thanks for your feedback!

  • btimms

    mauteri,

    I used IE tester over a year ago and it did not render a true IE6 in some instances – used virtual pc since. I just downloaded IE tester and will give another shot.

    My real question is that this article – and the streaming live demo from MIX09 imply that all browsers – including ie – to be tested need to be on the machine and I would like to know how to do that.

  • n0other

    SuperPreview? I mean, come on, can’t a big bad company come up with a better name?

  • Jeff from XBDiff

    If you’d like to automate some of your cross browser rendering testing, you may be interested in joining the alpha of http://xbdiff.com

    We’re going a step further than Super Preview, IETester and Browsershots by automating the comparison and verification of your pages.

  • http://www.optimalworks.net/ Craig Buckler

    @n0other

    I’m glad it wasn’t just me who thought that! I discussed it up with the SP product manager and suggested “PowerPreview”, but they are happy with the name. Perhaps it’s a grower!

  • http://manwithnoblog.com Gary Barber

    From a practical view it would be nice if it allowed for IE6, IE7, IE8 and IE8 (comp). It seems a little lame to discount a browser. Why not just bundle the browser rendering engine etc for IE7 in the product.

    And Bundling it with Expression Web. That’s a pure marketing move to make people buy more software they don’t need. As a UX designer, I don’t really need Expression Web. But SuperPreview I would pay for if it was a stand alone product separate from Expression Web.

  • konga

    You could also check out this article on how to make IE6, IE7 & IE8 run side by side on XP, without much hassle:
    http://aarfing.dk/?p=120

  • http://www.flixon.com jgd12345

    @n0other:

    I think the name works. Atleast you can roughly understand what it does unlike Adobe Meermeer.

    samanime:

    Microsoft makes my life so much easier with Silverlight with the Expression suite and ASP.NET with Visual Studio. I don’t think you speak for we when you say that you hate them. I think it’s just the php/open source/non microsoft community feeling scared they may be left behind on dead technologies.

  • http://www.calcResult.co.uk omnicity

    How does this thing actually work? As one of the other commenters mentioned, getting multiple versions of IE to run on the same machine, never mind at the same time, is ‘quite difficult’

    Does this mean that it provides some kind of ‘simulated view’?

  • btimms

    omnicity,

    It comes with the ie6 rendering engine embedded. So, if you have ie7 on your machine it can load ie6 and ie7 in a side by side or overlay view.

  • http://www.keithics.com keithics

    i love this tool! big thanks.

  • http://www.clanspace.com.au Robbo89

    I would give this a go if I thought it would help in any way. It is a good idea and hopefully xbdiff will be done soon as well as being free and not packaged with something I don’t want.

  • Luddy

    You would imagine MS would spend more time fixing IE up for web standards rather than spending time writing more software designed primarily for milking people.

  • shevchenfai

    My suggestion is that you keep an old computer or have one machine in your work place that runs IE6. You install IE7, Firefox, Chrome and Safari on your computer. And IGNORE IE8 at this moment. We have too many browsers to mess with already anyway.

  • mackelberg
  • tsuru

    Is it possible to check pages after an login is required?

  • Cameron

    Seems to be a lot of negative comments. Guys please remember this is a beta preview and is not feature complete or bug free.

    From my expereince of using the product I am very excited. This is something I have wanted for a long time. This is going to make designing web sites much easier and I love the guides.

    In the past I have had to result to taking screenshot of web pages and then overlay them in Fireworks over the mockups and other browser renders, now I can do it all in one programme! Thank you Microsoft!

  • Robert Roose

    Anyone knows how you can click a link or is this only available in the full version?

  • sfbarth

    I haven’t tried this tool, but I am basically suspicious of emulating browsers. My testing setup consists of a linux box and virtual machines: each with a complete install of Win XP and IE6 through 8. With 2 GB of RAM I can run all three in parallel (not Vista, though, need more RAM for that). As far as I can tell there’s no faking involved; they ARE the actual browsers, unaltered. Firefox an Opera are installed on one system in addition.

  • http://www.calcResult.co.uk omnicity

    @Cameron:

    If you have to overlay two renderings of the same page to be able to tell the difference between them, then in my opinion they are already close enough.

  • unnamedplayer

    Look at the “Known Issues”. It’s just another moronism to our already cluttered poor web world from Billy. It would be more of a time waste. M$ messes badly, M$ tries to help somewhat, and now, it craps even in doing it.