Microsoft Announces SuperPreview for IE Browser Testing

Wdd Logo.
March 18, 2009

superpreviewBrowser testing is a hot and frustrating issue among web designers and developers alike. In most cases, developers design for one target browser and once they're done, they start tweaking their design to make it compatible with other browsers.

There are many ways to test a website before launching, and these include having multiple browsers and operating systems installed, running virtual machines with different configurations or using a hosted image service where a screenshot is produced for a given browser version and operating system to be used for comparison purposes.

Starting today, there's a new way for testing browser compatibility developed by Microsoft and it's called SuperPreview. In this article, I'll be giving you a brief review of SuperPreview as well as comparing and listing alternate systems for testing your website designs.

Overview

SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6. They'll also be releasing a paid version which will handle the non-IE browsers. In this review, I'll be discussing the free version only. I should mention that this is a very early preview release, so more features and fixes should be coming in the future.

Availability

The beta version of SuperPreview will be announced today at the Mix09 conference and will be available for free download to the general public shortly after that. [UPDATE] Software was released today prior to MIX09, and earlier than originally expected and is now available: Download Microsoft SuperPreview

I was approached by Microsoft to test an early beta version and I've been working with their development team over the past few days by giving them feedback and suggestions.

The release version of SuperPreview for Internet Explorer will be available in the summer of 2009.

There's also a full version which includes support for Firefox and Safari. This is a PAID version which will be part of Expression Web 3. You will have the option to enable it from Expression Web or as a standalone. Estimated release date is also summer of 2009.

SuperPreview

SuperPreview is a pretty cool idea and it's the first time that I've seen this kind of browser testing functionality available as a standalone application as opposed to a hosted service. You basically enter the URL (or local file) that you want to test and it shows you the preview in two versions of IE at the same time, in a split window. It comes with the IE6 rendering engine built-in and requires you to have IE7 or IE8 in order to compare them.

A major drawback is that, at this time at least, they have no concrete plans to release a Mac version, although this may be added in the future. I had to test this on my Mac using Parallels which produced a few bugs, such as slow response time and flickering on some of the loading screens. Also, the user interface is pretty unattractive and not very user friendly in my opinion, although they claim to be fixing this for the final release.

Also, there's no hosted solution available yet, which would be especially useful for those of us on Macs who cannot install IE for testing purposes.

Key Features:

  • Pointer Modes: Allows you to click on individual page sections for comparison. The section's HTML tag name, its class or ID name, size and position attributes are displayed in the status bar.
  • Image viewing: Compare Photoshop comp against the baseline browser to ensure that everything lines up in the browser to match your original design.
  • Dom Highlighting: You can highlight specific DOM elements to see which where there are alignment differences between the browsers. It displays the positions of the rendered elements and their CSS properties.
  • Positioning Guides/Rulers: Use rulers to measure the layout differences between browsers. When you position a ruler in one browser window, the ruler in the second browser moves with it.
  • Layout views: View side-by-side either horizontally or vertically, or overlay mode.
  • Zoom: To select the level of magnification.
  • Multiple resolutions: Not yet available in this beta release, but will be included in future releases.
  • Thumbnail display: Previews a thumbnail at the bottom of each panel with a miniature map like view of the entire site so that you can quickly click on a different area of the page.

Examples:

The toolbar showing the different guides and rulers

toolbar


Guides and rulers with DOM highlighting show the differences in rendering in IE6 and IE7

overlay


Choosing local browsers, remote browsers or images (screenshot of full version with non-IE browser support)

multiplebrowsers


Pros:

  • No need to install IE6.
  • Side by side comparison and choice of layout views.
  • Can compare Photoshop comp against baseline browser.
  • Guides and rulers to measure positioning differences between browsers.
  • Overlay mode will show if there are many discrepancies.
  • DOM highlighting is useful to find and identify differences quickly.
  • Zoom capability.
  • Free for IE browser previews.
  • Displays PHP and ASPX pages (provided that you have PHP installed on your system).
  • Supports whatever the native browser supports, including Ajax and JavaScript.

Cons:

  • Currently it works with IE8 in IE7 emulation mode, which is apparently about 90% good. They're working on making true built-in IE7 and IE8 rendering.
  • No version for Mac yet.
  • Resolution option not currently available in the beta version.
  • Free version only compares among different versions of Internet Explorer and paid version only compares among browsers that you have installed.
  • Unattractive UI and icons (at least in the beta version).
  • Overlay mode is confusing to identify which browser is which.
  • No hosted solution available yet.
  • No support for ActiveX (including Flash).
  • Cannot compare with Mac browsers.
  • Cannot click on links to navigate the site.
  • Slow refresh/loading time (at least running XP in Mac with Parallels).
  • Thumbnail preview is useless for very long web pages.


Other Testing Methods

A common method for testing a site (besides installing a number of browsers and operating systems) is to use a hosted service that takes screenshots of your web page as viewed in different browsers and operating systems. Here are a few of the most popular ones:

BrowserShots

Supports multiple browsers, Java, Flash, Javascript and screen resolutions. Easy to use and free.

browsershots


Browser Photo

Supports multiple browsers and versions as well as Windows, Mac and Linux. From 800x600 up to 1024x768. Price: $15 for one time use, or $150 per domain/year for unlimited use

browserphopto1


CrossBrowserTesting

Supports multiple browsers and operating systems. You pay per minute of usage. Requires Java. Free trial.

crossbrowsertesting


Browsercam

Supports any browser, any operating system. Includes JavaScript, DHTML forms and more dynamic functionality. Option for remote access and mobile page development. From $19.95 for one day usage for browser capture.

browsercam


BrowsrCamp

MAC OS X browser testing using screenshots. From 800 px resolution up to 1600. Free for Safari 3.1.2 screenshots. Paid service from $3 per day.

browsrcamp


NetRendered

Checks how a website is rendered by Internet Explorer 7, 6 or 5.5. Free.
netrednered


Litmus

Checks every browser and any platform and includes bug tracking. 50 test a month is free but only for IE7 and Firefox 2. 23 Browser support starts at $24 per day.
litmus

Finally, you could install multiple browsers, or use virtual machines for further testing.

Virtual Software:

Allows you to install multiple operating systems on the same computer

Further reading:

http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml
http://css-discuss.incutio.com/?page=BrowserTesting


Disclaimer from WDD's editor: This post is a personal review of SuperPreview. I was not compensated in any way by Microsoft or any other company for reviewing this product or the others. The opinions expressed here are solely my own.


Please post below what other systems you use for testing your website designs across different browsers and different versions.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…