Microsoft's New Multiple-Browser Tester

Z80xxc! writes "Microsoft recently announced a new product called Expression Web SuperPreview, which lets developers view their web pages in any browser installed on their system, as well as in different versions of IE, all from the same interface. The product has one genuine innovation — a built-in tool for overlaying the rendering from one browser over another to compare (referred to as 'onion skins'). There are also HTML debugging aids and other helpful tools for web developers. A beta version is available for download. However, the current build only has support for IE — it will 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 released later this year. (It will not be available in the Expression Mac suite.)"

Comments

Browsershots

[Snowblindeye]

There is a free service that does the same thing: browsershots.org

Re:Browsershots

[larry bagina]

Queue estimate: 3 minutes to 1 hour, 12 minutes

It's only free if your time is worth nothing.

Re:Browsershots

[FooBarWidget]

Browsershots is not a serious alternative. Everything that you send to Browsershots will be placed into a giant queue so you'll have to wait about 30 minutes before you see the results.

Re:Browsershots

[RichardJenkins]

Overlay? Interactivity? Real time results?

Last time I checked browser shots didn't provide that for free.

This sounds like the first new MS product that's interested me in a while.

Re:Browsershots

[Xtravar]

Because obviously you have no other important work to do until it's finished.

Because you just design websites from your mom's basement for some spare cash on the side.

Anyway, browsershots is useful for browsers you don't have installed and want to *eventually* check. This product is for browsers you have installed and want to debug *now*.

Re:Browsershots

[ericlondaits]

I do web developing professionally and can say that a service with a 3 hour queue is only marginally useful. When your site has a rendering bug under some browser it takes quite a bit of trial and error while fiddling with CSS until you come up with a different way of expressing the same layout that is compatible across the board. IE6, particularly, has numerous rendering bugs that sometimes call for this "do the same, but differently" route and some bugs that require hacks to be put in place. While looking for the rendering bug you also need to find out what exactly is going on... for instance, IE6 will double an element's margin in some cases, but you need to find out which element first, which can be done with a bit more of fiddling with the CSS. ... So anything but an interactive solution is worthless in this cases. A service like browsershots is useful to check the state of a site, but once you find it has errors, you probably need something else.

I have a single VMWare VM with side-by-side installations of IE3 through 6, and IE7 in my main OS, along with Opera, Safari and Firefox.

Re:Browsershots

[wkurzius]

Do you also not mind waiting 45 minutes in between adding each ingredient?

Re:Browsershots

[ais523]

You can pay to jump the queue. Also, the 30 minute time is for if you want rendering on some really obscure browsers; the more easily available browsers, like Firefox and IE, generally render pretty quickly, and if you turn off all the obscure ones you'll get shorter queue times. Still, Browsershots is best for a final check that your page works in really obscure browsers, as opposed to other alternatives which you'd use during development.

Re:Browsershots

[dmsuperman]

Not only that, but if the issue requires you to scroll or click to show you the bug then you're SOL. Personally I run a VM for IE6, a VM for IE7 (only because I've found MultipleIE to not always accurately represent what the end user uses), and Firefox in one of the VMs. I have outrageous amounts of RAM to play with, though. At work we have a couple fairly decent windows machines running remote desktop that the lot of us remote desktop into to view the pages, for the 15 or so of us it works quite well.

Re:Browsershots

[ericlondaits]

Just minutes ago I had to fix a bug where IE7 will place misterious bullets on "ul" elements which had the bullets removed through CSS... but the bullets only appear in some of the pages, and dissapear when you scroll or force a redraw of the browser (i.e. by minimizing and maximizing).

Browsershots is also useless when checking JS code, animation, DHTML and AJAX... which amounts to a good percentage of what I do.

Re:Browsershots

[RichardJenkins]

Who said anything about free???

The guy I was replying to.

Re:Browsershots

[Hannes2000]

This sounds like the first new MS product that's interested me in a while.

What a coincidence, that one of Microsofts more interesting products' sole purpose is ironing out their own fail :-)

Re:Browsershots

[the_womble]

http://www.browsercam.com/ offers VNC access to a huge range of OS/browser/plugin combinations.

More expensive than running a few VM, but it does more.

It also strikes me that multiple installed browsers + transparent windows = onion skins, albeit with a clumsy UI.

Re:Browsershots

[FooBarWidget]

