Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips

About a year ago I got an email from my friend Anna Ullrich from the Microsoft Expression team. She wanted to know if I’d be interested in providing some feedback on a new, exciting and super secret application they were developing for the next release of Expression Web. Being obsessively curious I couldn’t turn that offer down and a few weeks later Anna and Boris Feldman drove up from Redmond to meet me at the Microsoft office in downtown Vancouver.

What they presented to me – after the signing of numerous Non-Disclosure Agreements – was a pile of sketches of a future browser preview application with the working title “SuperPreview”. The premise was simple: During the authoring of a website the developer or designer can test the current output and get feedback in the form of warnings, graphic overlays and onion skinning showing how the page will appear and change depending on what browser is being used.

Now browser previews is not a new idea by any means – there are tons of free and paid online services that do the job and most if not all web design applications offer multi-browser previews – but all the existing services operate on a browser-by-browser basis. What was novel about SuperPreview was the idea of viewing all the browser outputs simultaneously and on top of each other so you can really see what the difference is.

As a designer/developer cross browser testing is a daily routine that often leads to my computer getting some multi-lingual verbal abuse. Because even with perfect, standards based and properly validating code there is no guarantee the site you design will look the same across all browsers and all platforms. What makes cross-browser testing truly tedious is that for every page you have to open multiple browsers and look a them individually. And if you want to find minute positional shifts or other differences you often have to flip back and forth between browsers or use screen grabs or worse (I sometimes use whiteboard marker on my screen!). Any application that simplifies this process would be a huge help.

So for two hours Anna and Boris listened to my rambling feedback and lofty suggestions and at the end we parted ways, they with a pile of notes, me with a deep and profound desire to build a time machine so I wouldn’t have to wait for the damn thing to be developed.

And today, finally, the wait is over. In conjunction with the MIX09 conference in Las Vegas Microsoft Expression Web SuperPreview is now available for download in public beta.

Caveats

The current beta release of Expression Web SuperPreview is for Internet Explorer only, and there is a known bug in the beta that prevents you from testing against IE6 if you are using Windows 7 as your operating system (which I am). I’ve been assured by the development team that upon final release in conjunction with Expression Web 3 there will be true cross browser support for at least FireFox and Safari. Still waiting for word on Opera. I asked about Google Chrome on a visit to Redmond last summer and got the response that due to the strange (my word) way Chrome functions (the browser is almost entirely JavaScript based) it is hard to test for and will not be supported. Which is too bad because in spite of Chrome being atrocious when it comes to page rendering – so much so at times it begs comparison with IE6 – I see it becoming a popular browser simply because it is being pushed by Google.

Also, the SuperPreview Beta is more of a teaser than an actual full fledged application. The Beta offers the basic display and onion skinning functions but nothing in terms of scripting assistance and all the other bells and whistles which will be in the final release. Therefore the beta is, at this point, merely a tool to tell you if things don’t look the same across different IE versions. The reasons why you have to figure out on your own.

Installation

Expression Web SuperPreview public beta can be downloaded for free directly from Microsoft. It installs as a stand-alone application and will continue to do so in its final release this summer. I think initially the plan was to make it part of Expression Web 3 but having it as a stand-alone application makes more sense in my mind because as I see it I’ll be using it mostly to test live sites on the web and it would be cumbersome to have to go through Expression Web to get to this function.

Some bad news for Mac users: Expression Web only runs under Windows and this also applies to SuperPreview. Well, bad news might be an overstatement. Expression Web (and by extrapolation SuperPreview) runs just fine under virtual emulators such as VMWare and Mac users can always install Windows through BootCamp or directly onto their fancy boxes. But you have to give up your beloved OS to do so. Small price to pay in my view.

SuperPreview installed with no problems in less than 30 seconds under both Windows 7 and Vista Home Premium on my Vaio laptop but kept on freezing on the start page when installed on my Vista Home Professional desktop. Based on the behaviour I am extrapolating it is some form of resource conflict that is causing the stall but it’s hard to tell. More to come on that one.

In its present configuration (testing only for 3 versions of Internet Explorer) it doesn’t really pull much in terms of resources though I can imagine this will change when you start piling on browser emulators. TBD.

So how does it work?

