Designing Web Pages in the Year 2003

 
This is an original article © 2002 Ulrich Iserloh. All Rights Reserved. No reproduction in any format, print or electronic, without written permission by author. Fair use is encouraged; piracy is not.
Posted March 2003 | See also companion article.

Overview

After coming across a recent article by Jennifer Kyrnin about Declaring DOCTYPES and Why You Should Avoid Tables (for Layout)?, I started to wonder what has changed over the last two years, at least when it comes to coding websites from scratch.

Many of today’s web designers bring a strong design background to the table, but know just enough HTML to get the job done. Often, they design new sites based on HTML code that they used for earlier projects. And that’s just fine. But if you’re new to the game of designing web sites, you might as well start with the most current HTML language.

Or are they compelling reasons for not writing the most advanced code?

In the following essay, I want to share what I have found out during my travels on the internet and in many discussions with friends from the IT world. My discourse is written in plain language, but I will reference applicable sources for the gory details (should you desire them). And to give you a brief outline, here are a few hotlinks to topics covered below:

 

Introductory Reading

What better start into the topic than to read the story of a guy that transitioned his existing website from table-based layout to a entirely CSS-styled site? Jeffrey Zeldman has done exactly this two years ago. What you will take away from this reading is that CSS is just as spottily implemented as everything else in HTML. All the hacks learned for tables will be replaced by hacks for CSS-styled sites. At least that’s what it seems like, if you trust the extensive list of bugs compiled by RichInStyle.com’s CSS support table.

 

What’s the advantage of coding XHTML1.0 compliant?

One of the most compelling arguments in favor of XHTML is the speed of delivery. Study after study has informed us that the faster a page loads, the more likely it is to hold the visitor’s attention. We’ve known this for years. Jakob Nielsen, one of the Web’s best-known usability experts, wrote on the topic in detail in 1997. His conclusions are still valid today because despite the increase in high-bandwidth access, our attention spans are as short as they ever were. Web pages that conform with the XHTML Recommendation display faster because the browser has no guesswork to do. It simply parses the document according to the rules of XHTML and finds no place where the author’s intent is unclear. These few seconds can mean the difference between gaining a new customer and losing that visitor to a quick click of the Back button.

From my research on the topic, XHTML1.0 is backward compatible, so it is recognized by old (Netscape 4.x) and new browsers (IE 5.x, IE 6.x and NN 7.x). The backward compatibility is important if your audience includes people that still use Netscape 4.x browsers (more later on why people still use Netscape 4.x browsers). Another advantage with XHTML1.0 is that you can specify your own tags.

For further reading: Wired News has put together a top-ten reason list (Oct 26, 2002). Ann Navarro at CNET wrote on “XHTML: Past, present, and future”.

 

Should you code using CSS2 and XHTML1.0?

While I stated that XHTML1.0 is backward compatible, CSS2 was not appropriately implemented for Netscape 4.x or Internet Explorer 4.x. By now, all IE 4.x users have moved on to better browsers, for example IE 5.x and 6.x. These browsers are almost fully CSS2 compliant. The problem is with those people still stuck with Netscape 4.x.

“Why are they still using NN4.x?” you ask. Reason one: Netscape delivered such shitty products (the whole Netscape 6.x suite is flawed) that users had to stick with Netscape 4.x. And because of these flaws, many companies in industry have simply given up and declared Netscape 4.0 as the last validated Netscape browser to work with their corporate system. Therefore, a significant number of people still use Netscape 4.0.

Reason two: While Netscape 7.x has certainly addressed a lot of the issues that plagued the NN6.x suite, there are now other bugs that bother potential users. And although NN7.x is CSS2 compliant, current web statistics don’t show that users are switching in droves. Netscape’s upgrade comes too late and doesn’t really offer anything superior.

Thus, the question you have to ask yourself is “How many of MY website visitors still use Netscape 4.x?” If you know the answer through web statistics, you’re one lucky person. If not, you could simply consider if you have a lot of stakeholders from academia or the design field (traditional Mac-users). If you do, then you definitely don’t want to piss them off by having a site that doesn’t render properly on Netscape 4.x.

For further reading: “Tables or CSS?”, an article by Craig Saila. Or check out Dave Polaschek’s view on this matter.

 

Where can I find resources and templates for CSS2 and XHTML1.0?

Many sites deal with the issues addressed in this essay. Once you start reading, an avalanche of useful sites will roll over you. You’ll get more than you’d ever want. So I’ll get you started with these four sites. After that, you’re on your own.

 

Official CSS2 Specification

To find out about the rules, definitions, semantics, conventions and guidelines that make up CSS2, see the one and only official source: CSS2 Specification (May 12, 1998), in conjunction with the Errata Page (September 13, 2002) as released by the W3C HTML Working Group.


Site templates based on CSS2

Previously listed URLs, all in one place. I also came across an excellent tutorial by Christopher Schmitt, entitled Web Page Reconstruction with CSS. Similarly, Eric Costello gives an Introduction to CSS Layout.

 

Official XHTML1.0 specification

To find out about the rules, definitions, semantics, conventions and guidelines that make up XHTML1.0, see the one and only official source: Latest revision of XHTML1.0 (August 1, 2002) as released by the W3C HTML Working Group.

 

Five Rules to Make an HTML Document XHTML Compliant

Jennifer Kyrnin has written a good and easily understandable overview on how to convert an HTML into an XHTML document. And you’ll realize that writing XHTML is not any different from HTML, it is just stricter. Think of it as writing good HTML. That’s it. No biggie. Also available from the NYPL.

 

Validator for XHTML1.0 sites

Apart from the two links listed, also consult Jeffrey Zeldman’s comments on How to Deal with Validators, which will make your life a lot easier, because it discusses the known bugs and workarounds for validators.

 

Why declare a DOCTYPE?

This is the question that got me started on this whole research project. The answer is provided in two recent articles, one by Jeffrey Zeldman, Why a DOCTYPE?, another one by Jennifer Kyrnin, Declaring DOCTYPES.

The Final Word

Once you have delved deeper into all the resources listed here, you will realize that producing layouts without tables is easy. The only problem is Netscape 4, and my solution to this issue (after about 6 weeks of research) is the following: Use a browser detect script, and send those visitors to a different section on your site. It is virtually impossible to get a layout to look the same in IE and NN. And with this piece of advice, I’ll let you go and surf the wide, wide internet. May CSS be with you…



Comments are closed.