Printed from www.pcpro.co.uk
Posted on January 25th, 2010 by Tom Arah
Browser Testing: Microsoft SuperPreview versus Adobe BrowserLab
It’s not quite the nightmare that it used to be, but testing that your beautifully-crafted web design works across all browser versions on all operating systems is still a major pain largely because most browsers don’t let you run multiple versions on the same machine – IE6 alongside IE8 say – and also because most designers are limited to testing those browsers available on their own choice of platform.
Now both Microsoft and Adobe have finally addressed this core problem and come up with their own solutions…
Microsoft seriously hyped its SuperPreview utility when it launched Expression Web 3, largely because it was about the only new feature of note that stood out compared to Dreamweaver CS4. Certainly being able to view a given page onscreen as rendered by different browsers (either side by side or as an overlay) is very handy as it lets you quickly spot any differences and potential problems.
However, as Mark Newton points out in his recent real world column, first impressions flatter to deceive. Most obviously, SuperPreview is currently limited to rendering those browsers you have already installed on your system (with IE6 thrown in for good measure) so you are inherently limited to Windows versions and, with the exception of IE, you still can’t compare versions of the same browser.
Having said this, Dreamweaver users might well want to download the free cut-down version of SuperPreview for Internet Explorer that lets you see what your page looks like under IE6 as well as your current version. As IE6’s appalling CSS handling is by far the most likely cause of serious layout problems, I see this as Microsoft’s way of saying sorry to the web design community at large.
Alternatively, you can sign up to take advantage of the free preview of Adobe’s BrowserLab. Rather than running on your own system, BrowserLab runs in the cloud which has huge benefits – in particular it means that you get access to all major versions of all major browsers running on both Windows and Mac and you don’t need to install anything beyond your own preferred browser.
Adobe’s online approach isn’t new and, with no support for minor updates, Opera, or Linux, it isn’t as comprehensive as some existing web-based snapshot services. However the BrowserLab provides all that most users will require in a polished and efficient rich internet application and with Dreamweaver BrowserLab extensions to enable preview testing. It certainly exposes SuperPreview’s local approach as fundamentally flawed.
The big downside is that BrowserLab is only free in its current preview incarnation with Adobe planning to roll it into a paid service with in-context editing in 2011. Hopefully Google is watching – a free universal browser-testing solution would help improve web standards all round and be a small thank you for all the free content that designers supply.
Tags: adobe, browser testing, browserlab, digital design, Microsoft, superpreview
Posted in: Random, Real World Computing
Follow any responses to this entry through the RSS 2.0 feed.
You can skip to the end and leave a response. Pinging is currently not allowed.
12 Responses to “ Browser Testing: Microsoft SuperPreview versus Adobe BrowserLab ”
Leave a Reply
Authors
- Barry Collins
- Chris Brennan
- Christine Horton
- Darien Graham-Smith
- Dave Stevenson
- Davey Winder
- David Bayon
- David Fearon
- Ewen Rankin
- Ian Devlin
- Jon Honeyball
- Jonathan Bray
- Kevin Partner
- Mike Jennings
- Nicole Kobie
- Sasha Muller
- Steve Cassidy
- Stewart Mitchell
- Stuart Turton
- Tim Danton
- Tom Arah
Categories
- About the bloggers
- Android App of the Week
- cloud computing
- Green
- Hardware
- How To
- iPhone App of the Week
- Just in
- Microsoft Office 2010
- Newsdesk
- Online business
- Random
- Rant
- Real World Computing
- Software
- View from the Labs
- Windows 7
- Windows 8
Archives
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
advertisement
January 26th, 2010 at 7:26 am
Can’t we just sneak into large corporates in the evening and hack their WSUS servers, so that it rolls out IE8 in the morning?
That would solve the problem for most of us!
We still have a few machines here with IE6 – I’m pushing IE8 out as there is no reason not to – and after over a decade of using tabbed browsing and having an average of 20 or 30 tabs open, I really can’t see how people can use IE6…
January 26th, 2010 at 12:36 pm
Hi David. It’s true IE6 is the major problem as its woeful CSS handling means that designs might fall to pieces, but it’s interesting to see just how different each browser implementation is – an argument for RIAs rather than browser rendering if you want precise design control.
January 26th, 2010 at 2:28 pm
I know. I worked for an agency and they only had Safari for Windows. In the end I brought my personal Mac into the office to demonstrate to them that it looked different…
But for a majority of pages these days, you can get away with doing a “standards” page and an IE6 page and it will look okay in most browsers.
I did an inventory tracking system last year for my former employer. It used CSS menus and worked properly in every browser, except IE6.
As it was originally for internal use and they used Firefox or Safari, it wasn’t a problem – it worked flawlessly on both. As I was about to leave, they changed the goalposts and it had to let customers log in to see where their products were in the photo studio and several of them were still on IE6. Luckily that wasn’t my problem!
Another big problem is the difference in the DOM models in JavaScript! Firefox does a reasonable job and carries on, most of the time – it seems to go “oh, IE JScript? I’ll see what I can do.”
IE and Safari just throw their toys out of the pram and stop the page dead in its tracks…
January 26th, 2010 at 7:21 pm
Why doesn’t your website display properly in Firefox 3.6?
January 26th, 2010 at 9:31 pm
The pricing I saw on in-context editing from Adobe seemed fairly reasonable as I remember. I don’t know if you should be all that afraid of it going pay if you are a working design shop.
January 27th, 2010 at 9:24 am
I have used SuperPreview and as mentioned above it only works with Microsoft Browsers.
I haven’t used Adobe’s Browser Labs but it looks like it will only take snapshots of the web pages in different browsers.
As noted by David Wright above, we need to be able to interactively use the web site to ensure Javascript works as expected.
I use an excellent free service called Browser Sandbox (http://www.spoon.net/browsers/) which allows one to launch a virtual machine and run any of the following browsers:-
- IE 6, 7 & 8
- FF 2, 3 & 3.5
- Opera 9 & 10
- Safari 3 & 4
- Chrome 2
While it does not allow side by side views or overlays, it lets you quickly and easily view how your web pages look and work under each supported browser albeit one at a time.
January 27th, 2010 at 10:22 am
Thanks very much for the Spoon.net Browser sandbox link Kimani, looks ideal for live testing. Can’t quite believe that it’s free.
February 1st, 2010 at 6:55 am
Hi there,
A small correction – SuperPreview supports browsers other than Internet Explorer. If you have Firefox 3.0 or 3.5 installed, it’ll be available in SuperPreview as a browser for comparison. In addition to that, SuperPreview includes a copy of the Internet Explorer 6 rendering engine. So, if you have Firefox installed, SuperPreview should show IE6, Firefox, and the version of IE that is installed on your system.
Also, unlike most preview services, SuperPreview also offers more than just a simple screenshot for comparison. SuperPreview allows you to interactively browse, select, highlight, and measure the DOM of every browser that you have selected to compare your page in.
We’ll have news coming up this year regarding support for more browsers.
Justin Harrison
Program Manager – Expression Web
February 1st, 2010 at 11:12 am
Hi Justin and thanks for responding.
Just to clarify: the free version of SuperPreview is limited to IE and the version that comes with Expression Web extends the concept to Firefox 3.0 or 3.5 under Windows (ie not very much)
Good news that you’re going to extend support further – will this include remote browser testing? According to your team blogs (and a screenshot including Safari) this was a feature in the original beta version and it’s the only seriously scalable solution.
February 1st, 2010 at 2:23 pm
Why not just use browsershots.org ? It tests just about every option of OS + browser out there.
February 1st, 2010 at 5:17 pm
Hi Tom –
Yes, please accept my apologies for any confusion here. The free version of SuperPreview is “SuperPreview for Internet Explorer”. It only supports IE. The version of SuperPreview included with Expression Web supports Firefox.
As far as remote browser testing goes – when we announced SuperPreview at the Microsoft MIX conference last March, we demonstrated support for a cloud-based service that you could use to preview pages on other platforms and other browsers (like Mac Safari).
We are committed to providing this experience for our customers and we’ll have some news about this in the not so distant future
September 2nd, 2010 at 8:46 am
Whilst screenshot services like Browserlab and Browsershots are fine, to test a website in each browser fully you need to use the actual web browser and move between pages, as has already been noted in the comments.
Services that allow full browser testing such as Spoon.net and CrossBrowserTesting.com are ultimately going to allow you to pick up more bugs than the screenshot services.
Adobe Browserlab is easy to use to get quick snapshots of what a page looks like in each main browser.
There is a list of browser checking tools here, which may be of interest:
http://www.testing-web-sites.co.uk/testing-tools/browser-checking-tools/