Posted by Pad on February 1st, 2010

In version 3, Microsoft Expression Web introduced a new feature to help streamline cross-browser development. Expression Web SuperPreview—SuperPreview for short—simplifies the process of testing and debugging layout issues

What Sets SuperPreview Apart

Both Firefox and Internet Explorer offer developer tools that provide exhaustive detail about a page and every element in it. While these tools are thorough, the information they provide is presented in different ways, making the overall user experience an inconsistent one.

An even bigger challenge for web developers, though, is developing for multiple browser versions. This is particularly difficult with respect to Internet Explorer. Internet Explorer is still the most common browser; the problem is that versions 6, 7, and 8 are all still in use, but only one version can be installed on a computer without resorting to virtual machines (or virtual appliances).

SuperPreview provides the same detailed information for all supported browsers, and it can display previews of a page in Internet Explorer 6, 7, and 8.

How SuperPreview Works

Single browser view

In it’s simplest form, you can use SuperPreview as a kind of extended browser preview. Select this mode by clicking the Single Layout icon .

To get started, select a browser, enter an address (either a live site on the Web or a local development site) in the Location bar , and then click Submit .

Move your mouse over the element you’re interested in (a selection rectangle follows your mouse to help you select the element you want).

If you watch the lower-left corner of the status bar, you’ll see that SuperPreview gives you the basic details of the element defined by the selection rectangle.

The following details are displayed:

• Tag Name: The HTML element.
• Left: The distance from the left edge of the browser window to the left edge of the element, in pixels.
• Top: The distance from the top edge of the browser window to the top edge of the element, in pixels.
• Width: The width of the element in pixels.
• Height: The height of the element in pixels.
• Id: The ID name of the element (if one is defined).
• Class: Any class names defined for the element.

SuperPreview always reports size and position data in pixels, even if the size and position of the element are defined in other units (pt, in, cm, mm, pc).

Side-by-side view

Where SuperPreview really starts to show its true power is in the multiple-browser views.

Click the Vertical Split Layout icon to open a second browser preview pane, select a browser for the new view, and then click Refresh.

Now when you select an element, notice that size and position bubbles are displayed in both browser views. If you select an element in the left browser view and the size and.or position of the same element in the right browser view is different, SuperPreview displays the differing value in red.

Down at the lower right of the screen is the DOM button. Click it to expand the DocumentObject Model (DOM) tree view for the displayed browsers. With the DOM view open, you can select an element from either of the two browser displays or from either of the two DOM views.

Overlay layout view

Click the Overlay Layout icon to display the browser views in a stacked, “onion-skin” view, which clearly shows any browser layout differences. If you started your design from a Photoshop PSD, JPG, PNG, or BMP mock-up image, you can open that in one of the browser display windows and compare it against the page as it is rendered in a browser.

Click the Toggle Thumbnail Visibility icon to display a thumbnail view of the page at the lower-right corner of the browser view. You can select the area of the page to be displayed in the browser view from the thumbnail display.

SuperPreview is a powerful new tool for web developers that can significantly reduce the amount of time you spend troubleshooting layout problems.

If you remember the Expression Web shortcut keys, you probably remember that the regular browser preview opens with the press of the F12 key. The shortcut key for SuperPreview is SHIFT + F12—just like regular browser preview, only bigger and better!

Tags: design, development, web, web standards

This entry was posted on Monday, February 1st, 2010 at 1:41 pm and is filed under Expression Studio, SuperPreview. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.