SuperPreview Online Service in Expression Web 4 SP 1

Tina ClarkeExpression Web 4 now has a new SuperPreview Online Service which allows support for additional browsers and operating systems.

NOTE: It is best before reading this tutorial to first review the in-depth Expression Web 3.0 SuperPreview tutorial with Starter Kit before expanding your knowledge into Expression Web 4.0 SP1/SP2 SuperPreview.

The most requested feature for SuperPreview was the ability to preview pages that needed to be authorised with multiple browsers. With the advent of Service Pack 1.0 you are now able to do just that.

To use these new features you will need to install:

Microsoft Expression Web 4 Service Pack 1 (SP1)

System Requirements:

Supported Operating Systems: Windows 7, Windows Vista, Windows XP Service Pack 3

  • PC with 1 GHz or faster processor
  • 1 GB of RAM or more
  • 2 GB or more of available hard-disk space
  • .NET Framework 4.0
  • Silverlight 4.0
  • Support for Microsoft DirectX® 9.0 graphics with Windows Vista Display Driver Model (WDDM)
  • Driver, 128 MB of graphics RAM or more, Pixel Shader 3.0 in hardware, 32-bits per pixel
  • DVD compatible drive
  • 1024 x 768 or higher resolution monitor with 24-bit color
  • Internet functionality requires Internet access (additional fees may apply)
  • Some product features require Firefox 3.0 or later, Internet Explorer 8
  1. Along with SP1 comes support for chrome (via online service)
  2. Page interaction Mode - which lets you as the name suggest browse interactively to the page you want to view which then submits that page to the browsers you selected previously. Which of course allows you to view password-protected pages via SuperPreview.
  3. If IE9 is installed locally SuperPreview can now check rendering in IE6, IE7, IE8 and IE9.

There are four changes to the toolbar:

  1. Interaction Mode Icon (globe with arrow)
  2. SuperPreview Online Service Icon (page with pen)
  3. Enable or disable Preview with remote browsers Icon (bar with half circles above)
  4. The Zoom Icon is now on the left instead of the right of the Url location Icon.

Toolbar Icon changes for SuperPreview 4.0 SP1. 
Fig 1 - Toolbar changes

NOTE: If the SuperPreview online service has not been enabled on your computer, the SuperPreview online service icon is not displayed

Setting SuperPreview Options

If you have not already done so by following the Expression Web 4.0 Setting up Ebook or Setting Up Expression Web 4.0 online Tutorials you should set your options before you begin.

Options Icon. Fig 2 - Options Icon Click the 'Options Icon' (see Fig 2) to bring up the SuperPreview Options dialog box.

View Screen Shot  - Fig 3 - SuperPreview Options

You should tick the 'Always package web pages for remote browser previews'.  (see Fig 3) What this does is request every resource for a particular page and then packages that and sends it to the remote browser service. This is required if resources for a page are behind a firewall where the preview service can't get to them if not used it could cause page rendering problems

Account Management Options

Also in the SuperPreview Options dialog box are your Account management options

Deactivate: Click to disable 'The SuperPreview online service' on this computer.
Delete account: Click to delete your 'SuperPreview online service' account.

WARNING: Deleting your SuperPreview account disables all instances of The SuperPreview online service associated with the e-mail address you used to activate your account. If you delete your SuperPreview online service account, you will have to complete the sign-up process again for every computer associated with the deleted email address to reactivate The SuperPreview online service.

Activating SuperPreview Online Service

How to obtain SuperPreview Online Service

Firstly you must be a licensed user of either Expression Studio 4.0 Web Professional or Expression Studio 4.0 Ultimate a trial version won't do. SuperPreview online service Beta is available via Expression Web however its a beta service and not a feature of Expression Web.

For additional information on the SuperPreview online service Beta, including the latest service terms, fees and conditions, please see the end user license agreement (EULA).

Open SuperPreview in one of the following ways;

File - Display in SuperPreview
Click the SuperPreview Icon from the Standard Formatting Toolbar
Use the keyboard shortcut of Shift + F12

If your page is not saved you will be asked to save it, if you don't wish to see this reminder again you will need to tick the radio box for 'Automatically save page before previewing'.

Save Changes Dialog Message.Fig 4 - Save Changes

SuperPreview will open and if you have not made any previous browser selections you will be asked to do so. You can sign up for the SuperPreview Online Service from the Icon or from the Remote Browsers Sign up link in the panes.(see Fig 5)

Select a browser. Fig 5 - Select a Browser Sign up link

Click either of these and the SuperPreview Online Sign up Dialog box will appear (see Fig 6)

View Screen Shot  - Fig 6 -  SuperPreview Online Sign up Dialog box