surely you are only going to submit your final work and not every single change that you make to your WIP

Actually, a web developer should and has to submit every single change. As a developer you'll want to catch cross-browser rendering differences early, instead of finding out after 2 months that the awesome design that you made works in Firefox and Opera (locally tested) but totally broken in IE with no way to fix it thanks to IE bugs.

Re:Browsershots

[marcello_dl]

and there's ie net renderer
http://ipinfo.info/netrenderer/
which is faster... until some idiot posts the link on slashdot :)

> The product has one genuine innovation â" a built-in tool for overlaying the rendering from one browser over another to compare (referred to as 'onion skins')

net renderer has had this 'genuine' innovation for quite a while.

Web standards

[nightglider28]

Tools like this, while helpful, should never have been necessary. If MS, owner of the dominant browser, wasn't among the poorest in W3C compatibility, stuff like this wouldn't be needed. Web pages should render the same in any browser, on any OS. The only difference should be in resolution.

Re:Web standards

[Bill, Shooter of Bul]

As long as there are different rendering engines, things will look differently. The biggest problem is that you cannot have multiple versions of Internet explorer installed on the same computer.

Re:Web standards

[BenoitRen]

Every rendering engine that isn't Trident renders most things the same way, as long as the code is valid.

Re:Web standards

[RichardJenkins]

Layout should be identical amongst media types. Rendering differences (think: fonts available, widgets, text-only workstations etc.) are possible with two different systems adhering perfectly to standards.

Try telling that to a non-technical designer though :(

Re:Web standards

[FishWithAHammer]

Oh, very much not true. Webkit (either Chrome or Safari, take your pick) and Gecko render things very differently. Especially in regard to fonts. Not even Chrome and Safari render fonts the same way.

There's also some weirdness related to boxes, but that should come as no surprise to anyone.

Re:Web standards

[Literaphile]

Try telling that to a client who demands that her website "just works on my screen". Yes, every web developer wishes that IE would just go away, but it's a moot point. As long as 'normal' users continue to use IE because it's all they know - most clients I've dealt with just call it 'the internet', they don't even know what a browser is - we just have to pander. That's life.

Re:Web standards

[shutdown -p now]

Web pages should render the same in any browser, on any OS. The only difference should be in resolution.

Not really. HTML/CSS is not designed for pixel-perfect rendering, so you cannot reasonably expect that - for example, things such as word and line breaks, and word wrapping in general, are up to the user agent. Then, of course, you cannot guarantee that the user will have a specific font family installed, and CSS generic families are called "generic" for a reason. And so on.

Re:Web standards

[moderatorrater]

The problem is that "most" isn't the target for high profile websites, they need to be as close to identical as possible. The assertion that cross browser testing only came about because of MS was just plain wrong. In fact, it could be argued that for a few years, cross browser testing wasn't necessary because of Microsoft since IE was the only browser with any significant market share.

Re:Web standards

[Anonymous Coward]

No they don't. Not relative to the differences between Trident and most other engines.

There may be some differences, but they're nothing when compared to IE's awful rendering engine. Just look at the broken box model, or the hasLayout flag for example.

For around the last five years my Web design job has always revolved around making things look right in standards compliant browsers, then hacking for IE. Look at the code of most sites these days and you'll see an IE-specific style sheet.

Re:Web standards

[pete-classic]

Web pages should render the same in any browser, on any OS.

Your heart is firmly in the right place, but you're conclusions are faulty.

No version of HTML as ever been intended to be a page description language. If you want things to look a certain way use PostScript, PDF, or another language that is intended to give a specific layout.

HTML is intended to allow you to describe your content so that an agent can display it in accordance with the viewer's preferences.

The fundamental problem, even bigger than IE's lousy compliance, is that graphic designers seem to be the largest producers of HTML. They fall in love with their "brochure" designs and then foist them on the rest of us. Consumers of web sites would almost universally be better served if content providers would just stick to straightforward HTML, and allow agents to present the content in a way that suits the users' preferences, devices, visual acuity, etc.

-Peter

Re:Web standards

[pizzach]

I have news for you: Ariel and Verdana are not always guaranteed to be available. People may even enlarge them or shrink them on your web page without your permission. Fonts are something you have to plan for when making web pages, though many nowadays don't. I HATE authors forcing font sizes smaller than I am comfortable with.

Re:Web standards

[AceofSpades19]

its called a virtual machine ;)

