Expression Web 3 Super Preview:

I just started playing with Expression Studio 3 today and have already stumbled upon 2 very cool new tools. The first of which is Expression Web 3 Super Preview.

This new program lets you load a web page in two different browsers at once and compare side by side differences. There are a few very nice compare methods that let you spilt the screens and select specific regions of the screen and easily isolate an area in both browsers.

The best compare style of all though is overlay. This take both pages and layers them on top of each other and adjusts the transparency so you can see the layout differences of both pages. This is hard to explain with showing you so I have created a simple screencast that demonstrates the functionality.

Expression Web 3 Super Preview from Brad Cunningham on Vimeo.

(NOTE: Vimeo downsampled the video when I uploaded :( If you want a higher quality version you can download it from here)

In this screencast I load up my blog in the super preview tool.  The left hand panel will load using Firefox 3.0.12 and the right hand panel will load up using IE6.

Then I switch the highlighting mode to “Lights out mode.” This creates  a shadow box like effect on the page so you can visually isolate aspects of the page. I select something on the left hand side (in Firefox) and you can see the corresponding element in the right hand pane (IE 6). You can see already how the two browsers render spacing differently. You can see in the bottom left corner there is a dialog that shows the width and height of the highlighted element and the Left and Top as well. you can see in the IE panel how it shows the Left and Top in red, indicating a difference from Firefox.

This is an amazingly valuable tool for any web designer IMO.

Now for the crème de la crème. Overlay mode. I can switch the windows so they overlay each other and see all the visual difference at one time, visually, without clicking around or guessing. This is totally awesome. How useful it will be to web developers I don’t really know (I have renounced my former life as a web developer and now, only play one on TV) but man does it look cool!

I will have a follow up post discussing the other cool new tool, Expression Encoder 3 Screen Capture, in the near future