Elegant Web Design

Coding with Style

Digital Wind proudly practices standards-based Web design. This means that when you hire Digital Wind to create your online presence, you'll get a Web site that is:

Your customers get the best possible online experience, while you benefit from the low cost of standards-based development.

Standard, open technologies

The key is rigorous adherence to industry-standard HTML (no propriatory technologies), and the use of Cascading Style Sheets (CSS) for composing the pages.

If you're a Web designer yourself, and have looked at our document code, you've noted that we're using HTML 4.0.1 Strict and CSS for page layout. No more table-based pages, here.

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

Tables are old hat

Table-based page layout—while 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, we've gone back to hand-writing code. Our pages are now so simplified that graphical HTML editors are not particularly useful.

The simplified code also makes our pages extraordinarily light. In redesigning existing Web sites to use CSS-based layout, we have seen per-page file size reductions of more than 30 per cent, and sometimes as high as 50 per cent. For large corporate Web sites, the monetary savings in bandwidth costs can be tremendous.

And finally, CSS-based layout makes it easier to redesign a Web site. Whether we need to modify the colour of any object, or reorder the left and right columns on a page, most of the work is in simply updating the style sheet.

Fly in the ointment

The biggest hurdle in making this paradigm shift, however, has been browser compatibility. Support for CSS-based layout in older browsers is erratic. Even in 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. We 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 our colours. We consider it an acceptable tradeoff.

Coda

The design goals of Digital Wind 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.