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

[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

[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 :-)

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

[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

[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.

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.

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.

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.

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.