Do websites need to look exactly the same in every browser?

[Edvard]

Answer:
http://dowebsitesneedtolookexactlythesameineverybrowser.com/


I stumbled across that page purely by accident, but it made me think...

A very large amount of blood sweat and tears have been shed in the pursuit of this very goal.
The reasons are many and varied, but is it attainable, feasible, practial or even desirable?
What would be good reasons why not?
Post your thoughts...


P.S. That page looks the same in every browser I've tried.

[jgpaiva]

I'm not sure what's the intention of the site, but it does look different in Opera (has a shadow behind the text).

[f0dder]

Even if you didn't include any markup, the result would differ from browser to browser, I'm afraid.

I'm afraid we're not going to see pixel-perfect equality anytime soon, the combined html/xlm/css/blablabla conformance required is just too mindbogglingly complex. And since there isn't a "reference" browser (or even a reference renderer for pure html/xml/css without any scripting), it's hard to say what "correct" is, anyway.

As long as stuff is usable in the major browsers (IE6/FF2 and upwards (newer browsers for more complex AJAX/WEB2 stuff)) and doesn't look way off, I guess we should be satisfied.

[app103]

By every browser, that would include browsers on mobile devices, as well.

Since that page uses CSS, it would not look the same on my pocket pc, which has pIE 3.0 as its browser, and doesn't support CSS. 

The background would be white, the text much smaller and located in the upper left, and no image anywhere on the page.

Now would someone want a page to look exactly the same when viewed on the tiny screen of a mobile device? Probably not. As a matter of fact, the mobile version should have less graphics and a few more options than the regular version.

Some of my blogs, for example, when viewed in a mobile browser, presents a link at the top of the page to give the option of skipping the content and going to the sidebar, and the entire site is a single column, with the sidebar content at the bottom.

With more people using web enabled mobile devices than ever before, it is becoming more important to remember those visitors when designing your site.

A site should look similar enough in every browser to be recognizable as the same website though. Imagine coming here in IE and seeing a nice blue themed forum and a bird mascot, and in Firefox seeing green and a snail. Your first impression after seeing it in IE first would be "I think I am on the wrong site".

But I believe it is ok to have those slight subtle differences in appearance that so many web designers lose sleep over, as long as the basic look is similar enough to retain the identity of the site. Your visitors won't mind that the bottom border is missing on long pages when viewed in IE but not in Firefox, and your loved ones would appreciate the extra time to spend with you that you would have wasted on something so silly. (now, if the footer and its content is missing, that's another story)

[app103]

Oh, and the person that designed that page forgot something vital that leads to a really horrible effect when viewed by some people...not all browsers on all OS's support transparency in PNG, such as IE 6 on a 9x system. He should have used a .gif. 

[nite_monkey]

I stay away from png images because of how they don't work in ie 6. I try to use gif images instead

[app103]

png is fine, as long as it doesn't contain any transparent areas. IE6 has no problems displaying ones that are 100% opaque, and if you go for that option instead of .jpg, you can get a smaller file size with much better quality. And smaller file sizes make faster loading pages.

[fenixproductions]

Badly written example imho.

Personally I would use APNG for it:
- animation in PNG is supported in Opera 9.5, Firefox 3.0 and Safari (IIRC),
- transparency definitely not supported in IE <= 6.

I would use different "h1" styles:
- simple "h1" for older browsers (IE6),
- "html>body h1" for newer ones (IE7, Opera, Fx).

And at the end try to show "box model" problems

BTW Text shadow is supported in Opera 9.5 only. OK, being honest: I don't know about Safari too.

[app103]

Seriously, if I wanted it to look the same in every browser, I would pretend it was 1994, use very simple HTML, simple design, jpg/gif....and no animations, since pIE 3.0 doesn't support animated gif's beyond showing the first frame as a static image. 

[f0dder]

png is fine, as long as it doesn't contain any transparent areas. IE6 has no problems displaying ones that are 100% opaque, and if you go for that option instead of .jpg, you can get a smaller file size with much better quality. And smaller file sizes make faster loading pages.

PNG won't be smaller than JPEG for the image types JPEG is good at handling... GIF vs. PNG is another issue, imho there's usually not that big different between the two, but I prefer PNG.

It always annoys me when people end up using PNG for photos (unless they very specifically want lossless), or JPEG for screenshots... especially JPEG for screenshots is bad, filesize isn't that great, and the compression artifacts look ugly.

[fenixproductions]

2f0dder
For me 256 (GIF) and 24-bit (PNG) colours palette might be big difference. And also: GIF files presents transparency only (takes one colour from palette) while PNG gives variable opacity with whole alpha channel.

Little info:
http://www.w3.org/QA/Tips/png-gif

[f0dder]

For me 256 (GIF) and 24-bit (PNG) colours palette might be big difference. And also: GIF files presents transparency only (takes one colour from palette) while PNG gives variable opacity with whole alpha channel.

True, true - I was thinking in terms of "use on the web", though, since this thread is about browsers. For web use PNG alpha is troublesome, because older browsers don't support it properly. And PNG with more than 8bit colors take a lot of space, and (when talking photographs and the like) is usually better handled by JPEG.

[Edvard]

Good insights, all...

Especially notable the comments on mobile devices and older systems. I wonder if there is a tool to allow you to see how stuff looks on different platforms? I know there is a tool to see how your webpage looks at different resolutions, and even simulate loading through a dial-up connection, but is there a multi-platform simulation tool?

[f0dder]

I wonder if there is a tool to allow you to see how stuff looks on different platforms? I know there is a tool to see how your webpage looks at different resolutions, and even simulate loading through a dial-up connection, but is there a multi-platform simulation tool?

For IE, I'm afraid you need multiple vmware guests with different IE versions... unless somebody knows a reliable magic trick to have multiple IE cooperate on one windows install. A single tool that would render using multiple engines could be immensely helpful, but I doubt it exists - besides, rendering is only part of the story, you also need DOM/javascript testing >_<

[fenixproductions]

This site might come handy:
http://browsershots.org/

[f0dder]

This site might come handy:
http://browsershots.org/

That site might be interesting if you found some really nasty exploits for various browsers on various OS'es... :] (let's hope they sandbox, and sandbox properly).

[fenixproductions]

2f0dder
About multiple IEs:
http://tredosoft.com/Multiple_IE

It is working good enough to check your website look. Unfortunately: it cripples IE7 installation (no ActiveX, no add-ons) but it is the best solution for one virtual OS (here: WinXp in VirtualPC 2007) after all.

[app103]

This might be a good tool for some testing for backwards compatibility:

http://www.delorie.com/web/wpbcv.html

[Lashiec]

BTW Text shadow is supported in Opera 9.5 only. OK, being honest: I don't know about Safari too.

It also showed a shadowed text in Konqueror, so I guess Safari would do the same (sharing up to some extent the same engine, and all)