Designing Websites - What Browser to Code For?

flyingember asks: "I code up PHP/CSS webpages and recently wondered about who to code for. We know that each browser supports CSS a little bit differently than the others, likening back to the Netscape/Internet Explorer HTML wars. Opera or Mozilla hacks are seen constantly across the net. Looking through two years worth of saved webalizer statistics, 95% of my visits came from IE and the rest from Mozilla, these are the teeming masses of the internet. Even the traffic to my site two years ago resulting from this article sent 50% IE users on Windows XP, and the total was 95% from IE. The numbers have only grown more IE 6-dominant since then. Given the overwhelming Internet Explorer user base, unless your webpage is specifically targeting The *nix or Mac crowd why code for anything except IE 6?" While each browser does support CSS, and even some HTML a bit differently, what functionality seem to be universal across all of the major modern players? Can you design a sharp looking website with such features, without resorting to browser-specific code? If so, how?

Comments

Safari

[Michael.Forman]

I used to code for Mozilla due to its strong adherence to standards and support for transparency in PNGs. However, now that I've added an Apple G5 to my collection of Linux machines, I find myself developing my website content exclusively for Safari. As long as it works perfectly in Safari, I'm satisfied.

The sole reason is that Safari's output is immaculate. The output (specifically the fonts) is so perfectly rendered that the HTML almost looks like it is typeset in LaTeX. Thus, to answer your question, I recommend Safari over other browsers for the same reason I recommend LaTeX over word processors. It's one step up.

Michael.

mezzoblue has good advice

[GeorgeH]

From mezzoblue's css crib sheet: Build and test your CSS in the most advanced browser available before testing in others, not after. If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won't have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.

The fact of the matter is that you will need to do browser workarounds, even if you only design for IE. The IE 5 box model is wrong and there are a lot of people using that browser. So just get the standard right and then go back and compensate for broken browsers.

And yes, I know that I'm not stnading on very solid ground with the way SongBuddy looks in IE. I'm more interested in getting the features going than in supporting a browser I haven't used in quite some time.

Misleading statistics.

[Bazzargh]

Just to repeat what everyone else says first: its very important to design to standards. Its the only way to be sure that things will continue to work.

But a second point: many browser statistics are misleading. As well as it being easier for non-IE users to block webbugs and fake user-agent strings, sites that are designed for IE only suck in other browsers, and arent 'sticky' for non IE users. Non IE users will be consistently under-reported on many sites as a consequence.

So, if there are 10% of users using non-IE, and you are only getting half of them, should you care? Well, yes. Non-IE users are more likely to be technically savvy - they've got as far as changing their browser!.. and are thus more likely to be educated, employed and able to pay for stuff (especially small shiny expensive stuff). So you lost 50% of one of the best market sectors, while keeping 100% of the deadbeats. Nice move.

Knowing your market sector is more important than knowing what your browser shares have been. E.g. we work in on sites which are largely browsed by architects, and guess what - they largely use Macs. But we didn't get them until we spent time making the site Mac friendly.

-Baz

Re:Mozilla has the tools to help create good pages

[tjgoodwin]

By the way, I do xhtml 1.1 strict, no tables.

Then either you're serving your pages with the wrong MIME type, or they can't be seen in IE at all.

You're not supposed to serve XHTML 1.1 as text/html: you should use application/xhtml+xml. See the W3C's XHTML Media Types. If you're labelling your XHTML 1.1 as text/html, then your browser isn't treating it as XML (note that Mozilla is using Quirks mode, for instance).

Snag is, Internet Exploder (to IE6SP1) doesn't know what to do with application/xhtml+xml, even though there's been a built-in XML parser since IE5, and application/xhtml+xml was defined in RFC 3236 over 2 years ago (and was presumably floating around the standards track for some months before that). But don't worry: just remember that Internet Explorer 6 SP1 gives you the freedom to experience the best of the Internet. At least, that's what it says on the box.

Assuming you're not prepared to be held hostage to the Great Beast, the best workaround at the moment seems to be to use Apache's content negotiation (MultiViews) to lie to IE (and anything else that doesn't know about application/xhtml+xml) that you're giving it text/html.

There's more on this here and here.

Re:Half right...

[Kethinov]

I've found that most people running 1280x1024 or higher almost never maximize any window whether they use windows, linux, or osx. On the flip side, people running 1024x768 or lower almost always maximize their current window because screen space is at a premium on those low-end resolutions. I never believed in this phenomina until it started happening to me. Every day at work I'm stuck with 1024x768 and I maximize my windows on both my Linux and Windows work computers. But at home, I never maximize anything because I run 1280x1024.