13. Using SuperPreview

An Overview of SuperPreview

In the early days of web design, it wasn’t uncommon for a page to render very differently from one browser to the next. Web standards were still largely in flux and proprietary code was widespread. Because of these conditions, web designers would typically either spend a considerable amount of time implementing hacks to fix rendering problems or would design for one particular browser flavor and recommend that site visitors use that specific browser.

Web standards have solidified greatly over the years, and modern browsers are typically compliant with those standards. However, these conditions don’t mean the end of compatibility concerns. Some users are still using older browsers, and some of those browsers can introduce some serious layout problems.

SuperPreview

Expression Web includes SuperPreview, an extremely powerful tool for identifying and correcting layout problems with your site. SuperPreview has many benefits over traditional tools for previewing pages, but perhaps the most revolutionary is the capability to preview a page using several versions of Internet Explorer without having to install multiple versions and the ability to preview your page in Safari on a Mac using the remote browser service.

SuperPreview enables you to view a preview of a page in a baseline browser and a comparison browser. Figure 13.1 shows a SuperPreview preview of the Jimco Books site using Internet Explorer 6 as the baseline browser and Firefox 3.6.6 as the comparison browser. SuperPreview’s built-in rendering engine for Internet Explorer 6 makes it possible to see exactly what your page looks like in Internet Explorer 6 without having it installed on your system.

Figure 13.1. SuperPreview is a powerful tool for checking your page’s appearance and layout in multiple browsers.

How SuperPreview Generates a Preview

When you launch SuperPreview, it first determines which browsers should be available for preview. If you have Internet Explorer 6 installed, SuperPreview only provides a preview of Internet Explorer 6. If you have Internet Explorer 7, SuperPreview makes Internet Explorer 6 and 7 available for preview. If you have Internet Explorer 8, SuperPreview makes Internet Explorer 6, 7, 8, and Internet Explorer 8 in IE7 compatibility mode available for preview.

In addition to these IE versions, SuperPreview also makes Firefox available as a choice if you have Firefox installed. SuperPreview also supports Safari on the Mac using a remote browser service.

For more information on previewing using remote browsers, see “Using Remote Browsers,” p. 230.

To generate a preview using SuperPreview, first select the baseline browser by selecting one of the browser options from the left pane; then select a comparison browser from the right pane. Enter a URL to preview in the Location box as shown in Figure 13.2 and press Enter.

Figure 13.2. The left pane in SuperPreview shows options for the baseline browser, whereas the right pane shows the comparison browser.

When SuperPreview builds its preview, it runs the URL you specify through the actual rendering engine for the browsers you’ve chosen. In addition to loading the page, SuperPreview also executes all script in the page through the OnLoad event so that any client-script designed to change page rendering is recognized by the preview that is generated. The result is a 100% accurate preview of your page. In other words, if you select Internet Explorer 6 and generate a preview, you can be assured that what you see is exactly what visitors using Internet Explorer 6 will see when your page is viewed.

The SuperPreview Interface

Before we go too much further into using SuperPreview, it might help to look at the SuperPreview user interface. After we’ve reviewed all of the interface tools available, we’ll look at how you can use those tools to identify rendering problems in your pages.

Pointer Modes

The leftmost two toolbar buttons control the pointer mode, meaning how the mouse pointer works in SuperPreview. The first button changes the pointer mode to Selection mode. With Selection mode enabled, clicking inside the preview selects the element on which you click. This is useful to examining the specific properties of a page element.

The next button sets the pointer mode to Panning mode. With this mode selected, you can drag the page you are previewing so you can view areas of the page that don’t fit within the confines of the preview window.

Pointer modes are mutually exclusive. In other words, clicking the Selection mode button deactivates Panning mode, and vice versa.

DOM Highlighting

When operating in Selection mode, clicking any page element selects that element. SuperPreview uses one of two highlighting modes to identify which DOM element is selected. Highlighting modes are selected using the Box Highlighting Mode and the Lights-Out Highlighting Mode buttons, as shown previously in Figure 13.2.

