SuperPreview: The Brave New World of Browser Testing

Author: Morten Rand-Hendriksen, Pink & Yellow Media (MVP)
Blog: http://www.designisphilosophy.com

Expression Newsletter, subscribe now to get yours.

“The design looks terrible!”

Let me tell you a story. About a month ago I sent one of my clients a link to a demo version of their new site design. Their response was less than stellar: “The design looks terrible! And nothing works!” I was puzzled because what I had sent to the client was pretty much an exact working version of mock-ups we had discussed at length and agreed upon weeks earlier. Thinking that my client had changed her mind or that something else had gone wrong on her end, I arranged for a meeting the very next day.

At the meeting I brought up the demo site on my laptop, and before I got a chance to get a word in edgewise my client exclaimed “Wow! You must have been working on this all night! This is much better” and leaned satisfied back in her chair. Problem was I had not touched the site at all in the last 24 hours. Then out of the corner of my eye I saw something I had not expected: Displayed on her 22’’ monitor hooked to a quad-core computing powerhouse was an installation of good old Windows XP with Internet Explorer 6 running. And with that all the pieces fit together. Turns out this high-tech company still runs XP and Internet Explorer 6 because a web-based application central to their business operation does not work properly in any other browser. And thus the new site I had built, heavy with JavaScript and modern CSS, turned into a dysfunctional mess every time it was visited from the head office.

Dinosaurs among us

In spite of the rapid advance of browser technologies over the last several years, the fact remains that millions of computers out there are still running Internet Explorer 6, a dinosaur of a browser that should have been long ago extinct. In fact, according to Net Applications, as of April 2009 Internet Explorer 6 still holds 17.52% of the market. Not bad for a piece of software you have to actively tell your computer not to update! In response to the surprising resilience of this browser, several campaigns have been started to phase it out, but so far they have had little success. Either due to necessity, aging hardware, custom applications that don’t play nice with newer browsers, or a fear of upgrading, we cannot expect this dinosaur to become an archaeological artefact in the foreseeable future. Instead, designers and developers have to adapt. And that means a lot of work.

Testing... testing... one, two three

To any seasoned designer or developer, cross-browser testing is a time-consuming and often infuriating necessity. For whatever reason, the people who build browsers have chosen to riddle their applications with bizarre idiosyncrasies that manifest themselves as misalignments, broken frameworks, positioning issues, bloated borders etc. etc. The list goes on and on ad nauseum. As the browsers have evolved, they have also started converging to a point where they are now closing in on the same station, at least where CSS and JavaScript is concerned. Same station—but still separate tracks, that is. But even if the modern browsers were connected in a nice clean line, it would make little difference, because the computers of the world are still littered with outdated software that wreaks havoc on standards-based code. And the only way to find out what works and what doesn’t, in new browsers as well as old ones, is to do extensive testing.

When it comes to browser testing, designers and developers can roughly be placed in one of three groups: Those that don’t do it or only test for modern browsers, those who test through virtualization software or have multiple computers with different operating systems running at once, and those who use web-based services to generate screen grabs from different browsers. For the two latter ones, the big hurdle is always Internet Explorer 6 (which is also the reason why the first group does not test for it at all). Why? Because you can’t be a serious designer or developer and be running Internet Explorer 6 as your main browser. And unless you know how to set up virtual machines or you have an old PC lying around that you can run old software on, the only two options available to you to test your site designs against the browser are to use browser emulation software like IETester or to use an online resource that generates screen grabs for you.

But that’s just half the battle: To truly compare browser output, you have to make screen grabs from each browser and then superimpose or onion-skin them in Photoshop or some other image editing application. And even then all you’ll know is that certain elements are shifting between the browsers – hardly enough to make a diagnosis or even provide a solid starting point for debugging.

It is high time a better solution was offered. Enter Expression Web SuperPreview.

One tester to rule them all

About a year ago I got an email from 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 top-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 me width—after the signing of numerous Non-Disclosure Agreements—was a set 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 page in numerous different browsers simultaneously 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.

In April 2009, a year later, the beta version of Expression Web SuperPreview was made available to the public, and with that, browser testing against Internet Explorer 6 became a one-click process. But that’s not all! Previewing local and online pages in SuperPreview, you also got new features like DOM highlighting and onion skinning right out of the box—features that make it much easier to both identify and diagnose problems and incompatibilities across multiple browsers simultaneously.

As of this writing, Expression Web SuperPreview for Internet Explorer 6 is available in Beta as a free download for anyone interested in trying it. The application is not finished, but close enough that it can be used as a reliable platform for testing across Internet Explorer 6, 7 and 8. And when it comes to Internet Explorer 6, it’s not some customized screenshot generator or emulator we are talking about: SuperPreview comes with a complete version of IE6 built in, meaning that the output you get from SuperPreview in IE6 mode is exactly the same output you would get if you were running the page in IE6 itself! In short, right now you can get a fully working version of IE6 complete with DOM highlighting and onion skinning to test your sites. For free. Without having to run any virtualization software. Which should be a huge relief for designers and developers fighting to make their sites 100% cross-browser compatible.

