Browser testing is much harder than it should be, but a new Microsoft tool announced today at the MIX09 Web Developer Conference in Las Vegas could be the answer to many of our problems.
Microsoft Expression Web SuperPreview allows developers to compare how a page is rendered in different browsers at the same time. The tool is a similar concept to Adobe Meermeer (reviewed by Josh Catone in December 2008), but SuperPreview can be used as a standalone application and a free version is available.
The SuperPreview team visited customer sites and interviewed web developers to determine the feature set:
- Different browsers can be viewed and compared in vertical and horizontal layouts. Scrolling moves all the pages at the same time.
- The pages can be rendered at different browser sizes.
- A pixel ruler and full-page thumbnail helps page navigation.
- PhotoShop-like window guides can be positioned to check element alignment.
- Hovering or clicking highlights individual DOM elements and reports the ID, classes and dimensions.
However, the killer feature is overlay layout: it allows you to stack a partially transparent browser on top of a design mockup or any other browser. Rendering differences can be spotted in an instant.
Further screenshots (unreleased development build):
The full version of SuperPreview appears in the next release of Microsoft Expression Web and will support IE, Firefox, and Safari. The team is eager to work with other vendors so additional browsers may appear as the product evolves.
The snappily titled “Microsoft Expression Web SuperPreview for Windows Internet Explorer” is available for download from Microsoft.com now (250MB and requires .NET). This is a pre-release of the free product and allows you to test IE6 and IE7 (or IE8 if you have it installed). Several features are missing and the usual beta software warnings apply.
SuperPreview has not undergone usability testing until now. The team would appreciate bug reports and suggestions, so click the bug icon to send your feedback.
Have you installed SuperPreview? What are your impressions and will you find it useful?
Of course there’s no mac version.
March 19th, 2009 at 1:46 am
There is no Mac version, but running the latest versions of IE on a Mac is never going to be easy (not without booting into Windows or using a VM, anyway).
March 19th, 2009 at 1:52 am
@Craig – This is true, and I guess I should be a bit more constructive. I’ve gone to great lengths to get my IE testing set up working right, and it’s still not perfect. I use a cheapo compaq laptop running vista. I use MS Virtual PC to test IE6…
Could just run this app instead, eh?
March 19th, 2009 at 1:55 am
When will people give up on the idea of pixel perfection on the web, and realise that users consume it the way they want, rather than the way YOU want?
This release is also particularly ironic given Microsoft’s poor track record of support for established web standards.
March 19th, 2009 at 2:00 am
Interesting. I currently use IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage for the same thing.
March 19th, 2009 at 2:02 am
The current version of SuperPreview still has a few problems with IE6 (such as filters not working) but, in most cases, I suspect you could use it rather than a VM. It would certainly be faster.
March 19th, 2009 at 2:03 am
@Bradley Wright
I totally agree – there is no such thing as pixel perfection. HTML/CSS is not postscript; it only suggests how the layout should look. Browsers and user preferences can override anything you do.
However, SuperPreview is useful for spotting problems that may have normally gone unnoticed.
March 19th, 2009 at 2:19 am
@Bradley Wright Whilst you are quite right with the pixel perfect statement, I don’t feel that this product is really about that. You still need to check that your site displays ok in different browsers even if not identically. Anything that makes cross-browser testing easier should be welcomed.
March 19th, 2009 at 2:20 am
@docgnome
SuperPreview is a little different to IE Tester … I suspect I’ll use both.
March 19th, 2009 at 2:22 am
I think every Microsoft product contains some bugs so is case with SuperPreview. Lets see if UI people will like this.
March 19th, 2009 at 2:25 am
Just tried out SuperPreview on a Vista Ultimate machine (4GB RAM) with IE8RC1 installed. SuperPreview would not show IE8 or IE7 views due to some kind of memory error. The IE7 view is simply the IE8 compatibility view which you can get right in IE8. From previous testing, IE7 view in IE8 is not exactly the same as installed IE7, so it’s not really sufficient. The IE6 view appears static, so you can’t check javascript. I use Microsoft Virtual PC to test different browser versions. I’m not very impressed with SuperPreview. I don’t care if my pixels line up exactly in the different versions. What I care about is if the page basically displays correctly and functions correctly. As of now, SuperPreview doesn’t help me much.
March 19th, 2009 at 2:51 am
Any mention of Google Chrome?
March 19th, 2009 at 3:01 am
@Spigot
You can also check out IE Tester:
http://www.my-debugbar.com/wiki/IETester/HomePage
No Mac, but it runs on both Vista & XP. One stop testing for IE5.5, IE6, IE7, & IE8beta. Not perfect yet, but it’s free and still being developed.
March 19th, 2009 at 3:12 am
I am excited about it. Without being a big Microsoft fan, I can still give a hearty thanks for a tool that makes web dev a bit easier.
@Bradley Wright
While I can appreciate your sentiment, and even agree that some will consume our sites however they want (as you and many here arguably may), not everyone is using RSS, Twitter, &c. Many cannot figure out why clicking on
mailto:links opens up Outlook Express every time they want to write someone from a website. And whether or not they do, it behooves us to work—not at pixel perfection, but—at making the appearance of the standard web presence agreeable. I don’t care if I have a 600×800 display in Black and White version for IE6 users, and another full-color, textured site that uses rounded corner, alpha transparency, and shading for CSS3-supporting browsers. In the final analysis, some people are just going to reach out across the wire and hit our sites on port 80 with their default browser. I just like the fact that checking them without virtualization (or in my case, KVM) is within my grasp. This takes one more step out of my development process, and for that I am abundantly (though a smidge reluctantly) thankful to Microsoft for this offering.March 19th, 2009 at 3:32 am
Microsoft shouldn’t be criticized for helping. That face that they are is enough cause for hope and joy.
March 19th, 2009 at 3:36 am
Well they did mention Safari, and they both use webkit, not sure how similar they actually render but I think its pretty close.
March 19th, 2009 at 3:50 am
complete waste of time… its 250 megs and doesn’t do anything
March 19th, 2009 at 4:40 am
@lisaanne – Chrome did not exist when we started working on SuperPreview. Right now we are focused on making sure that we work great with Firefox and Safari. Since Safari is based on WebKit, we hope that this is enough until we have the time to investigate Chrome further.
@dmwalk – The memory error is one that we are tracking carefully. We need help diagnosing this issue – if you could contact me via e-mail (justin.harrison@microsoft.com) I’d love to help track down what is causing the problem for you.
March 19th, 2009 at 5:03 am
Sounds like a useful tool. I can’t wait to try it out. :)
March 19th, 2009 at 5:30 am
Also note they said they are eager to work with other vendors to add more, so I’d say if Google, Opera, etc. decided to make it know they’d like to work with them, they’d likely join in.
While Microsoft is still the bane of the web developer’s existence, it is nice to see they are trying to help. I think they finally have someone on their team that has realized that we hate them, and they do seem to be trying to fix this.
March 19th, 2009 at 9:54 am
I think this is a great tool. But, I’m wondering… Do you have to have all the browsers you want to test in installed on your machine, including multiple versions of each browser? If that’s the case, I’d rather use browsershots…
March 19th, 2009 at 10:55 am
@dmwalk
I haven’t experienced the problems you have, although I’ve got IE7 installed. Contact the team directly; they do appreciate feedback and are already investigating several issues I discovered.
The browser will/should run onload events but then stops. SuperPreview is more useful for checking layouts than functionality. None of the IE6 solutions are perfect in that respect; I’d recommend using a VM.
@torlowski
You do not need IE6, but you are likely to need all the others. Remember that the free version is IE-only anyway.
@lisaanne
Chrome is open source so, in theory, Microsoft could adopt it. Whether MS and Google would work well together is another matter!
I contacted the team specifically about Opera, which is not open source and is hardly MS’s biggest fan. The response was positive: they are concentrating on the most popular browsers first (IE, Firefox, Safari) but are eager to work with Opera if the opportunity arises. Let’s hope it happens.
March 19th, 2009 at 7:27 pm
Why? Why? GODDAMN why?
Why cant MS think about something before release it? We need to test IE6, IE7 and IE8 for our clients. Not only 7 or 8. Both are necessary…
March 19th, 2009 at 7:53 pm
I thought the whole point of a vm was because different versions of the same IE can’t coexist on the same machine. So now they can?
March 20th, 2009 at 3:28 am
@btimms i wrote a blog post on this topic last month. check it out if you like:
http://www.mikedesign.net/2009/02/14/testing-for-internet-explorer-especially-ie6/
March 20th, 2009 at 3:52 am
@btimms – Yes. SuperPreview uses the IE6 rendering engine. This took quite a bit of work to make run side by side on the system.
@Felix Nagel – We understand. If you watch the interview with Erik Saltwell he mentions that we found during customer research that IE6 presents the biggest challenge for web designers. This is why we chose to include IE6 with SuperPreview. We hope to have more to announce in the future as we hopefully make our cloud rendering service available. Thanks for your feedback!
March 20th, 2009 at 4:17 am
mauteri,
I used IE tester over a year ago and it did not render a true IE6 in some instances – used virtual pc since. I just downloaded IE tester and will give another shot.
My real question is that this article – and the streaming live demo from MIX09 imply that all browsers – including ie – to be tested need to be on the machine and I would like to know how to do that.
March 20th, 2009 at 4:19 am
SuperPreview? I mean, come on, can’t a big bad company come up with a better name?
March 20th, 2009 at 4:40 am
If you’d like to automate some of your cross browser rendering testing, you may be interested in joining the alpha of http://xbdiff.com
We’re going a step further than Super Preview, IETester and Browsershots by automating the comparison and verification of your pages.
March 20th, 2009 at 5:50 am
@n0other
I’m glad it wasn’t just me who thought that! I discussed it up with the SP product manager and suggested “PowerPreview”, but they are happy with the name. Perhaps it’s a grower!
March 20th, 2009 at 9:41 am
From a practical view it would be nice if it allowed for IE6, IE7, IE8 and IE8 (comp). It seems a little lame to discount a browser. Why not just bundle the browser rendering engine etc for IE7 in the product.
And Bundling it with Expression Web. That’s a pure marketing move to make people buy more software they don’t need. As a UX designer, I don’t really need Expression Web. But SuperPreview I would pay for if it was a stand alone product separate from Expression Web.
March 20th, 2009 at 11:15 am
You could also check out this article on how to make IE6, IE7 & IE8 run side by side on XP, without much hassle:
http://aarfing.dk/?p=120
March 20th, 2009 at 7:29 pm
@n0other:
I think the name works. Atleast you can roughly understand what it does unlike Adobe Meermeer.
samanime:
Microsoft makes my life so much easier with Silverlight with the Expression suite and ASP.NET with Visual Studio. I don’t think you speak for we when you say that you hate them. I think it’s just the php/open source/non microsoft community feeling scared they may be left behind on dead technologies.
March 20th, 2009 at 8:56 pm
How does this thing actually work? As one of the other commenters mentioned, getting multiple versions of IE to run on the same machine, never mind at the same time, is ‘quite difficult’
Does this mean that it provides some kind of ’simulated view’?
March 21st, 2009 at 12:45 am
omnicity,
It comes with the ie6 rendering engine embedded. So, if you have ie7 on your machine it can load ie6 and ie7 in a side by side or overlay view.
March 21st, 2009 at 2:30 am
i love this tool! big thanks.
March 21st, 2009 at 4:42 pm
I would give this a go if I thought it would help in any way. It is a good idea and hopefully xbdiff will be done soon as well as being free and not packaged with something I don’t want.
March 23rd, 2009 at 6:02 pm
You would imagine MS would spend more time fixing IE up for web standards rather than spending time writing more software designed primarily for milking people.
March 24th, 2009 at 2:27 am
My suggestion is that you keep an old computer or have one machine in your work place that runs IE6. You install IE7, Firefox, Chrome and Safari on your computer. And IGNORE IE8 at this moment. We have too many browsers to mess with already anyway.
March 26th, 2009 at 2:33 pm
SuperPreview looks great! Until every browser is included i’ll stick to this excellent service from Xenocode. It let’s you run every necessary browser directly from the web. Not a testing enivornment like SuperPreview, but it supports javascript and all!
March 26th, 2009 at 7:58 pm
Is it possible to check pages after an login is required?
March 26th, 2009 at 8:06 pm
Seems to be a lot of negative comments. Guys please remember this is a beta preview and is not feature complete or bug free.
From my expereince of using the product I am very excited. This is something I have wanted for a long time. This is going to make designing web sites much easier and I love the guides.
In the past I have had to result to taking screenshot of web pages and then overlay them in Fireworks over the mockups and other browser renders, now I can do it all in one programme! Thank you Microsoft!
March 26th, 2009 at 10:00 pm
Anyone knows how you can click a link or is this only available in the full version?
March 27th, 2009 at 12:05 am
I haven’t tried this tool, but I am basically suspicious of emulating browsers. My testing setup consists of a linux box and virtual machines: each with a complete install of Win XP and IE6 through 8. With 2 GB of RAM I can run all three in parallel (not Vista, though, need more RAM for that). As far as I can tell there’s no faking involved; they ARE the actual browsers, unaltered. Firefox an Opera are installed on one system in addition.
March 27th, 2009 at 7:17 pm
@Cameron:
If you have to overlay two renderings of the same page to be able to tell the difference between them, then in my opinion they are already close enough.
March 27th, 2009 at 7:35 pm
Look at the “Known Issues”. It’s just another moronism to our already cluttered poor web world from Billy. It would be more of a time waste. M$ messes badly, M$ tries to help somewhat, and now, it craps even in doing it.
March 29th, 2009 at 1:43 am