When Box Highlighting mode is selected, clicking a DOM element draws a border around the element. When Lights-Out Highlighting mode is selected, clicking a DOM element highlights the selected element and causes all other DOM elements to appear dimmed, as shown in Figure 13.3.

Figure 13.3. Lights-Out Highlighting mode lets you easily identify exactly which DOM element is selected. In this figure, the Welcome banner is selected.

UI Helpers

The next section of the toolbar contains three user interface helpers. The Toggle Ruler Visibility button toggles the display of the rulers along the edges of the preview window. The Toggle Thumbnail Visibility button toggles a small thumbnail view of the page in the lower-right corner of each preview. The Toggle Guide Visibility button toggles the display of the guides.

Layout Modes

The Layout Modes section of the toolbar contains buttons to control how your previews are laid out.

The Vertical Split Layout button shows the baseline and comparison browser previews side-by-side. This is the default setting. The Horizontal Split Layout button displays the baseline and comparison browser previews one on top of the other. The Overlay Layout button provides a view of the baseline browser superimposed on top of the comparison browser as shown in Figure 13.4.

Figure 13.4. Overlay Layout is perhaps one of the most powerful and impressive features in SuperPreview.

Finally, the Single Layout button allows you to view either the baseline browser or the comparison browser in its own window.

Preview URL

The URL you are previewing is specified using the Location text box. However, you can also click the ellipsis button and select a file on your local disk to preview. This is useful in cases where you want to view a preview of a file in a disk-based site before publishing it to the Internet.

Baseline and Comparison Browser Selectors

The baseline and comparison browser selectors allow you to choose which browser you want to use for your baseline browser and comparison browser. Each has a Close button in the upper-right corner so you can choose a different browser if you want. Additionally, the baseline browser selector offers a button under the Close button that alternates the baseline browser between the left and right preview panes. The comparison browser selector provides an Add button underneath the Close button that makes choosing multiple browsers as a comparison browser easy.

If multiple browsers are selected as the comparison browser, you’ll see multiple browser selector buttons available for the comparison browser. In Figure 13.5, both Internet Explorer 8 and Internet Explorer 6 are being used as a comparison browser. To switch the preview pane between IE8 and IE6, simply click the corresponding version on the comparison browser button.

Figure 13.5. Multiple browsers can be chosen for the comparison browser. You can easily switch between them by clicking the appropriate button.

DOM Tab

The DOM tab expands a window at the bottom of the SuperPreview window that shows the DOM tree for the currently previewed page. Using the DOM tab, you can easily locate the actual DOM element that is responsible for any rendering irregularities.

Figure 13.6 shows the DOM tree expanded after clicking the DOM tab. Notice that the currently selected element in the preview window is also selected in the DOM tree.

Figure 13.6. The DOM tree provides a quick and easy way to identify the code responsible for rendering problems.

Browser Size Drop-Down

The Browser Size drop-down contains a list of popular resolution settings and allows you to preview your page using whatever resolution you choose. If your desired resolution is not listed, you can choose Custom Size from the drop-down as shown in Figure 13.7, and you can then define your own size.

Figure 13.7. The Browser Size drop-down makes previewing your page in a specific resolution as simple as a click.

After you select a new browser size, SuperPreview regenerates any previews it is currently displaying.

Now let’s use SuperPreview to investigate a rendering problem in a page so you can begin to fully realize the power and potential of this tool.

Using SuperPreview to Preview Layout

You’ve probably already realized that SuperPreview can be an incredibly valuable tool when you know that your page renders differently in a specific browser version. However, what you might not realize is that SuperPreview can help you identify subtle rendering differences you might not have even been aware of. Let’s look at just such an example as we discover how SuperPreview can help to identify why a page renders slightly differently in two different browsers.

Setting Up the Previews