IE6 is just the beginning...

Like I said, SuperPreview is currently available in Beta. But that doesn’t mean it will expire and then you’ll have to pay to keep using it. When the full release comes out later this summer, SuperPreview for Internet Explorer 6 will remain a free download available for anyone to use as a tester against Internet Explorer versions 6, 7 and 8. But that’s just the tip of the iceberg: As the name suggests, a full version of Expression Web SuperPreview will come packaged as a stand-alone unit as well as an in-application module with the release of Expression Web 3. And unlike the free version, as the screen grab above shows, the full-featured SuperPreview will let you test your sites against other browsers running your computer and even remote browsers running on other computers—think of a networked Mac running Safari and you get the idea! Since these features are still in development it is hard to say for certain what browsers will be supported at final release, but Firefox has been confirmed for sure and Safari on remote computers has been confirmed, which I take to mean Safari for Windows (and probably other WebKit-based browsers) should work as well. No word yet on Opera, and judging from a conversation I had with the development team back in the fall of 2008, I wouldn’t get my hopes up for Google Chrome support. Even so, getting instant in-application testing against three IE versions, Firefox, Safari for Windows and Safari running on a remote Mac is huge; no—dare I say it—revolutionary. And I didn’t even mention the ability to import screen grabs and design files to overlay the original designs on actual browser output.

Show me the money!

Enough chatter, right? How does this thing differ from any other browser preview solution or service out there? The answer lies in Display Modes and DOM highlighting.

Display Modes

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 based on how most designers work—deigning for one baseline browser first and then testing to see how the same site looks when running in 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 decide which one.

In addition to Vertical Split Layout, you can also view and compare different browsers in Horizontal Split, Overlay or Single View. For true snapshot comparisons, Overlay Layout, seen below, is unparalleled. Onion skinning shows you exactly how elements shift around between browsers and gives you a reality check when it comes to browser rendering. For one, I think a lot of people will be surprised to see how even 100% standards based and IE-friendly code displays 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 my blog—this in spite of a comprehensive CSS reset and proper font sizing being applied.

DOM highlighting

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 where an element is located (if it’s improperly positioned in one of the views) and shows the slightest shifts between the two browsers. The highlighting 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 turned on as in the figure above, the selected element is highlighted and the rest of the page is masked out. To be honest, it’s the same function as in Standard view; but in some cases the highlighted view makes it easier to see exactly what is going on.

In the Beta release the visual cues are all you get. But as the figure below shows, andl as a demo done by the Expression Web team at MIX09 showed, the final release of SuperPreview will also provide DOM trees, much like the ones generated by the popular code debugger FireBug, to provide further 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.

Go forth and test!

There is something strangely cathartic about the release of SuperPreview; as if Microsoft after years of denial has finally admitted to itself that Internet Explorer 6 really is the stick in the wheels of designers and developers worldwide. And with its release, IE6 bashing, which is ripe to become a competitive sport, loses some of its lustre: It’s hard to wag your finger at them when they readily admit IE6 is a thorn in your side and they are offering a pair of tweezers to get it out.

The currently available Beta release is not the complete package. But it’s close to what the free version of SuperPreview will be once it is released. This means that even if you never plan to buy or use Expression Web, you can still get a true testing environment for your sites, at least where Internet Explorer version 6, 7 and 8 are concerned. Because let’s face facts: Even though there is a movement stirring to get rid of IE6 for good, it won’t disappear in the foreseeable future; and until that happens, we are stuck with having to either accommodate it or deliberately ignore it. And even if IE6 were to suddenly disappear, you still have to test your sites against the multitude of browsers out there. To that end, the Expression Web team has built an application that makes cross-browser testing a snap—an application that will save you time and make this annoying but vital part of your design and development process a lot easier. Don’t get me wrong—it is not the perfect solution, not by a long shot, but it goes way beyond what else is out there, and I’m not blowing smoke when I say I believe it to be revolutionary. But hey, don’t listen to me. Try it for yourself. After all, it’s free!

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. Also, like Expression Web itself, SuperPreview only works under Windows, so to use it on a Mac you’ll need to run some form of virtual machine or use BootCamp.

Morten Rand-Hendriksen is a Microsoft MVP and the Creative Director of Pink & Yellow Media. He is the author of Sams Teach Yourself Microsoft Expression Web 2 and 3 in 24 Hours and blogs about Microsoft Expression Web and web design in general at http://www.designisphilosophy.com.