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:
- Different browsers can be viewed and compared in vertical and horizontal layouts. Scrolling moves all the pages at the same time.
- The pages can be rendered at different browser sizes.
- A pixel ruler and full-page thumbnail helps page navigation.
- PhotoShop-like window guides can be positioned to check element alignment.
- 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.
Further screenshots (unreleased development build):
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?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers