The wheel turns

The only constant in web design is change.

It came as a shock to me, when I first sat down to write this site, that everything I had learned about Web authoring was wrong.

It came as even more of a shock, earlier this year, to find out that everything I had relearned was already out of date.

When I first built this site in 2000, I set out to write the cleanest, leanest, most standards-compliant code possible. That meant using the tools and techniques that were the most robust and reliable at that time: HTML 4.0 Transitional, and <TABLE> tags to create my two-column page layout. I had learned that the old familiar <FONT> tag had been deprecated, and that the best way to style text was using Cascading Style Sheets (CSS).

A great deal has changed in the Web design community since that time. And so has JimRoyal.com.

Coding with style

If you've looked at my document code, you've noted that I am now using HTML 4.0.1 Strict and CSS for page layout. No more tables anywhere.

CSS has come of age. Whereas once it was confined to styling fonts, sizes, and line spacing, CSS can now be used to define the layout of a entire page, and everything contained within it. It is an entirely different way to approach Web coding and design.

Table-based page layout—whiles it works—is a flawed approach. The technique of defining text columns with tables really is a hack designed to work around the limitations of HTML. It makes the HTML code difficult to read, and increases the weight of the page dramatically. It also makes future redesign of a page a tortuous matter.

In contrast, the HTML contained within pages that use CSS-based layout is almost ridiculously simplified. This page uses only a handful of HTML tags: <P>, <H1>, <H2>, <H3>, <UL>, <LI>, and <DIV>. And that's it. Nothing more. Consequently, I've gone back to hand-writing my code. My pages are now so simplified that graphical HTML editors are not particularly useful.

The simplified code also makes my pages extraordinarily light. A typical page such as this one used to weigh 7388 bytes. It is now 4493 bytes. This space savings is typical right across the entire site. For large corporate Web sites, the savings in bandwidth costs can be tremendous.

And finally, CSS-based layout makes it easier to redesign the site. Modify the colour of any object? Change the style sheet. Swap the left and right columns, or put them one on top of the other? Change the style sheet. Add boxes to any object, or eliminate the overline on my H3's? Change the... Well, you get the idea.

(Have a look at the sidebar on this page for more information about CSS layout techniques.)

Fly in the ointment

The biggest hurdle in making this paradigm shift, however, was browser compatibility. Support for CSS-based layout in older browsers is erratic. Even in the some of the latest browsers (i.e., Internet Explorer 6.0), there are pitfalls and gotchas.

The hardest nut to crack was Netscape 4.x; that rusty, creaking antique that some companies are still using. There's simply no way to make pages laid out in CSS work correctly in Netscape 4.x. I hemmed and hawed for a while, and decided that Netscape 4.x visitors would see a simplified version of the site. Take a look at what a visitor using Netscape 4.7 sees when viewing this page. While dramatically different, the page is still very readable, and branded with my colours. I consider it an acceptable tradeoff.

Coda

As always, the design goals of JimRoyal.com are elegance and simplicity. The site displays correctly at any possible monitor resolution. The pages are quick to download. And there's no animation or Flash. (Unless you have a really compelling reason to use it, Flash is evil.)

The entire site was written using BBEdit. For Windows users who have never had the privilege, BBEdit is one of the oldest, leanest, and most powerful Web page editors around. Even for those who rely on graphical editors, BBEdit remains the ever-reliable fallback.

(Updated November 2003)