Programming

Microsoft SuperPreview: a New Way to Test Web Sites

    Craig Buckler
    Share

    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?