On startup you are presented with a split view where you can select what browser configuration to use. The screen grab above shows the beta release restricted to only the currently installed Internet Explorer versions while the one below shows the future release in which you can choose from more than just Internet Explorer browsers.

In the default Vertical Split Layout (seen above) the baseline browser is displayed on the left and the testing browser is displayed on the right. This is mean to reflect how designers work – deigning for one baseline browser first and then testing to see how the same site looks when put into other browsers. Multiple browsers can be selected for comparison but only one is displayed at a time on the right. The buttons on the bottom of the window decides which one.

Display modes

In addition to Vertical Split Layout you can also view and compare different browsers in Horizontal Split, Overlay or Single View. Of the four I think Overlay Layout is the one that will be used the most. Being able to place multiple browser views on top of each other and onion skinning them shows you exactly how distorted your layouts get as they appear in different browsers and gives you an often surprising reality check when it comes to browser idiosyncrasies. I have to admit I was surprised at how even 100% standards based and IE-friendly code displays slightly differently between IE7 and IE8, especially where font size and line height is concerned. The grab below shows the font size discrepancies between IE8 and IE8 in Compatibility Mode as they appear on this blog – this in spite of a comprehensive CSS reset and proper font sizing being applied.

DOM highlighting

But the different display modes is only the tip of the iceberg. SuperPreview also provides two different kinds of DOM (Document Object Model) highlighting – Standard and Difference.

When set to one of the split views with Standard selected SuperPreview will draw a red outline around whatever element you hover the mouse over and mirror this element position in the other window. This provides an element-by-element indication of not only where an element is located (if it’s improperly positioned in one of the views) but also shows even slight shifts between the two browsers. What’s cool about this feature is that it works both ways – so if you hover over an element in the right view, you see the shift in the left view and vice versa.

With Difference Mode is on, the selected element is highlighted and the rest of the page is darkened. The actual process behind this effect is the same as in Standard view but in some cases the highlighted view makes it easier to see exactly what is going on and like the name suggests it highlights any shifts or aberrations much better.

In the Beta release the visual cues is all you get. And this is what I mean by the Beta being a “teaser”. As the grab below suggests, the final release of SuperPreview will also provide code information about the elements being selected with the DOM highlighting making it easier to troubleshoot code that doesn’t work the way it’s supposed to.

Practical usage

Like I’ve said way too many times, this Beta release is not the complete package. But it’s close to what the free version of SuperPreview will be once the full package is released: namely an Internet Explorer compatibility tester. And even in its stunted form you can still get some good use out of it. One of the many challenges web designers face is the ability to effectively test their sites against IE6. There is a huge movement stirring to get rid of this dinosaur of a browser but until that happens we are stuck with having to either accommodate it or deliberately ignore it. The challenge is that unless you run some form of virtualization software or use an application like IETester it is very hard to test sites against IE6 because only one version of IE can be installed on your computer at one time.

Well, that problem is pretty much gone with the introduction of SuperPreview. Right out of the box the application lets you test pages against IE6 and see just how mangled they get when the browser digs its claws in. As an example, DesignIsPhilosophy looks horrendous in IE6 and SuperPreview makes that abundantly clear:

When Anna and Boris sketched this project out for me a year ago one of my concerns was that the output of SuperPreview wouldn’t be accurate but some form of emulation or approximation of the true output of a real browser. But based on my quick tests since yesterday it looks to me that the output is true. Case in point: The StopLivingInThePast.com site features a WordPress plugin that adds an IE6 warning asking the visitor to upgrade her browser. The plugin uses both JavaScript and CSS to identify the browser and inserts a big box off the top if the visitor is using IE6. As a testament to the good programming at the base of SuperPreview, the warning shows up in IE6 view as it is supposed to which means JavaScript and CSS is rendered properly from the ground up.

Conclusions

I won’t pretend to understand how SuperPreview works and it’s hard to judge an application in terms of usability and impact when you are working with a beta version that doesn’t have all the features included. But even so SuperPreview offers true cross-browser testing on a level never before achieved and it has the potential to become one of those “must-have” tools in the toolbox of web designers and developers. I’ll wait impatiently for the full release so I can do some true cross-browser comparisons.