Introducing SuperPreview
Navigating the workspace
Defining a baseline browser
Defining comparison browsers
Identifying and isolating layout differences
Integrating SuperPreview with Expression Web 3
Testing Web Pages with SuperPreview: Module 1
An Introduction to SuperPreview
Browser testing is traditionally a frustrating issue for web designers and developers alike. In most cases, developers design for one target browser and once they’re done, they start tweaking their design to make it compatible with other browsers.
Now there’s a new way of testing browser compatibility, and it’s called SuperPreview. In this module, you’ll get an introductory look at the basic features of SuperPreview and see how it’s revolutionizing the way developers test their web pages.
Introducing SuperPreview
SuperPreview is a tool which enables you to see how your web sites will look across different versions of different browsers, all on the same system. This is important because of the myriad browser choices available (e.g., Internet Explorer, Firefox and Safari) and the need to ensure that users of all these browsers see the same thing when they access your site.
Traditionally, web designers and developers have used separate computers to do their browser testing. This is necessary because, for example, Internet Explorer 6 and Internet Explorer 7 cannot be installed on the same machine. SuperPreview is designed to do away with this by serving as an all-in-one tool.
SuperPreview has a built-in rendering engine for different versions of the most popular browsers. It can be used as a standalone application or be integrated with Expression Web 3.
Let’s first take a look at using the standalone version of SuperPreview.
Opening an Expression Web Site
The first thing you’ll need to do is define the site you’ll be using. You’ll then open the page you’ll be using to compare across browsers.
Open Expression Web 3 and choose Site > Open Site. In the Open Site window, browse to the folder associated with this module: 01_SuperPreview_intro. Click Open, then click Open again in the Open Site dialog box. The files default.html, styles.css and the images folder appear in the Site View as well as the Folder List panel.