Preview Sites in Multiple Versions of Internet Explorer with Microsoft SuperPreview

Mar. 20th, 2009 By Jorge Sierra

preview website in internet explorer This week Microsoft announced a new product for web developers called Expression Web SuperPreview. It allows you to preview sites in multiple Internet Explorer browsers simultaneously, without having them installed. The beta version was released on the eve of the MIX09 Developer Conference, which was earlier than expected. You can download it here.

According to the Microsoft Expression Web blog, the versions of Internet Explorer made available within SuperPreview will depend on which version of IE you have installed on your system:

Installed Internet Explorer Version Browser Choices Available
IE 6 IE 6
IE 7 IE 6, IE 7
IE 8 IE 6, IE 8, IE 8 (Compatibility View)

If you’re a web developer that’s been holding off on installing IE 7 because you won’t be able to preview your sites in IE 6, you’ll no longer have to worry about making the upgrade.  You can upgrade to IE 7 and still view pages in IE 6 with SuperPreview.

When you load a page into SuperPreview, you’ll see a side-by-side comparison.  You can zoom in as far as 500% and do a near pixel-by-pixel comparison, or zoom out as far as 21%.  When you scroll, the scrolling is synchronized across browsers, so you see exactly what appears within the same coordinates at the same time.

preview site in ie

You can also click on and drag on the rulers to place markers across the page to get an easy view on how page elements are aligned within the different browsers.  Although the free version only allows you to compare IE browsers, it does have an image comparison you can use to compare a browser screenshot.  If you have a nice image capture that allows you to take screenshots of frames within applications (such as Jing), screenshots can provide a good comparison.

According to the Webdesigner Depot story about SuperPreview, the full version will include support for other non-IE browsers (Firefox, Safari, etc.).  Webdesigner Depot also reports the application will eventually support multiple browser sizes.  The beta preview only allows you to see what sites will look like in a browser at a 1024×768 resolution.

What free tools do you use to perform cross-browser comparisons? Are you familiare with any other tools to preview sites in different versions of IE?

(By) Jorge Sierra is a geek of all trades. Be sure to check out his blog, GeekLad

Enjoyed the article? Subscribe to MakeUseOf to get daily updates on new cool websites and programs in your email for free. You'll also get free printable cheat sheets to your favorite programs

Your Email:

Add MakeUseOf to:



6 Comments Add Comment
2009-03-20 18:27:50
Bob Marx

I’m a Web Developer myself and hopefully this has a “full” version of IE6 since it’s coming directly from Microsoft. The problem with “Multiple IE” http://tredosoft.com/Multiple_IE and “IETester” http://www.my-debugbar.com/wiki/IETester/HomePage is that they have bugs that full native installed versions of IE6 don’t have. Great post!

2009-03-22 08:30:17
Ravi Balla
Subscribed to comments via email

Great! This is exactly what we needed for our application. We all have been holding off on upgrading to IE7 because we needed to deliver the application compatible with IE6. Thanks a bunch.

Ravi Balla

2009-07-01 10:22:59

My team gets some good mileage out of VirtualBox and seperate images for IE6, 7 and 8. Although it eats a ton of ram so you have to have at least 3-4GB per machine to pull it off.

2009-08-26 21:38:41
dimitris
Subscribed to comments via email

No, this is NOT a solution. Why, because superpreview does NOT read comment statements.So all the IF IE conditional statements are ignored. Useless, and I have Studio 3.

2009-10-18 04:24:40
Subscribed to comments via email

If you want a similar tool that already supports not only IE, but Firefox and Safari as well, you may want to take a look a this new cross browser testing application.

2009-10-19 03:25:53
Reply

You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.