Expression Web SuperPreview makes cross-browser testing like moist delicious cake

Expression Web SuperPreview

Editorial note: If you’ve been following my tweets in the past 12 hours you’d have seen me hinting at something very cool for web developers coming out of Microsoft’s MIX09 event today. Well, it’s still at least 3 hours until MIX but it appears Microsoft’s own Expression Web team blog has let the dogs out early (their server is set to to New York time, not Las Vegas time), so consider the NDA broken :)

superpreviewforie“Expression Web SuperPreview”, the name is typical of Microsoft products, it’s technically self-explanatory but mind-numbingly bland and ridiculously long.

To make matters worse, the beta being released today – a subset of the full release coming with Expression Web 3 – is called “Expression Web SuperPreview for Windows Internet Explorer”. Granted the name is not that important for a developer tool, a kickass one at that.

Every web developer today faces the challenge of checking website compatibility across a large pool of browsers and browser versions in the marketplace. Up and until now, either you could install every browser, verify the website via a visual inspection and debug with tools specialized to that browser, or you could send a URL to a third-party screenshotting service like BrowserShots for an all-in-one visual inspection. The former is messy and tedious but gives you more control and an opportunity to diagnose problems, whilst the latter is simple but slow and useless to fix the problem. Needless to say, SuperPreview is the best of both worlds.

Note: The following screenshots come from a newer unreleased internal build of the application and does not reflect accurately what you can do in Expression Web SuperPreview today. Please don’t hurt me. I like kittens.

Expression Web SuperPreview

SuperPreview as a tool allows you to compare different rendering engines in a single unified interface. Simple clicks gives you comparisons between Internet Explorer 6, the native version of Internet Explorer installed, other browsers you may have installed locally – Firefox 3.5, Safari 3, Safari 4 – and even an bitmap images of website prototypes.

Pushing the envelopes a little, Microsoft is also building in support for remote rendering, such as those on different operating systems even. Details about this feature is not entirely clear at the moment, but I would expect this to be more advanced than just an image rendering.

Expression Web SuperPreview

On top of just a visual inspection, you have a standard set of modern HTML debugging tools like a DOM inspector, CSS inspector, element highlighting, pixel rulers and guides.

Expression Web SuperPreview

And perhaps what I think is the coolest feature, an overlay mode to compare exactly what’s different for pixel-perfect alignment. Or if you cross your eyes, the web in 3D.

Finally, how you can get your dirty web developer paws on this awesome tool, and it’s a little complicated to say the least. The beta of this software available right now is downloadable from Microsoft.com (250MB). The catch being it only supports renderings between IE6 and versions of IE installed on your computer already, but it should ease the pain of testing for IE6/7/8 compatibility for a lot of devs.

The full and final version of this product will be bundled together with Expression Web 3, sometime later this year and will run as a separate standalone application. Unfortunately for the many Mac web developers out there, because Expression Web is not an application part of the Expression Mac suite, SuperPreview will not be available.

You can watch this announcement and more from MIX09 from the livestream website starting at 9AM PST (Las Vegas time), and not EDT (New York time).