Press the sign up button on the bottom right
Next you will be asked to enter your e-mail address and click Next. An e-mail will then be sent to the address you entered and you should then follow the instructions in the e-mail to validate your e-mail address. Till this is done the SuperPreview online service will not be enabled on your computer.(see Fig 7

Enter your email address and validate it

View Screen Shot  - Fig 7- SuperPreview Online Sign up, enter e-mail address

After you have entered your e-mail address SuperPreview proceeds to submit it. (see Fig 8)

View Screen Shot  - Fig 8 - SuperPreview Online Sign up, submitting e-mail address

The next dialog box lets you know that the service has not yet been activated, however an e-mail has been sent to your email address for you to follow the instructions to validate your e-mail address. If you cannot find it remember to check your Junk e-mail box. Once that is done you can then click Activate to enable the online service. (see Fig 9)

View Screen Shot  - Fig 9  - Online Service Activation

Once you have clicked the link in the e-mail to validate your e-mail address, you will be sent to a page in the browser which confirms this. (see Fig 10)

View Screen Shot  - Fig 10 - Confirmation page of your e-mail address

Activate your Online Service

Now that you have validated your address, you may click the Activate button on the Online Service Activation dialog box. (see Fig 9)

The service will submit your activation and once activated with show you a dialog box that says your Online Service is enabled. (see Fig 11)

View Screen Shot  - Fig 11 - Online Service enabled

As the Online Service Enabled dialog says, the service has now been enabled on your computer. In the Browser Selector screen you can now select from the remote browsers currently available. These will be periodically downloaded and updated in the background. Press the Exit button and begin your selections from the local or remote browsers.

Select a Browser local or remote. Fig 12 - Select a browser local or remote

As you can see I have an older version of Firefox installed and I don't have IE9 installed locally. I do have installed locally Opera and Safari for windows 5.0.5 (at the time of writing this tutorial), these are not available via either locally or remote in SuperPreview.

With the remote service at this time we now have available the browsers IE9, IE 8 FireFox 3, FireFox 4, Safari 4 (Mac), Safari 5 (Mac) and Chrome 10. Internet Explorer 9 is also now supported as a local browser for both SuperPreview and the Expression Web Snapshot feature, and Internet Explorer 8 is now built into these preview tools. If you have Internet Explorer 9 installed, you can view page renderings in Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, and Internet Explorer 9.

View Screen Shot  - Fig 13 - Preview in Browser list

Now with SP1 Expression Web finds these installs automatically (including Chrome, Safari and Opera) and offers them as 'Preview in browser' (See Fig 13) via the File menu with the different resolution sizes, which you can add to if you so wish. The default sizes are 800x600 - 1024x768 - 1280x1024.

Unsupported browser versions

On my beta machine I have Firefox 4.01 installed, however this is not supported locally (at the time of writing this tutorial) and so SuperPreview will tell you about unsupported versions and updates.

View Screen Shot  - Fig 14 - Online Service enabled

Click the Icon (See Fig 14) which sends you to the Microsoft KB article called Information about the SuperPreview feature in Expression Web 4.0 here it lists the local browsers SuperPreview will support. This article will keep you up to date about supported browsers.

Error reporting

Sometimes errors can occur, to offset this you can check the status of the Online Service, by pressing the Check Status button. (see Fig 15)

View Screen Shot  - Fig 15- Check Status

Which will then show you the status of the online browsers (See Fig 16)

View Screen Shot  - Fig 16 - SuperPreview Online Service Status

If all appears okay just click the 'Refresh the browser' button, sometimes you just have to click it a few times. If its still not working then wait a while and try again. It may say there is a problem, even if when you visit the site in the browser all appears ok.

NOTE: You can also check the Service Status from the Options Icon

Sometimes SP will tell you "A browser requires purchase check for options", however once it begins to look for a browser this will go away. The first time I saw this I thought that even though I had activated Expression Web somehow SuperPreview had not been activated and it had run out of the trial period. This is not so, its just a little glitch that is seen sometimes.

Page Interaction Mode

Page Interaction Mode means you get exactly that, you can interact with the live site and click the menu links in the site to navigate to the page you want, then simply preview in SuperPreview. What's more you can also now with SP1, preview web content that requires user authentication.

Page Interaction Mode Icon.Fig 17 - Page Interaction Mode Icon. Use the Interactive Mode Icon or press the shortcut keyboard combo of ALT + I, this will open the Page Interaction Mode Panel.

Insert your Remote URL

View Screen Shot  - Fig 18 - Page Interaction Mode

You can navigate to the page you want, or use the back and forwards arrow buttons on the top left. Then login into your cookie-based website.

Secure Websites that require authentication credentials

Page Interaction mode is designed to work only for sites that use cookie-based authentication. What it does is set the necessary cookie so that requests made via SuperPreview will send the authentication cookie and allow you to preview protected pages.

NOTE: Page Interaction mode will not work with Basic authentication such as logins that require a pop-up dialog box.

If your content requires that you login. I.E. A Word Press blog, you simply follow the instructions above and login via the Page Interaction Mode Panel.

NOTE: Your logon credentials will persist for the duration of your SuperPreview session.

Use alternate authentication

On the bottom left is a checkbox that says 'Use alternate authentication' what this does is cause SuperPreview to use the exact HTML that is in the interactive window to render any other browser you choose rather than attempt to authenticate using cookies. I.E. It doesn't actually do authentication at all.

NOTE: It should be used only if logging in via Page Interaction Mode does not work correctly for a specific site.

Then press the Preview button on the bottom right of the 'Page Interaction Mode' Pane, to view the page within SuperPreview.

SuperPreview Updates

SuperPreview Updates Fig 19 - SuperPreview Updates

When there are new browsers available from the SuperPreview Online Service, SuperPreview will update and let you know the new browser and version that is available.

SuperPreview Online Service in Expression Web 4 SP 1 - Written 3rd August 2011 by

Tina Clarke Signature.
Cheshire Web Designs - Cheshire website Designs by Any Expression Web Designs
Owner Any Expression Web Designs and Clarke Abstract Art

Copyright © 2006 - 2011 Tina Clarke of Any Expression Web Designs All Rights Reserved

Are you looking for a Web Designer?
Web Designs created by Any Expression Web Designs