HTML Utopia! Design Websites Without Tables - Parts 1 and 2

HTML Utopia - Designing Without Tables: Part 1

Love at First 'Site'!

A few weeks ago I stumbled upon a site that really inspired me. It was beautifully designed and presented. It was not until I looked at the code behind it that my heart truly skipped a beat.

The site was A List Apart, the brain child of Jeffrey Zeldman. Zeldman is also involved in WaSP - The WEB STANDARDS PROJECT that launched the browser upgrade campaign. The campaign encourages Users to upgrade to browsers that meet WC3 recommendations and lobbies the browser developers to build browsers that comply more thoroughly.

I decided to have a crack at rebuilding a SitePoint page without using any tables (currently there are 18 tables being used, 17 of which are unnecessary).

Editors Note: These examples are based on a previous SitePoint design and do not refer to the current site.

Click here to check it out. Have a look at the code if you don't believe me (here's the source). If you're keen here's the style sheet.

If all you saw was a not so pretty black and white page then I'm sure you'll have some things to say about this article! You see, according to WaSP, your browser is not standards compliant. If it all looked fine to you then fire up your old copy of Netscape 4 and take a look at the same page...or click here for a simulated look!

When I'm talking about HTML Utopia, I'm talking about the separation of content from formatting. With databases we've achieved that separation to some degree but only on the production side. We're still outputting our content into salami-like HTML code where we mix it with the cholesterol of <table> and <font> tags. Besides, not all websites are database driven and the ones that are rarely database 100% of their content.

Before I talk about the glories of such coding, let's first address the backward compatibility issues with the older browsers.

Version 4 Bites!

As web designers and web developers, we've been busting our butts to get our creations to work across all browsers and over all platforms. By now, most of us have gladly committed the Version 3 browsers to the retirement home. However, we're still suffering the shortcomings of the Version 4 browsers.

We've found our hacks and tricks that defy logic. We've developed our scripts to detect our user clients. We hold our breath as we Alt-Tab Control-R. Still, rarely do we manage to cover all bases and let's face it - creating different code for different browsers which can't even agree on the length of a text field is growing tiresome.

What's the answer? Say "No!" to browsers who don't comply with web standards. By web standards I mean CSS-1, HTML 4.01, and ECMAScript (the "official" version of JavaScript) - basically, any Version 4 or older browser? At this point the alarm bells start ringing.

With the release of Netscape 6 and Opera 5, we now have serious alternatives to Microsoft Internet Explorer who historically has provided the best support for CSS. If you're looking for a Unix/Linux browser then Konqueror is available.

From my research, current stats indicate 77-80% of web surfers today are using browsers that do meet web standards. Maybe the remaining 20% need some encouragement.