Re:Web standards

[Animaether]

That's no argument against the fact that presuming that, as per your example (which GP didn't give),
- Arial IS available
- The user IS NOT overriding the document style
- The window size etc. IS the same (or the website is presented in a fixed-width format to begin with)

things still do not render the same even between browsers that supposedly use the same engines.

I lay much of the blame with the W3C. All that fuzziness with "A browser MIGHT display this as:" and "a browser MAY ...". All that has no place in 'strict' documents. Either the browser renders it exactly the way as specced, or it doesn't follow the spec. Sounds simple enough, but apparently as long as you just do things 'close enough', you're standards-compliant.

Doesn't take away that IE is indeed, by far, the worst of the bunch (IE/FF/Opera/Safari/Chrome), but to dismiss the fact that there are differences between even the 'standards-compliant' engines/browsers as "well they're just minor differences" (as per your sibling poster) or "you probably just didn't design your site right" is a bit silly

Re:Web standards

[causality]

No they don't. Not relative to the differences between Trident and most other engines.

There may be some differences, but they're nothing when compared to IE's awful rendering engine. Just look at the broken box model, or the hasLayout flag for example.

For around the last five years my Web design job has always revolved around making things look right in standards compliant browsers, then hacking for IE. Look at the code of most sites these days and you'll see an IE-specific style sheet.

Imagine the sum total of the economic cost to Web designers worldwide, if such a figure could be accurately assessed. I wonder just how large this number would be? To me this sort of unnecessary and deliberate incompatibility is very much like spam; it's a business practice that causes others to bear its costs. If the total cost to Web designers everywhere could be known, I really would have no problem with fining Microsoft for that amount, accompanied by the legal use of government police power to seize assets if this is necessary to pay the fine.

If that sounds drastic, I say that the only thing more absurd is the idea that we should have to put up with this kind of shit and shouldn't use any means available to discourage it, within the bounds of the law of course. I really believe that the only reason why Microsoft gets away with half of the things that they do is because of the general public's ignorance and lack of technical understanding. If not for that then I would expect at least some type of backlash against it, much like what Sony experienced due to their rootkit DRM.

Re:Web standards

[slimjim8094]

No no no no no.

That thought is breaking the Web.

HTML is a markup language. It was NEVER designed to give a pixel-picture representation of content. EVER. That would break mobile browsing, not to mention different resolutions, and everything else.

What you're looking for is called PDF, and it works great. That makes the guarantees you want - every pixel is in its proper place.

Too many designers, used to working in pamphlets where they had complete control, moved to web design. They just aren't the same!!

Re:Web standards

[indiechild]

Even PDFs with vector-based images and layouts render slightly differently on different platforms and different PDF viewers. I could hardly believe it myself when I saw the results.

The only thing you can trust is a bitmap image.

Re:Web standards

[disambiguated]

You can't count on bitmaps either, because of Gamma Correction and similar issues. That's why I always directly stimulate my user's optic nerves. But even that isn't perfect.

Re:Web standards

[rdebath]

Pro Tip: Presentation matters as much as the content. In fact, presentation *is* part of the content.

Yup, spend too much time on the fluff and there's no content left for the meat.

As for Hutnick's site it's definitely a case in point. He's using (almost) plain HTML and what should have happened was that your browser would supply your favourite style sheet so that it doesn't look ugly and bland to you. That way the web is an information source and nobody needs to create the fluff.

Of course, then Microsoft declared the browser wars and everybody started bastardising HTML. Some people who understood the original hope got a committee together and started on CSS for the publishers who demanded complete control, however, it looks like most of them misunderstood the requirements so CSS has no reasonable layout engine (eg: a "stretchy grid") and even where it is workable it has weird and unintuitive hidden rules (inheritance and weights) that cannot be learnt by example (ie visually), a rather serious flaw in a language for visual presentation by primarily visual people!

Javascript, isn't too bad. (faint praise; Okay, okay it's actually a damn good language now) The original implementations were flaky but that's mostly gone. It's only real problem is the object model and yet again Microsoft are the main criminals here. Still the language is probably good enough to fix everything ... if noscript lets it.

