Microsoft SuperPreview: a New Way to Test Web Sites
Browser 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:
- 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?
Frequently Asked Questions (FAQs) about Microsoft SuperPreview
What is Microsoft SuperPreview and how does it work?
Microsoft SuperPreview is a tool that allows web developers to test their websites in multiple browsers and operating systems. It works by creating a virtual environment where you can view your website as it would appear in different browsers, without needing to install them all on your computer. This is particularly useful for ensuring compatibility and consistency across different platforms.
Is Microsoft SuperPreview free to use?
Yes, Microsoft SuperPreview is free to use. It was initially part of the Microsoft Expression Web suite, but it has since been made available as a standalone application.
How does Microsoft SuperPreview compare to other website testing tools?
Microsoft SuperPreview stands out for its ability to provide side-by-side comparisons of how a website looks in different browsers. It also offers support for a wide range of browsers and operating systems, including older versions that are still in use.
Can I use Microsoft SuperPreview to test mobile websites?
Yes, Microsoft SuperPreview supports testing of mobile websites. It can simulate various mobile devices and screen sizes, helping you ensure that your website is responsive and mobile-friendly.
What browsers does Microsoft SuperPreview support?
Microsoft SuperPreview supports a wide range of browsers, including Internet Explorer, Firefox, Chrome, Safari, and Opera. It also supports different versions of these browsers, allowing you to test your website in older browsers that some of your users might still be using.
How can I get started with Microsoft SuperPreview?
To get started with Microsoft SuperPreview, you need to download and install the application from the Microsoft website. Once installed, you can start testing your website by entering its URL into the application.
Can I use Microsoft SuperPreview on a Mac?
Unfortunately, Microsoft SuperPreview is only available for Windows. However, there are other similar tools available for Mac users, such as BrowserStack and CrossBrowserTesting.
Can Microsoft SuperPreview help me identify and fix issues with my website?
Yes, Microsoft SuperPreview can help you identify issues with your website by showing you how it looks in different browsers. You can then use this information to make necessary adjustments and fix any compatibility issues.
Does Microsoft SuperPreview support JavaScript and CSS?
Yes, Microsoft SuperPreview supports both JavaScript and CSS, allowing you to test dynamic elements and styles on your website.
Can I use Microsoft SuperPreview offline?
Yes, you can use Microsoft SuperPreview offline. This is particularly useful if you want to test local files or if you’re working in an environment with limited internet access.
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.
