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

Ack! Work to standards, not browsers

[legLess]

Why code for anything other than IE6? Because you care about the future. From now until the end of time, users accessing your web site from standard desktop machines will be a smaller and smaller part of your audience. What if you make an IE-only design and want to retool later for PDAs? If you've done it the right way your life will be easier.

If you write to IE6 then your markup will be hosed as soon as Microsoft updates. They have a history of changing rendering even in minor updates, and IE7 will certainly be different. Want to retool your entire site when IE7 comes out? Do you really want to play whack-a-mole with Microsoft?

What if you do ever want to make a site that's aimed at Mac or *nix users? You'll be screwed since you only know how to write for IE. If you write to standards, you have a known good base knowledge.

Here's another reason: writing to the standards is easier. They're published, and several good validators exist. You'll need to do very little to get a standards-compliant site to do what you want in IE. Also, any in-depth CSS design help you're likely to find online is targeted to the standards, not how they're broken by $proprietary_corp.

In practice, here's my advice:

• Make your markup as clean and semantic as possible. Avoid all presentation (font tags and the like); put distinct sections in div tags with ids; use the markup the way it was designed.
• Do a first style pass in your browser of choice. I use Safari. It's not the most standards-compliant, but it's easy for me to use. Every browser has quirks, but that's the next step.
• Preview in Mozilla, Opera, IE, Safari and Konqueror. Most of these can be had for any platform. IE is hard on Mac, but I use Virtual PC. Safari is hard if you're on Windows, but you can use Konqeror, which is similar.

Ignore Netscape 4 entirely. It's a broken piece of shit, always has been, and getting something to look good in it is a total waste of time. By ignore it I mean import your styles:

@import "style.css";

If you're desperate, make a simple style sheet using no tricks or positioning and link that, then have your fancier imported style sheet override it.

Visit CSS Zen Garden for inspiration; ALA and the WASP for information.

Use the standards. It's better for you in the future, more flexible, better for your users, and just plain easier.

standards not browsers.

[nazh]

Code after the standards not browsers, try to make the code as semantic as and always use a proper doctype, i usually recommend a sctrict-dtd.

but when choosing a doctype, you choose you should choose one that triggers the standard compliance rendering mode in the diffrent browsers. see here for a list http://www.hut.fi/~hsivonen/doctype.html

Quirksmode.org is a nice place to check out which javascript and css properties that is supported in the diffrent browsers. this css overview has been very helpfull http://www.quirksmode.org/css/contents.html

Re:getting real

[sabNetwork]

You're obviously not a web designer. Flash is a poor substitute for displaying content and a great method for displaying animations. Here's why:

1.) You can't print Flash.
Printing is mucho mucho mucho important, especially in the corporate world. How is someone going to put your product information on file if they can't save your website?
2.) You can't (usually) copy text from Flash.
Quoting is as important on the web as it is with printed text, with one important exception: no one will bother quoting you unless you can copy your text. Web users are laaazy.
3.) Google can't see Flash.
You want to market your website, right? A large portion of your traffic is going to come from search engines. If search engines can't read anything but a bunch of META keywords and a title, then your page isn't going to be very high on the list.
4.) People can't link to subpages in Flash.
How often do you see someone linking you to NYtimes.com when they are pointing you to a specific story? Well, okay, except for slashdot :-). It's possible to do branch pages in Flash, but it's a waste of bandwidth and slow.
5.) People don't care about your Flash intros.
Most Flash pages are coupled with flashy animations that prelude the actual content. Who cares to sit and watch all this crap when you're looking for one specific piece of information? Even if you can skip the long intro, you still have to deal with the transitions.

The list could go on. Flash was never intended to be used for content sites, and is NOT a substitute for HTML/XHTML and CSS/JS.
--

Re:getting real

[jpkunst]

XHTML elitists such as Zeldman

Zeldman is certainly not a table-shunning XHTML-elitist. He is very pragmatic in that regard and, for now, recommends a 'transitional' technique with light use of tables for page layouts for cross-browser compatibility.

See his excellent book Designig with web standards.

JP