107 insightful thoughts

  1. Wow. Amazing long, but if microsoft really wants to keep the developers/designers on their side they’ll cater a much more powerful tools for us.

  2. @Leo Davidson: Good question. I don’t have any ideas regarding the technical aspects of that, but as you can see from the screenshots above, it obviously is working in the newest builds so they’ve done it somehow.

  3. Something like this has been needed for such a long time, it’s great to see Microsoft innovating in this area. My only hope is that it will be able to work with all major browsers across all major platforms, that would make it a killer app!

  4. What a kludge.

    If IE would just conform to web standards, they would eliminate the majority of the utility of such an app.

    EP

  5. Eric P – Different versions of different browsers, including but certainly not limited to IE, will have (and DO have!!) differing levels of support for “web standards”, so when you’ve quite finished prancing around on your “IE IS TEH SUX” High horse, see this product for the boon to web developers that it is! =)

  6. I disagree Eric P. There will always be browser bugs that need testing against. Firefox may be much better than IE6/7 but I’ve still run into several bugs in it that broke the layout of my page. Even if all the bugs in all the browsers were magically fixed, there are still parts of the standard which are ambiguous or undefined and can thus be implemented in different ways in each browser.

    We’ll always need to do some testing in different browsers to check everything looks okay. I agree that things should be better and the differences should be minimized to the point that it’s very rare to find a problem, but if that happened wouldn’t it make *even more sense* to have tools like this to quickly & easily compare pages in several browsers?

    If problems are unlikely then people won’t bother testing in multiple browsers at all unless it’s very easy to do so.

  7. What I don’t understand is that the blog from the Expression Web Team Blog says that you can view a page in IE 6 and EITHER IE 7 and IE 8 (depending on which you have installed). In other words you can preview in IE6 and IE 7 OR IE 6 and IE 8, but NOT IE6, 7 and 8? What good is that?

  8. This isn’t that nice….It takes a lot more time to open a website…It failes to display SWF Object in some cases .
    I can’t do nothing with the Inspector inside the tool.
    I think IETester is much better..!!

  9. Glad to see Microsoft is working on things like this and that they made it a separate app. It’ll be interesting to see if the final version allows each browser to function normally within it so it doesn’t cause issues like K-CI mentioned.

  10. Ok, I’ll concede a little. My first response was a due to a jerky knee problem I have.

    Jokes aside the reality is that IE renders *significantly* different (CSS is the real stand out here; JavaScript is a close second) than all the other popular rendering engines (Gecko, Webkit and Presto). It’s unfortunate, but a tool like this may have some potential to ease the pain.

    So what will this software cost?

    I’ll save my (“It’s not cross platform!” rant for another day.) ;)
    EP

  11. @Dave McFarland We actually include the IE6 rendering engine with SuperPreview. It took quite a bit of work just to make this function side by side with the system version of Internet Explorer. This is why you can preview in your system version of Internet Explorer, or in IE6. If you have IE8 installed, we’ll also let you view IE8 in Compatibility View, which is roughly 90% compatible with how IE7 renders. Look for more announcements about browsers (remote and local) as we near our final release this summer.

  12. @Eric P SuperPreview for Internet Explorer is free forever. We know that working with Internet Explorer could be easier and we wanted to help out. This is a tool to help making developing web sites easier – for all browsers. We’ll release a version of SuperPreview with Expression Web 3 that supports Firefox, Safari, and later other browsers on other platforms as well. Keep an eye on our Blog for the latest.

  13. Given this only works with Internet Explorer right now, and with IE8 release imminent, this really just sounds like a “Microsoft Internet Explorer Upgrade Compatibility Kit” with a fancy name. I’m not really impressed with this first release. I’ll wait until something more useful comes out. Until then, I’ll simply continue to use iexplore.exe.local.

  14. I hope this doesn’t start a 1999 style wave of trying to get the layout to be exactly the same on every browser. A total waste of time in my opinion, if we are not carful we’ll end up creating buttons and DHTML scrollbars so they “match” again.

  15. this is all nice but what would have been really innovative is a proper “debugger”. In other words not just a tool that shows you how your page looks in different browsers but a tool that tells you why it looks different.

    Admittedly I haven’t looked the beta yet… perhaps someone that has can shed some light on wether it can do that or not.

    Why I hear you ask? Well I seem to spend most time trying to figure out why things look different or don’t display at all in different browsers. Yes this tool would speed things up a bit but let’s face it… if you develop for IE and Firefox you pretty much cover 99% of the browser market… everything else is a nice to have but probably not worth spending money on.

  16. Awesome. But doesn’t it seem they’re trying to make you buy their product by making a crap product to begin with? If they hadn’t forced billions of people to use crappy IE, not encouraged them to update to the latest ones etc then we wouldn’t have to do this. It’s like punching someone in the face then selling them smack to sooth the pain!

  17. @Tarwin,
    - It’s not IE exclusive, and since all browsers tend to have different implementations of the W3C recommendations SuperPreview could come in very handy when developping web sites in general.

    @Hazel Q.
    - Justin just said it was going to be free …

    @tom,
    - I don’t know if it has Javascript debugging tools (and it should !) but it has HTML debugging tools.

  18. This is awesome! A Windows-Only browser-matcher that matches Windows versions of certain browsers! What a break-through!

    Let me be the first to call this a nice waste of time on Msft’s behalf. How about a decent IE emulator for non-windows systems so those of us not using Windows will have a shot at designing for this horrid browser piece of crapware?

    :-”

  19. “Unfortunately for the many Mac web developers out there, because Expression Web is not an application part of the Expression Mac suite, SuperPreview will not be available.”

    Not true, there are plenty of ways to run Windows on Mac, I use VM Ware daily to test sites in crappy IE.

  20. This looks very similar to the Meer Meer service that Adobe previewed at MAX last fall. Even the UI seems eerily familiar… Just saying.

  21. Any news on when there’ll be a public beta of EW 3?

    I’m an avid EW 2 user, and very interested in any new features…

  22. Man write code, Machine render code, Man look at screens, Man eventually work out why screens bad, Man change code.

    What about

    Man write code, Machine parse code, Man change code?

    i.e. static analysis – the rules for why things look different in different browsers should be well enough known by now that you can look for them in your source without bothering to render them visually as well.

  23. I didn’t understand that Microsoft doesn’t removes the errors from their browsers but they created a new tool to keep fixing the bugs on web developers side. :) Hilarious

  24. I just downloaded the March preview and I’m getting a message on startup that says the trial period is over.
    I didn’t think there was a trial period with free software, or that it could expire before you tried it…

  25. Same here with the trial period. Why is that using Microsoft product somehow always leads down a path to pure frustration? I can’t believe their programmers are incompetent but their products always end up being low quality. Is it bad morale or something?

  26. xenocode browsers are perfect. No extra software to run, with complicated installations. Just the browser files with the “xenocode” container or whatever it is. (you can even download the files if you use chrome for example) I have them on my desktop.

  27. This is so crappy. If I want to test my site in IE I need to login, navigate, process information. The web has moved beyond simple static pages. This tool hasn’t. It has very little point. Wake me up when there is a version of IE6 I can install alongside newer versions (IE8 has broken my multiple IEs). I’m tired of needing a whole VM for each microsoft browser version.

  28. Microsoft should drop IE6 imediately. Web Application developers have to write and re-write so much code just to support this ONE browser that it’s a waste of time, money, and resources. Want to know why we are in a resession? It’s IE6′s fault!

    In any case, while I think the concept of this type of tool is great, in practise is may not go very far. We’ve seen problems in IE6 that are resolved with one or 2 security fixes, that are not avaiable for a tool like this. While internet, citrix like, solutions may provide some releaf for those that can access their development environment from outside the corporate firewall, most cannot. I believe that VMWare will be providing solutions to this type of problem for many years to come.

    On the testing front remember that if you are testing a browser like firefox across multiple operating systems you need to watch out for font differences, and integration points like file uploads, data exports etc…
    Then there is the Offile like tool suite of choice, which varies from MS Windows, Apple MAC, and Unix environments.

  29. It’s not free after all. They’re now saying only SuperPreview for IE will be free, after all the standards mess they created with IE, SuperPreview for all browsers should be free.

  30. If you check the browser version server side than this tool is not usable for IE6, 7 and 8. If that would would be fairly stated in the specs, I wouldn’t have bothered downloading and installing all this rubbish from Microsoft. Don’t expect them to improve. They should stop making browsers.

  31. fair = fair…

    Unlike I said before, server side checks do work it seems, I saw it wrong. Now it seems to be the best tool for this work so far. Xenocode doesn’t work smoothly at all. Neither do virtual machines. Only alternative: at least 3 real machines with XP and no auto-updates!!

    It stays an unnecessary mess of course. On one hand IE gives us extra work, but it takes the fun part away. Customers do not always accept the explanations of the extra costs, so margins get narrow. However they still buy the windows crashes…

  32. @Tom…

    A) I use a CMS (TYPO3) that enables me to check the browser first and then send the appropriate stylesheet. That is really a nice feature.
    B) I first posted an issue that SuperPreview was not able to accept this detection mechanism (which is just HTTP-something based, but anyway). Consequence: screen “IE 8->7″ did not match my requirements for the tool: I could only check IE6 and 7 OR 8. Obviously, I need IE6, 7 AND 8.
    C) Then I looked better a day later, and discovered that it worked well. So I wanted to straighten that out.
    D) After that, I got off topic & carried away… saying that 3 computers with IE 6, 7 and 8 installed still is the best setting to do reliable tests. All the other browsers run next to each other on one machine, so SuperPreview is not necessary for those.
    E) My tongue is not English. You can’t have it all!!

  33. How clever, Microsoft makes “Expression” to handle the terrible non-standard based broken browsers, namely all versions of their Internet Explorer.

    Go MS… rofl

  34. I found a better way of testing websites.. just exclude noob shiite browsers.. that’s shitty IE out the way.. aaah testing sites has never been so easy! :P

    leave the web broken for IE users I say, also helps them in way.. as its gives them more ammo against fucking useless IT /corporations that nothing on the fucking web works… so sort it out.. instead of just leaving employees with shitty IE.

  35. I REALLY want to like this tool but it renders SO SLOWLY. I greatly prefer IETester, though it crashes frequently. I can restart after the crash and still see the pages before SuperPreview completes it’s first render! Until SP matures, I can’t recommend it to anybody.

  36. this is better than pixel perfect but user should be able to navigate to pages in the preview window
    it does not let us click any link/button etc…
    :-(

  37. I do consider all of the concepts you’ve offered in your post. They are really convincing and can definitely work. Still, the posts are very brief for starters. Could you please lengthen them a bit from subsequent time? Thanks for the post.

Leave a Reply