The second in a series of new products I’ve been working on has launched. Like the first, it’s a financial service company’s mutual fund profile, and the design is based on the printed and PDF versions. Despite the fact it will never match the “wow” of the striking CSS Zen Garden experiments, this too is an all CSS-layout (with the exception of a header which is reliant on the company’s main site). The pages use semantic-based, almost valid XHTML. Alternate versions (printable/PDF and French/English) are also made available link-based options.

The CSS is optimized for fifth-generation browsers, but there is a separate file that allows Netscape 4.x to imitate, not duplicate, the presentation.

The three core style sheets used (in combination with page based colour declarations which are determined through server-side variables) are:

• aegon_layout.css: although this file uses the SBMH (which prevents Netscape 4.x from seeing the styles) the @import was used to hide the core layout file from Netscape 4.x.
• aegon_nn4_layout.css: the layout file for Netscape 4.x uses Fabrice’s Inversion to hide styles from other more compliant browsers
• aegon_style.css: defines the font-sizes for the template. Pixel units were used to safely replicate the font sizes used in the printed version.

As more of these products come along, the techniques will no doubt evolve, but the core point will remain true: all-CSS layouts can be used on traditionally conservative commercial sites still supporting six-year-old browsers.