The first thing you need to do when using SuperPreview is choose your browsers. For this particular test, we’re going to select Firefox 3.6.6 as the baseline browser and Internet Explorer 8 in IE7 compatibility mode as the comparison browser. To do this, simply click Firefox 3.6.6 in the left preview pane and Internet Explorer 8 → 7 in the right preview pane. Your SuperPreview dialog should look like the one shown in Figure 13.8.

Figure 13.8. SuperPreview is now configured with Firefox 3.6.6 as the baseline browser and Internet Explorer 8 in IE7 mode for the comparison browser.

Generating Previews

In the Location box, enter www.jimcobooks.com and press Enter. SuperPreview generates a preview of the page using each of the browsers that were selected as shown in Figure 13.9.

Figure 13.9. This SuperPreview example shows both an obvious rendering problem and some problems that aren’t immediately apparent.

You might immediately notice that the banner ad on this page is a little off between the two previews. However, you may not notice many other small rendering differences. To see these, click the Overlay Layout button. After you do, you’ll see that several page elements on this page are positioned differently in Firefox 3.6.6 and in IE8 running in IE7 compatibility mode.

Fixing Rendering Problems

First, the banner ad on the page appears to be slightly lower on the page in Firefox than in Internet Explorer. To get a better idea of what might be causing this problem, switch to Lights Out Highlighting mode and click the banner ad. The SuperPreview window should look like the one shown in Figure 13.10.

Figure 13.10. Locating rendering problems is made easier with the combination of Lights Out Highlighting mode and Overlay Layout.

The additional whitespace at the top of the banner in Firefox is obvious, but notice that the Size, Left, and Top measurements displayed in SuperPreview are identical in both browsers. That tells you that the rendering problem is not with the banner ad itself, but likely with another element’s position in relation to the banner ad.

Click anywhere on the page other than on the banner ad to deselect it. Click the orange graphic that surrounds the banner ad to select it. Notice now that the Top measurement shows a difference between Internet Explorer and Firefox (see Figure 13.11).

Figure 13.11. The Top measurement shows a difference between the two browsers.

We now know that the orange border around the banner ad is the source of the rendering problem, but to find out exactly what might be causing this problem, we need to investigate the code that underlies the page element. Fortunately, SuperPreview provides tools for investigating the DOM as well.

Click the DOM tab (shown previously in Figure 13.2) to display the DOM for the page as shown in Figure 13.12. Notice that the element we’ve selected is an <img> element, but it’s wrapped in a <div> with a class of bannerAd.

Figure 13.12. The DOM tab shows a synchronized view of the page’s DOM so you can locate the code behind your preview.

If you click the <div> in the DOM tree, you’ll notice that the size of the <div> is different in Firefox than it is in Internet Explorer (see Figure 13.13). This is the source of the problem. By modifying the bannerAd CSS class and specifying height, width, and top CSS properties, this rendering problem can easily be corrected.

Figure 13.13. SuperPreview lets you easily identify the source of this rendering problem. Here we see that the <div> is sized differently in Firefox and Internet Explorer.

As you can see by this example, SuperPreview offers some incredibly powerful tools for identifying exactly why rendering problems exist. Some rendering problems aren’t as easy to resolve as this one, but identifying the source element of the problem is often one of the most difficult steps in resolving rendering issues, and SuperPreview provides power and flexibility web designers have not had before.

Using the Snapshot Panel

In some cases you might want to preview a page quickly in a particular browser. In such cases, you can use Expression Web’s Preview in Browser feature, but if you want a quick preview without having to take the extra step of previewing in your browser, the Snapshot panel offers a great solution. Using the Snapshot panel, you can see a preview using the SuperPreview preview engine inside a panel integrated into the Expression Web interface.

To activate the Snapshot panel, select Panels, Snapshot. By default, the Snapshot panel is displayed at the bottom of the Expression Web interface, as shown in Figure 13.14, but you can drag the panel and dock it on any side just as you can with any other panel in Expression Web.