Arrrg! CSS is CRAP! There I said it. The only way the inheritance and selectivity rules can be used is to minimise their effects and as for layout you basically have to pin everything to a static grid and pray your boxes and gaps are big enough. Sure there are a few simple layouts created by "CSS gurus" that with do the right almost every time, almost. But don't expect more than three stretchy columns or any sort of column wrap. As for doing something a little original like having the screen laid out with a fixed height and adding columns as the content increases ... yea, right!

Re:Web standards

[Blakey Rat]

For around the last five years my Web design job has always revolved around making things look right in standards compliant browsers, then hacking for IE. Look at the code of most sites these days and you'll see an IE-specific style sheet.

Smart people code in the browser most of their customers use, then adapt that code for the other browsers. It's a lot easier that way around.

I'm not one of those "worship at the alter of web standards" people for two reasons:

1) I'd *much* rather have browser makers add features that benefit the 99% of the population who are end-users of the web, rather than the 1% of the population that are web developers.

2) The standards seem to have developed specifically to always do the *opposite* of whatever Microsoft chose to do. No doubt out of pure geek-rage instead of actual rational consideration. Take the text version of the property "innerHTML"... Microsoft quite reasonably calls it "innerText". The standards say it should be called "textContent." Why "textContent?" There's no "htmlContent"! Oh... right, because if they had called it "innerHTML" then Microsoft would have been saved some work. I swear the standards are written by people who are simultaneously head-in-the-clouds academics ("who needs columns on a website? It doesn't matter that CSS is shit at making columns, you should use it and not tables") and at the same time petulant children ("let's do it the way that IE doesn't do it!")

IETester

[Anonymous Coward]

IETester ( http://www.my-debugbar.com/wiki/IETester/HomePage ) will let you test rendering in IE5.5, IE6, IE7 and IE8 on the same machine - you're not limited to whichever of IE7 and 8 is installed.

Age of the browser?

[benwaggoner]

Perhaps this is more an issue about Windows' dominance on managed corporate desktops.

IE6 is the version that gets most of the ire about compatibility. But the current version is IE8, which is quite standards compliant, and IE7 was much better in that regard than IE6.

Looking at the browser history timeline:

http://en.wikipedia.org/wiki/Timeline_of_web_browsers

IE6 came out October 2001, the same month as Netscape 6.2, and the better part of a year before Mozilla 1.0 was released. Would Netscape 6.2 offer that much a better browsing experience for today's internet? Does anyone still regularly test sites against either?

How much of this is because non-IE browsers aren't commonly used in the enterprise, and thus older versions of them don't wind up deployed nearly as long?

Re:Age of the browser?

[benwaggoner]

Exactly. The problem isn't that IE6 was a bad browser for its era. The problem is that lots of people haven't upgraded to a more recent version, which is typical of the corporate managed desktop market.

IE7's been on the market for, what 2.5 years now? How many people are still running 2.5 year old versions of Firefox or Safari on thier personal desktops? Not many. And that's not something about IE in particular, but of some markets where IE is dominant. I don't imagine many avid gamers on Windows are running IE6, as a counterexample.

Had Windows bundled Netscape instead of IE, it'd be Netscape we'd be griping about today. But the real issue is how slow corporate desktops are to get updated for ANYTHING not required for security or line-of-business.

Windows Media Player 9, which was released back in 2003, has only become standard in corporate America in the last year or so, and there are some holdouts even there.

Re:Age of the browser?

[amorsen]

Would Netscape 6.2 offer that much a better browsing experience for today's internet?

Probably not, because today's internet tests for IE6 and hand feeds it something it can handle. The same isn't done for Netscape 6.2. However, if you removed the hand feeding and fed Netscape 6.2 what you feed Firefox, it would do vastly better than IE6.

Also, Firefox 1 arrived less than a year after IE6, and its standard support is probably on par with IE7.

Correction: There is no Mac Expression Studio

[benwaggoner]

The OP mentions that this is not available for the Mac version of the Expression suite.

This is because that doesn't exist. The Expression Media product is cross-platform, as it is a new version of iView, a cross-platform product Microsoft purchased.

http://www.microsoft.com/expression/products/overview.aspx?key=media

The other products in Expression Studio began life as Windows-only products, and remain so.

That said, The Expression Professional Subscription does include a license for Parallels, so I suppose it's supported on Mac in that sense :).

http://www.microsoft.com/expression/products/ProfessionalSubscription.aspx

Re:Again with the names

[nightglider28]

Actually, GNU Image Manipulation Program is quite an apt name.

Ain't technology great?

[noidentity]

Isn't it great how modern technology can do things like this? Back in the old days, we had to make do with defining a standard and ensuring that everything displayed things according to it. But now, we don't need the stifling constraints of consistency; browsers can be creative in their interpretation, and every developer can use a tool like this to see the amount of expression browsers put into rendering. I foresee a future where this innovation will be carried to things like simple desk calculators, where 2+2 is no longer shackled to equal 4, where one will have a "multi-calculator" that gives a range of results. I can't wait!

Re:Ain't technology great?

[qw0ntum]

Every browser has quirks. Things render differently even between Firefox, Chrome, and Safari. As long as the rendering engine's source code is different and people are running the browser on different platforms, you're going to have differences in the way that pages are rendered, and that's just a fact of life. This tool makes it easier to spot differences in the way your code renders on different browsers. I'm not sure what your sarcasm is adding (dystopian future of calculators?) but given that differences will always exist between browsers this tool seems well-designed and helpful.

Let me rephrase

[tepples]

its called a virtual machine ;)

