This is a very old article. It has been imported from older blogging software, and the formatting, images, etc may have been lost. Some links may be broken. Some of the information may no longer be correct. Opinions expressed in this article may no longer be held.
local wrote:
Now I wonder how important cross-browser coding actually is. How many browsers do I have to test, which versions?
I have two philosophies on this question.
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. Content
Start with the content. It may be cliche to say so nowadays, but content really is king.
2. Markup
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. Validation
Validate your HTML. If there are any errors, go back to Step 2. If there are no errors, send me £20.
4. Styling
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. Validation Again
Validate your CSS. If there are any errors, back to Step 4. If there aren't, send me £20.
6. Text Browsers
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. Scripting
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.