Figure 13.14. The Snapshot panel offers a preview using the SuperPreview engine right within the Expression Web interface.

You can switch between different browsers in the Snapshot panel by selecting your desired browser from the drop-down in the upper-left of the Snapshot panel.

If you have Service Pack 2 or later installed, the SnapShot panel offers an interactive mode that allows you to preview your page along with any dynamic content. In other words, if your page contains a JavaScript menu, the menu works in the SnapShot panel exactly the same way it works in the browser. However, there is a catch. Interactive mode is only available for the version of Internet Explorer that is installed on your system and for Firefox version 3.x.

Using Remote Browsers

One of the new features in Expression Web 4 is the remote browser functionality of SuperPreview. This feature currently provides a preview using Firefox 4, Firefox 5, Safari 4, Safari 5, and Chrome.

To use the remote browser feature, you must first activate your computer by clicking the Sign Up For SuperPreview Online Service button on the toolbar, shown previously in Figure 13.2. When you do, you are asked to enter your email address, to which Microsoft sends an activation link. Once you receive the email, click the link in the email message to validate your email address. You can then click Activate in the Online Service Activation dialog as shown in Figure 13.15.

Figure 13.15. The Online Service Activation dialog is used to activate the SuperPreview remote browser feature.

After you’ve activated the remote browser service, you’ll see Safari (Mac) listed in the Remote Browsers section of SuperPreview as shown in Figure 13.16.

Figure 13.16. Additional browsers appear as a choice once you’ve activated the remote browser service.

You can control online service options by clicking the Options button on the toolbar, shown previously in Figure 13.2. The SuperPreview Options dialog (shown in Figure 13.17) makes it possible to check the status of the SuperPreview online service and to deactivate or delete your online service account. You can also choose to package web pages for previewing in remote browsers.

Figure 13.17. The SuperPreview Options dialog provides settings for the SuperPreview Online Service.

Packaging web pages for remote previewing is important in cases where the online service might not have access to files necessary to build a preview of your page. For example, if your site exists on an intranet site or on your local computer, the online service will likely not have access to images, CSS files, and so on that are necessary for building a preview. By checking the Always Package Web Pages for Remote Browser Previews check box as shown in Figure 13.17, you can ensure that your previews are accurate.

As you’ve seen in this chapter, the powerful preview tools offered by SuperPreview substantially reduce the pain involved in dealing with designing for multiple web browsers. As Microsoft continues to evolve this product, I have no doubt but that we’ll see even more amazing capabilities for web designers.

Building Layouts with SuperPreview

One of the more common methods of web design is to build a mock-up of a site in a tool such as Expression Design or Adobe Photoshop and then to develop the code and CSS necessary to replicate that mock-up. SuperPreview can be an important part of ensuring that the code you are creating is cross-browser compliant.

To use SuperPreview to assist in building sites that use a mock-up, click the Open Image button in one of the preview panes and browse to your mock-up. Next, select your desired browser in the other SuperPreview preview pane and then switch to Overlay Layout. Your browser preview will be superimposed over your mock-up, and you’ll be able to quickly and easily determine whether your page is rendering correctly.

Another great feature in SuperPreview that aids in building layouts is the inclusion of Photoshop-like guides. If you click and drag from one of the rulers onto the preview area, a guide can be placed either horizontally or vertically on the page so that precise layouts are made easier. As shown in Figure 13.18, SuperPreview shows the current position of the guide as you are dragging.

Figure 13.18. Photoshop-like guides make checking positioning of precise layouts easy.

To remove a guide, simply drag it back to the ruler. Alternatively, you can use the Toggle Guide Visibility button to hide any guides you’ve placed.

Using these tools, SuperPreview stands poised to revolutionize how web designers troubleshoot and resolve rendering issues between browsers, and I think it’s one of the most exciting new features in Expression Web.