Attention: We are retiring the ASP.NET Community Blogs. Learn more >

Previewing Websites in Multiple Browsers with Expression Web 3’s SuperPreview

Expression Studio 3 has a great new feature that was announced and demonstrated back at the Mix 09 conference called SuperPreview.  It allows you to compare how a page looks across multiple browsers including IE6, IE7, IE8 and FireFox (with more reportedly coming in the future).  In this post I’m going to provide a quick look at SuperPreview and walk you through some screen shots to get you started using it.

After installing Expression Studio 3 I opened SuperPreview and saw the browsers shown in the image below.  The first thing you’ll notice is that you can test IE6.  Although I personally wish this browser would die and go away, my company still works with several clients who have large IE6 deployments across the enterprise so it’s nice to be able to test it easily.  Previously I used IETester (which works quite well) to test different versions of IE.

image


I’m a big fan of the new Safari 4 browser for Windows and wanted to be able to test against that as well but it’s not currently supported.  Based on various Microsoft blog posts I’ve seen they’re planning to release support for Safari and other browsers later so I’m hoping that’s the case.  To see how a site looks in multiple browsers select a browser on each side of the SuperPreview interface by clicking the browser icon, type the URL to test into the Location textbox (at the top center of the SuperPreview window) and hit Enter:

 

image


The browsers that your testing will show at the bottom of the screen and you can even test in different resolutions by clicking the Browser Size drop-down in the bottom-right corner.  Click the X icon next to a browser to remove it.

If you’d like to test multiple browsers in one window and compare them against a baseline browser you can select a browser on the left side followed by another browser from the right side.  Then click the + icon at the bottom left of the screen (to the right of the second browser) and add others.  Here’s what it looks like after selecting several browsers:


image


SuperPreview also includes a DOM viewer that can be used to compare the DOMs across multiple browsers.  To use it click the DOM tab located in the bottom-right corner of the SuperPreview window.  Once the DOM window is showing you can click on anything within the browser preview windows and you’ll see the associated HTML tags and CSS styles associated with the element:


 image


You can also drag the ruler onto pages to compare how things line up vertically and horizontally:

image


Finally, you can overlay browsers to see how pages match up by clicking the D key.  Here’s an example of overlaying Firefox 3.5 and IE 6 screens (brace your eyes since it creates a blur type of effect…gotta love IE6):


 image


There’s more you can do with SuperPreview but the features shown here are quite important when you’re trying to make sure a site looks good across multiple browsers.





Follow me on Twitter @DanWahlin

Subscribe to my Free FlipBoard Magazines:


8 Comments (previous comments before moving to Disqus)

  • This is really a good feature :)

  • its really good but.... only good for static pages site
    if your site require login then ???? is this work ??? i think nooo...........

  • This would be nice if it support authentication. Since it does not, its almost a throw-away since you can only test static content that doesn't require a login.

  • I played around w/ this tool for a little, but then couldn't find out how to interact with the controls.

    Which left me disappointed, because most of my website is secured and I couldn't logon to the website.

    Am I missing something?

  • I believe this is for designers who know html and css. Not necessarily programmers. Not all shops have a person like this.

  • Agree with other posters, seems useless if you cant interact with the web-pages, shame

  • Chris,

    While I agree interacting with it would be a great feature, I don't think it's useless at all since the point is to look at specific pages to ensure they look good cross browser. Having said that, IETester does allow you to interact with a given site but it's only for testing different IE browsers.

  • I agree it is worthless for anything but static pages. Until it allow you to interact with the pages (click links, buttons, etc) there is limited use to this application. This could be a killer app, but missing this feature is a killer.