SuperPreview - Nice App, Shame about the Name

It might be the done thing for web developers in certain corners to routinely have a dig at Microsoft – certainly, they’ve given us enough ammo/cause in the past to make this easy (Songsmith, I’m particularly looking at you at the moment!) – but while many of these people will be having a moan about the release of IE8 for one reason or another, I’m finding myself overlooking that and instead getting excited about a different (but related) product: Expression Web SuperPreview.

Let’s start by saying this: what a truly awful product name! It just sounds so bad, which is a shame because the application is actually very good, or at least it appears to be based on my initial playing around.

SuperPreview Splash Screen

What does SuperPreview do?

SuperPreview is a standalone application that lets you preview (or just view?) what your web page/site/app will render as in IE6, IE8 or IE8 in IE7 compatibility mode. The intention is to do away with the multi-IE hacks that developers have had to use in the past to test page layouts by placing it all in one tool.

The application lets you view a given web page on different browsers in a number of different ways – single window, split pane view (horizontal and vertical split) or as onion skin overlays (imagine each screen like it were drawn on tracing paper, allowing you to see all levels at once and spot differences). As you click and drag to move around the page, the associated windows with the other browser views move accordingly; it’s very easy to spot any layout differences. Here it is in split pane view, showing an IE8 and IE8 (IE7 compatibility view) together:

SuperPreview split view

And here’s the overlay view, showing that some of the text is not quite vertically aligned (hence the fuzzy view):

SuperPreview onion skin view

I really like the way that this tool works, and it will really come into its own once other browser are thrown into the mix – ultimately, it will be possible to add in Firefox, Safari, Opera and others into SuperPreview (assuming that you have the browser installed on your system, of course).

What this tool will not do, however, is let you see how these different browsers cope with JavaScript/interaction (or at least that’s my understanding based on this early beta version); for that you would still need to test in the browser itself. I’m happy – very happy – to be proven wrong on this.

There is another downside to this tool that I should mention – the whopping 250mb download (I cannot understand why a one-trick pony application like this needs such a huge installer!) and the requirement for .Net 3.5 framework to be installed. It seemed to take a looooong time to install for me (I tried it on XP SP3 and on Vista), but it’s still beta so maybe some of this will be fixed. Also, I was installing on a virtual machine (running on Parallels on Mac with 4gb ram) which may have affected performance on that front.

So I’m really excited about the potential of this tool – more than I have been about any Microsoft product in a long time – but I want to openly plea to the people in the Expression team to do something: make this tool a free download!

Update: when I first wrote this post, I hadn’t seen anywhere to suggest this would be a free application and I assumed that it would be, like other Expression tools, be a paid-for app, but this is not true! It will be free for all. So you can skip the rest of this now - the reasons for asking are irrelevant now. Joy! Still, if they could get the download size down, that would be very much appreciated :)

Why SuperPreview should be free:

  1. Developers have had to work around the problems of multiple IE versions for long enough without help from Microsoft. Providing a tool that you can vouch for and support means a tool that people can place more trust in (and also know that they are not loading modified DLLs that may have all manner of nasties lurking in)
  2. IE’s different rendering problems have been the bane of standards-aware developers for too long – providing this for free goes some way to making reparations.
  3. Many people are already spending hours of their own time producing excellent tools to help make the web a better, more interoperable place, all of which are free. I’m thinking of the likes of Web Developer Toolbar, Firebug, IETester and many more. If these fine folks can do it for free, surely Microsoft can give this away for free too?
  4. Finally, it’s a marketing opportunity for the Expression Suite – a way of getting the brand in front of a lot of developers who may decide that they like the way the tool works, like the interface, look-and-feel and generally feel more inclined to try out some of the other Expression tools. That’s not to be sniffed at.

So, that’s what I’m hoping for – SuperPreview to be made even more super by making it completely free. Come on Expression team, you know it makes sense.

[Heading inspired by The Monks' "Nice legs, Shame About the Face". Now there's a blast from the past]

Filed under: Reviews, Tool, Tools
Posted by Ian on Monday, March 23, 2009

4 Comments

  1. So says Lori Dirks

    Okay, you got it! SuperPreview for Internet Explorer is - and will remain - FREE from Microsoft. :-)

    Read it in the last para of this article: http://bit.ly/oajoz

    Added March 23, 2009 at 5:12 pm

  2. So says Steve Guttman

    Thanks for the nice SuperPreview write-up. We’ve been really pleased by the response, and are in the process of adding a number of new features (like a DOM tree) that helps you identify page elements that are causing rendering problems.

    When we announced this product at Mix last week, we did say that a version of SuperPreview that supports all the flavors of IE will be free, and continue to be free and supported after the release of Expression Web 3. The version that ships with Expression Web (i.e. the paid-for version) will support additional browsers (like FF), and will provide deeper integration with Expression Web. So you’ll be able to, for example, integrate real-time selectable browser preview so that when you make code updates, you’ll be able to see the actual browser rendering update as well. This should make page design faster and more efficient.

    Hope that helps.
    Steve

    Added March 23, 2009 at 7:44 pm

  3. So says Ian

    Thanks Steve, that’s a good update. I see now that there are two versions of the one app - the IE only version that will be free and the SuperSuperPreview version (sorry, had to do that). I’d still love to see the enhanced version available as a standalone app for not mega bucks - I am sure that there will be many developers who are happy using their existing tools, be that DreamWeaver, Coda, VisualStudio, TextMate, HomeSite etc who won’t want (or be able to afford) the whole Expression suite but will want the full version of Preview for testing their work. Is that likely to happen?

    Added March 23, 2009 at 11:48 pm

  4. So says Matt Radel

    Nifty idea, but this is a very superficial way to look web development. As you eluded to above, this won’t give you the greatest idea about how a site actually works in a particular browser. Obviously there are many, many things that can go wrong in the behavioral realm, even with CSS (CSS driven dropdowns for example). It sounds like this is an addition to the browsershots toolkit rather than a replacement for Multi-IE (which is absolutely beautiful by the way).

    Added March 24, 2009 at 2:36 pm

Sorry, the comment form is closed at this time.