I knew that. Please let me rephrase my question:

You have one PC running Internet Explorer versions 4, 5, 6, 7, and 8 in virtual machines. What kind of PC hardware would one need to run these virtual machines at an acceptable speed, and how many licenses for Microsoft Windows operating systems loaded into these virtual machines would one need to purchase?

Re:Let me rephrase

[AceofSpades19]

http://tredosoft.com/Multiple_IE You would only need 1 windows xp vm, so you would probably only need 1 gig of ram for the virtual machine at most, which doesn't cost that much and 1 copy of windows xp which is only $150 at most I believe

Dreamweaver

[PktLoss]

Adobe did a demo of their next Dreamweaver release last fall at their Adobe Max conference. Similar feature there, except a bit better. Using a render farm your page is rendered in pretty much every browser, on each OS (rather than just what you have installed), including the "Onion Skin" feature shown in Expression Web. They even used the same name for the feature.

Re:Dreamweaver

[indi0144]

I have to admit I was tempted and looked for the Expresion Studio product page, once there, any demo obviously require Silverlight. since I'm on the Linux machine and Silverlight will not touch the windows machine EVER. I clicked on the install and prompt me to the Moonlight page. I have to admit again that I was waiting for the "zomg you're using Linux what the hell are you doing here? chu chu" but no. I'm confused == Microsoft delivered. Bah I did not install Moonligh.

I'm not a big fan of Dreamweaver, I do most of my coding on Notepad++ or TopStyle and go retro and use Adobe GoLive to manage batch changes in links and files. But if Dreamweaver delivers what MS promises I'd try it.

Do you know what version of DW will bring this functionality? I don't test my webpages on the same machine I develop them, I have and "old" machine: Athlon XP 512Ram 1024x768 on 15" crt with IE from 5 to 7 Mozilla 2 and Safari xx. Flash v5 and Java 4 If I remember correctly. The page should work on that, thats my acid test.

It's naive to test the website on a wooping quadcore with huge ram and rather good video card @ 1900x1200 21", I have to think in my local demographics and not everybody have that kind of machine, I have to do this also because I do a lot of Flash (clients ask it can be helped, also I like it) and it's honest if you develop thinking not just in the render engine but taking care in not raping the CPU on the visitor. That said I do very minimal and friendly promotional websites.

Sigh I always roam this articles and see all kind of weird arguments for the render engines and most of you do not even care to make a page that takes a visitor and lead it to the buy. Visitor is not looking for standard compliance or pixel perfect display, nor the visitor is going to fire 3 different browsers just to decide if it's ok to trust in that company. The visitor is looking for something: they want to find it asap in a clean and friendly format, easy to read meaningful texts, images, animations or demos; then they will want to get in touch with you to close the deal or to know more. My pages close more deals in relation to the amount of visitors than any other that I've know working in design shops in the past. Thats because I think of the future visitor like a potential buyer/subscriber/vendor and not like that lazy ignorant scum using IE6 that doubles my workload.

You forget that you're doing an actual piece of marketing and not a technical dissertation about web standards. Try to make a 50/50 with both of them and everyone will be happy.

Gee, thanks Microsoft

[nysus]

This is a lot like someone kneecapping you and then expecting you to be thankful when they offer you crutches.