Expression Web 4 SuperPreview – A closer look

SuperPreview was introduced as a part of Expression Studio 3. Expression Web 4 SuperPreview is the latest version with improved compatibility with more browsers. Even though it is a stand-alone application, SuperPreview is integrated with Expression Web 4 (and version 3 as well). In this article, we will take a closer look at Expression Web 4 SuperPreview.

SuperPreview eases the process of debugging any layout issues across different browsers and platforms. SuperPreview is designed to integrate with Microsoft Expression Web 4 to test your pages right from their stage of being developed. SuperPreview can be used to preview your pages in multiple browsers simultaneously and compare how the page appears in each of them. You can load up any number of different browsers into it. SuperPreview works directly with the browsers installed on your machine, unlike the other browser comparison services where you have to publish your page and then provide the URL to these sites. You can preview ASP.NET or PHP web pages by using Microsoft Expression Development Server.

While SuperPreview available with Expression Web 3 did the same, what is new in Expression Web 4?

SuperPreview 4 has an online beta service that extends the capability of SuperPreview to include support for additional browsers and OS.

How to preview pages in SuperPreview?

Pages could be previewed through Expression Web 4 or directly through SuperPreview

Expression Web 4

Open the page in Expression Web and click on the ‘Display in SuperPreview’ icon. Alternatively choose File > Display in SuperPreview or key in the shortcut Shift + F12.

SuperPreview

Launch Expression Web 4 SuperPreview, click on the ‘Browse for a file’ button from the toolbar on the top of the window and browse to the location. Choose the file and click Open. Click on the green arrow to generate a preview.

Tools in SuperPreview

1. Pointers

There are two pointer modes that determine the way you interact with SuperPreview.

a. Selection Mode selects individual page sections for comparison.

b. Panning Mode can be used to drag a page into the browser view and the mouse wheel changes the magnification of the page.

2. DOM Highlighting

a. Box Highlighting Mode highlights the selected element in blue, in the Baseline browser view and highlights the element in green in the Comparison browser view. This mode works only along with the Selection Mode.

b. Lights-Out Highlighting Mode highlights only the selected element and dims rest of the page.

3. Toggle Ruler Visibility

Click Toggle Ruler Visibility to turn the ruler on and off.

4. Toggle Thumbnail Visibility

Click Toggle Thumbnail Visibility to turn the thumbnail on and off.

5. Layout Modes

Vertical Split Layout arranges the browser views side by side.

Horizontal Split Layout arranges the browser views one beneath the other.

Overlay Layout overlays the browser views.

Single Layout displays a single browser view.

6. Zoom Tool

Choose the level of zoom from the drop down or enter a magnification value.

7. Location box

Enter the path or browse to the web page to be previewed.

8. Sign up for SuperPreview online service

Click to enable SuperPreview online service for remote browser previews. Access to the SuperPreview online service Beta is available to users who’ve purchased or upgraded to Expression Web 4. We will cover this in detail in a future article on SuperPreview Online Service.

7. Options

Opens the Options dialog box with Super Preview online service options. We will cover this in detail in a future article on SuperPreview Online Service.

8. Help

Gives you options to view the Expression Web User Guide, SuperPreview version information and Send feedback.

SuperPreview Workspace

1. Baseline view shows you how your page looks in your development browser.

2. Comparison view displays the way it looks in the comparison browser selected.

3. Quick Position display gives you the size and position of the selected element.

4. The Baseline Browser selector lets you choose your development browser as the baseline browser.

5. The Comparison Browser selector lets you choose up to 8 comparison browsers.

6. DOM tree view shows the entire DOM tree with the chosen element.

7. Tag display shows details of the selected element.

8. Browser size lets you choose a size for your comparison browser, to be able to preview your page in different resolutions.

How to use SuperPreview?

Once you launch SuperPreview from Expression Web 4, if using for the first time, you will have to choose the Baseline browser by using the Baseline Browser selector. Then hit the enter button next to the location box. The location box should display the path to your web page. If for some reason the path is absent, browse to choose the web page.

Then using the Comparison Browser selector, choose one or more comparison browsers (click on the plus sign). Any time you want to close and switch to other browser, using the X sign and click on + sign to add a browser. Then use the above tools to analyze the page in various browsers.

The comparison browser list is populated with the browsers installed on your system. SuperPreview in EW4 will show IE6, IE7 and IE8 compatibility view and current version. If you have IE9 Beta installed, then IE8 will not be rendered. If you want IE8 then IE9 beta needs to be uninstalled. This is so because IE9 Beta was released after EW4 and hence could not be tested. However a static view of IE9 rendering is available in SuperPreview 4 online Beta. SuperPreview v4 online has also been updated to add support for Safari 5 (Mac). So now you can also choose either Safari 4 or Safari 5 for previewing through the cloud. We will learn more about SuperPreview Online Service in a future article.

I hope you liked the article and I thank you for viewing it.

Author

Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke