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 
“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.
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.
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.
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).
60 Comments
Matt Sharpe
I like it!
Johns Beharry
This is awesome the overlay one is one of the most appealing to me.
Downloading now
Thanks
Daemonx
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.
Bryant
Well, this eliminates my need for BrowserShots.
Sharry
If this works this would be amazing! So tired of flicking between browsers.
Leo Davidson
Any idea how that works on a technical level, particularly with the non-IE browsers that don’t have nice APIs for embedding them in other Windows apps?
Long Zheng
@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.
Jamie Dyer
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!
JohnCz
I especially like the overlay mode.
Justin
Make sure you watch our demo at live.visitmix.com. We’ll be showing much more cool stuff!
Eric P
What a kludge.
If IE would just conform to web standards, they would eliminate the majority of the utility of such an app.
EP
Rob
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! =)
Leo Davidson
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.
Alex
WHAT??? No support Netscape Communicator?
Dave McFarland
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?
K-CI
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..!!
Kyle Peterson
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.
KS
I hate to be this guy, but doesn’t it look a lot like Adobe’s Meer Meer that they demoed at Max 2008?
http://ajaxian.com/archives/meer-meer
Eric P
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
Justin
@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.
Justin
@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.
Rafael
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.
Patrick
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.
Hazel Q.
Interesting article! I wonder how much will it cost to have it….
Chris Leeds
@Justin: Nice to see you on top of the questions.
tom
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.
dexbol
is it more useful than ietester?
anonymuos
Wake me up when they put classic ASP intellisense back in XWeb 3.
Tarwin
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!
Fahd
@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.
Oscar
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?
:-”
freaker
Why?
just use the real browsers withouth installing them
http://www.xenocode.com/browsers/
Gill Bates
“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.
Long Zheng
@Gill Bates: That’s definitely true, but most people still prefer native applications
Ie sux
tried to install on windows xp, after choosen the path where to install, does nothing…
n1 microsucks
Sue
Suggestion: Add a debugger.
Tarik
This looks very similar to the Meer Meer service that Adobe previewed at MAX last fall. Even the UI seems eerily familiar… Just saying.
Ivan
I like it, but it doesn’t allow me to navigate in to my password protected site areas.
pjc
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…
Nick Tulett
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.
Craig
Just installed it, started it and it said my trial period has expired. Wtf?!
mkk
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
sunil
In my blog I have questioned this software. Microsoft has replied on that. Please have a look. They have clarified things
http://www.myhtmlworld.com/web-development/expression-web-superpreview -for-internet-explorer-questions.html
Bill C.
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…
Steve R.
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?
Patoche
hello people!!
Did you see what Freaker said?
there’s a better and more versatile tool that’s available : http://www.xenocode.com/browsers/
you can start an instance of any browser you want to check your compatibility.
freaker
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.
Keegan Street
Looks like a handy tool. Thanks Long
Ryan
When I cross my eyes, I have two mouses.
Tim
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.
Bill C.
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.
someone
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.
SL Crazy Artist
Hi
nice app, but i want to know is this support flash, coz when i load a web page it doesnt load SWF files so is there a way to install flash player to this app.
Thnx
Vincent
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.
Vincent
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…
TOm
@Vincent : WHAT the heck are you talking about. English is not your mother tongue?
Vincent
@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!!
omer
How clever, Microsoft makes “Expression” to handle the terrible non-standard based broken browsers, namely all versions of their Internet Explorer.
Go MS… rofl
AlwaysRight
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!
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.
Scoop Juicy
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.
Leave a Reply
Ajaxian » SuperPreview: No need to fire up VMs for IE 6, 7, and 8 testing, oh and other browsers
[...] ‘09 has kicked in and “The Gu” just had someone show SuperPreview something that does what we saw with Meer [...]
Microsoft's SuperPreview: A Web site developer's new best friend? | All about Microsoft | ZDNet.com
[...] Zheng of istartedsomething has more details and screen shots of the new SuperPreview tool. function loadTips() { var load [...]
Expression Web SuperPreview : superb tool to solve browser compatibility problems | ProgrammerFish - Everything that's programmed!
[...] Some screenshots from a newer build of Expression SuperPreview (not available for download right now) gives glimpse of more features. Expression SuperPreview allows you to monitor and test rendering of your website on different web browsers in a single unified interface. (Screenshots Posted by Long Zeng on his blog) [...]
Expression Web SuperPreview : superb tool to solve browser compatibility problems | Tea Break
[...] Some screenshots from a newer build of Expression SuperPreview (not available for download right now) gives glimpse of more features. Expression SuperPreview allows you to monitor and test rendering of your website on different web browsers in a single unified interface. (Screenshots Posted by Long Zeng on his blog) [...]
Microsoft’s New Expression Web SuperPreview Makes Cross-browser Testing Painless | Illuminati Karate Blog | Raleigh, NC
[...] For more information, check out the original MSDN Post, and this fantastic writeup from istartedsomething.com. [...]
FlipsideReality » Blog Archive » Microsoft Superpreview is actually quite cool
[...] slow and useless to fix the problem. Needless to say, SuperPreview is the best of both worlds. (via istartedsomething) Category: www | Comment (RSS) [...]
Cuba Expression Web SuperPreview Sekarang | aMaNz
[...] SuperPreview Ketika Beraksi [via] [...]
Microsoft’s SuperPreview Allows Cross Browser Testing | PaulSpoerry.com
[...] If you are new here, you might want to subscribe to the RSS feed for updates on this topic.Via istartedsomething: Every web developer today faces the challenge of checking website compatibility across a large [...]
Cross-Browser testing…. « Andaime da Arquitetura
[...] http://www.istartedsomething.com/20090318/expression-web-superpreview- cross-browser-testing/#more-34... [...]
SuperPreview: No need to fire up VMs for IE 6, 7, and 8 testing, oh and other browsers - ScreWeb
[...] on Mar.19, 2009, under Ajax, web2 MIX ‘09 has kicked in and “The Gu” just had someone show SuperPreview something that does what we saw with Meer [...]
Screencast #2 - Creating the colour-fader - James Padolsey
[...] Microsoft recently released a new cross-browser “testing suite” for us web developers – “Expression Web ‘SuperPreview’ makes cross-browser testing like moist delicious cake“ [...]
Linkdump #10.5 | CTAPbIu_MABP's BLOG
[...] некий инструмент для верстальщиков под названием Expression Web SuperPreview, который якобы должен помочь верстальщикам всего мира [...]
Microsoft SuperPreview soll Browsertests revolutionieren | Ajaxschmiede.de
[...] präsentierte nun auf der in Las Vegas stattfindenden Messe MIX mit SuperPreview ein neuartiges Programm zur Web-Entwicklung aus dem MS Expression [...]
Microsoft’s SuperPreview: A Web site developer’s new best friend? « Just Like a Magic
[...] Long Zheng of “I Started Something” has more details and screen shots of the new SuperPreview tool. [...]
Cross browser testing and development will be easier with Microsoft Expression Web SuperPreview
[...] full and final version of this product will be bundled together with Expression Web 3. It will be available later this year and will run as a separate standalone application. Subscribe to our feed [...]
SuperPreview: No need to fire up VMs for IE 6, 7, and 8 testing, oh and other browsers | Guilda Blog
[...] ‘09 has kicked in and “The Gu” just had someone show SuperPreview something that does what we saw with Meer [...]
IE 8 | Internet Explorer 8 | display:inline
[...] yang bisa juga dicoba oleh para developer adalah Microsoft Expression Web SuperPreview, sebuah debugging tool stand alone untuk melakukan pengecekan tampilan di IE6 dan salah satu dari [...]
More links | Chris' Blog
[...] SuperPreview: Ein Tool für das Previewen von Webseiten in verschiedenen Browser, als Teil von Microsoft’s Expression Web [...]
Web Development : cross-browser comparability | Kenmore Design Blog
[...] The rumor has it that the information leaked from the developers themselves breaking the NDA. Official release will be announced on MIX09. [...]
BrianLang.ca » Blog Archive » links for 2009-03-21
[...] Expression Web SuperPreview makes cross-browser testing like moist delicious cake – istartedsomethin… (tags: webdesign tools browser testing) [...]
Microsoft’s SuperPreview « Urbanmofo
[...] out more in-depth reviews of the SuperPreview here, here and here. Tags: Firefox, Internet Explorer, Microsoft, [...]
Teste seu site « nerd
[...] o último é simples, mas lenta e inúteis para resolver o problema. Long Zheng nos mostrou SuperPreview é o melhor dos dois [...]
Superpreview : ตัวช่วยสำหรับนักสร้างเว็บ - Usably
[...] อ่านบทความต้นเรื่องได้ท ่ iStartedSomething [...]
Easy Cross-Browser Testing with SuperPreview | Business Marketing Experts
[...] whilst the latter is simple but slow and useless to fix the problem. Long Zheng has shown us SuperPreview is the best of both [...]
微软的Web SuperPreview强大啊 | 郁也风的Blog
[...] 英文介绍可看这里，下载地址可点这里。下载时需注 ，当前版本只是Preview，英文介绍里面的一些功能并 提供，反正我测试的时候就没发现Firefox以及Dom树。 个东东需要.Net3beta环境，其实下载的260多MB里面基本 有200MB是那个测试版的.Net包。 – EOF – Related Posts: [...]
SuperPreview: No need to fire up VMs for IE 6, 7, and 8 testing, oh and other browsers
[...] ‘09 has kicked in and “The Gu” just had someone show SuperPreview something that does what we saw with Meer [...]
IE 8 Joins the Browser MIX&Cloud Computing’s EPIC Problem at galattaindia.com
[...] the developer opportunity yesterday, when introducing new Expression 3 features, including Web SuperPreview, which provides a single console for testing Website compatibility across browsers. The new [...]
Expression Web SuperPreview makes cross-browser testing like moist delicious cake « Apt Tech Team
[...] http://www.istartedsomething.com/20090318/expression-web-superpreview- cross-browser-testing/ [...]
Easy Cross-Browser Testing with SuperPreview — Freshivore
[...] whilst the latter is simple but slow and useless to fix the problem. Long Zheng has shown us SuperPreview is the best of both [...]
Een inleiding naar het bouwen van een website « devkid
[...] ExpressionWeb [...]
Expression Web SuperPreview | Leandro Braçaroto
[...] informações aqui Veja também…Internet Explorer 8 liberadoVídeo Comparação entre IE 8 x Chrome x FirefoxWin 7 – [...]
Easy Cross-Browser Testing with SuperPreview | Programming Blog
[...] whilst the latter is simple but slow and useless to fix the problem. Long Zheng has shown us SuperPreview is the best of both [...]
Cross-browser soft. « Max Lim
[...] found one tool for cross-browser testing. You can see that. .gallery { margin: auto; } .gallery-item { float: left; margin-top: 10px; text-align: center; [...]
Microsof vai lançar novo Multiple-Browser para Tester » Baixe Share
[...] no IE6 com qualquer IE7 ou IE8, consoante o que for instalado. Um interno mostra construir Firefox e o Safari no Windows, também. O produto final será apresentado como parte do MS Expression Web Studio 3, quando é [...]
Microsoft’s New Multiple-Browser Tester » Baixe Share
[...] compare rendering in IE6 with either IE7 or IE8, whichever is installed. An internal build shows Firefox and Safari on Windows as well. The final product will appear as part of MS Expression Web Studio 3 when it is [...]
Mar-20-2009 web design links | w3feeds
[...] Expression Web SuperPreview makes cross-browser testing like moist delicious cake – istartedsomethin… [...]
sentinel: SuperPreview-то сцепи всички мивки! Ням.. - edno23.com
[...] инструмент просто! Как съм живял без него досега!? http://www.istartedsomething.com/20090318/exp…r-testing/ в Любими преди 23 секунди edno23.com Начало контакти [...]
Easy Cross-Browser « Marketing & Promotion
[...] whilst the latter is simple but slow and useless to fix the problem. Long Zheng has shown us SuperPreview is the best of both [...]
Better debugging of web sites with MS Expression Web SuperPreview | Baris Wanschers
[...] mentioned yesterday by Microsoft at their MIX09 Event and by Long Zheng of istartedsomething Microsoft released a new tool called "Expression Web SuperPreview for Windows Internet [...]
CSS einfach erklärt » Blog Archive » Microsoft Expression Web SuperPreview - Eine Einführung ins Webdesign anhand konkreter Beispiele
[...] Preview soll als eigenständige Anwendung mit der nächsten Expression Web Version ausgeliefert werden. Expression Web ist ein [...]
Checking Your Website Under Different Viewing Conditions « Catbird Analytics
[...] blog article announcing that Microsoft’s Expression Web (the replacement for FrontPage) has a feature called ‘SuperPreview’ that makes cross-browser testing [...]
Mix09: Expression Web SuperPreview 测试版 | HNU
[...] Expression Web SuperPreview makes cross-browser testing like moist delicious cake [...]