The first is the philosophy I apply when making my own website -- I stick
to the standards and let any browser that can't handle it be damned. If
99% of browsers don't work on it, that's fine by me. (OK, so I have added
a few little workarounds for IE6, but nothing major)

The second philosophy is similar and is what I use for other people's
websites. Again, write to standards, but make sure it works more or less
perfectly in:

        - IE 5+ (Windows)
        - Netscape 6+
        - Opera 7+
        - Konqueror

and make sure the content is readable and the site is navigatable in:

        - Netscape 4.x
        - IE 4 (Win)
        - IE 5 (Mac)
        - Opera 5+
        - Lynx

Now, the best way to do this, is to follow my smiple (sic) 7 point design
procedure:

1. Start with the content. It may be cliche to say so nowadays, but
content really is king.

2. Mark up the content with semantically appropriate HTML 4.01 Strict (or
use XHTML 1.0/1.1 if you like, although I tend to use HTML 4.01 in the
second philosophy). If something's a quote, use <blockquote>. If
something's not a quote, then don't use <blockquote>.

An important thing to remember in step 2 is heading structure. Each page
should have exactly one (no more, no less) <h1>...</h1> heading. Its
content should probably be similar to the contents of the
<title>...</title> element, though not neccessarily the same. Then
first-level subheadings should be <h2>. The next level of subheadings,
<h3>. You will rarely need to go on to <h4>, <h5> and <h6>. Give <h2>
elements IDs -- this is nice for linking.

At this point, you should not even be considering what your page looks
like!

3. Validate your HTML. If there are any errors, go back to Step 2. If
there are no errors, send me £20.

4. Now you can add CSS. It should work in the four target rendering
engines I mentioned above: Trident (Used in IE/Win and derivatives), Gecko
(used in Netscape 6+, Mozilla and related), Presto (used in Opera 7) and
KHTML (used in Konqueror and Safari).

Try to make as few changes to your HTML as possible. Adding classes is OK,
but it is usually better to take advantage of descendent selectors, etc
when you can.

I will not go into detail here, but this is arguably the hardest part,
especially as you will almost certainly need to add CSS hacks to get
things to work in IE5.

5. Validate your CSS. If there are any errors, back to Step 4. If there
aren't, send me £20.

6. Test your page in a non-CSS browser. Lynx is a good one. Or Netscape 2.
If it is unusable, then you probably haven't been paying attention to my
instructions. If it is usable, give yourself a pat on the back and send
me £20 -- you have created a hopefully pretty web page which is still
very usable in Lynx without really targetting Lynx.

7. Optionally, add a little JavaScript here and there, but certainly don't
rely on it. When at all possible, stick to the subset of JavaScript that
is ECMAScript and only use the W3C DOM (not proprietry extensions).

Oh, and by the way, you should have considered accessibility and
usability. These are not really steps as such, but design principles that
should be in the back of your mind the whole way through. For example, in
step 1, don't use long words when short words will do. In step 4, don't
use microfonts, etc.

Some of my favourite usability points:

* don't overwhelm the user with links. A navigation menu should have no
more than 7 links. Better still, stick to 5.

* away from the main navigation menu, but prominently, have a link to the
home page, a site map and, if there is one, a search engine.

* inline links are good.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132