- Getting Started with SuperPreview Online
- Using the SuperPreview Online Service
- SuperPreview Keyboard Shortcuts
- Other New Features
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using the SuperPreview Online Service
The SuperPreview Online Service in Expression Web 4 works pretty much the same way SuperPreview worked in Expression Web 3. It can be launched using a standalone icon on your desktop, or from within Expression Web. When you launch the program, your workspace contains two panes (see Figure 3). The Baseline pane on the left previews the page in a baseline browser installed on your computer; the Comparison pane on the right previews the page in a comparison browser.
)
Figure 3 SuperPreview Online workspace.
Use the baseline browser selector to select a browser you have installed on your computer. You can choose the version of Internet Explorer you have installed; in some cases, you can choose other versions of Internet Explorer. You can also choose Firefox if you have that program installed. Click the Close button in the baseline browser selector to see what options are available to you (see Figure 4).
)
Figure 4 Baseline browser pane.
Like the baseline browser selector, the comparison baseline selector can be used to select a browser on your computer, or you can use it to select the browser offered by the SuperPreview Online Service (see Figure 5). At the time of writing, the only browser offered by the SuperPreview Online Service was Safari 4 for the Mac, but we hope that Microsoft will add other offerings soon.
){kind=small}
Figure 5 Browser selection icons.
After selecting a baseline browser and a comparison browser, go to the Location box and enter the URL for the site you want to preview (see Figure 6). Alternatively, click the ellipsis (…) button next to the Location box and browse for a file on your PC to preview. When the Location box contains the correct address, press Enter.
){kind=small}
Figure 6 Use the Location box to specify the web page you want to preview.
SuperPreview displays the web page in the Baseline and Comparison panes. If you're using a remote browser in the Comparison pane, the display may take a bit longer, as SuperPreview is accessing a cloud service. Figure 7 shows the home page of the Microsoft Expression website in Internet Explorer 8 (baseline) and Safari 4 for Mac (comparison).
)
Figure 7 Microsoft Expression website, previewed in Internet Explorer 8 and Safari 4 for the Mac.
Try clicking various elements on the page. If the element would be displayed differently in one browser versus the other, the difference (in either the size or position of the element) will be displayed at the bottom of the workspace. Figure 8 shows the difference highlighted in red in the Comparison browser pane; in this example, the difference is the result of clicking the Expression Web image.
){kind=small}
Figure 8 Elements rendering differences between browsers are displayed in red.
If you want to see what's going on in your code that might explain the difference in how the page looks in the two browsers, click the DOM tab in the lower-right corner of your screen. This feature will give you a view of the code where the problem is and help you to fix it.
Another neat feature is the ability to change the browser viewport size to see how your page renders at different resolutions. To use this feature, click the Browser Size drop-down list in the lower-right corner of your workspace (see Figure 9). If the size you want isn't in the list, you can add a custom size.
){kind=small}
Figure 9 Change the browser window size by choosing from the drop-down list or by specifying a custom size.
Another feature I find very helpful is Overlay Layout. The default view of the browser panes is side-by-side (vertical). Choosing the Overlay Layout places the preview from the baseline browser on top of the preview from the comparison browser, showing an instant visual of the rendering differences.