Article

Home » Client-side Coding » CSS Tutorials » HTML Utopia! Design Websites Without Tables - Parts 1 and 2

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

When No means Yes

When I say No I'm not talking about serving a page to non-compliant browsers that resembles a 10 car pile up (due to its misuse of styles). And when I say No I'm not talking about a rude message and a closed door. What we can deliver is a nice message and your content! (If you haven't loaded up your old browser yet here's what it would look like.)

WaSP suggests that you use your message to encourage users with non-compliant browsers to upgrade and provide a link to an upgrade page.

One of the fantastic benefits of this approach is that you still present your content to a browser that doesn't understand CSS. That includes any device capable of displaying files retrieved on the Internet eg. Hand-held devices, WAP Phones, Braille readers and Internet Fridges.

We don't test for N4 and then serve the specially designed N4 content. We don't test at all! By using an new alternative way of linking to our external stylesheet...

<style type="text/css" media="all">@import "styles.css";</style>

... non-compliant browsers (that don't understand this method) will simply load the page without any styles. As long as you apply your styles with <p> tags and <h1>,<h2>...<h6> etc then your content will still make perfect sense in any browsing device. It will just look a little old school.

Need some more convincing? Lets look at the many other benefits.

CSS Happiness!

OK, we've talked about catering for all non-CSS devices including N4, even devices that haven't been invented yet! There are some other great benefits of separating your content from your formatting.

Reduction in File Size: I reduced the file size of the SitePoint page from 34,353 bytes to 18,585 bytes. It would be smaller again if it wasn't for all those rounded corners! One file controls the whole site design: OK you've heard this before - it is part of the beauty of CSS in general. Should you decide to add Geneva to your font family because you're becoming Mac friendly then modify your style sheet and the changes will be reflected across your whole site. Alternative Style Sheets: You can have a separate style sheet that is used when your page is printed. That means no more separate 'print version' pages.

Old Dogs and New Tricks

Those of you that code by hand should have no trouble making the transitions to this style of HTML and if you're anything like me, you'll get a kick out of doing something new. There's bad news for those of you that rely on WYSIWYG software - at least in the short term - because there isn't any programs with this level of CSS support. Macromedia is usually pretty quick, so you probably won't have to wait too long. You might even find that once you get the hang of it coding like this is easier than fiddling with 100's of table cells!

Good luck and May The Source Be With You.