Migration to HTML4.01-strict and to Tableless Page Layout

Status: ongoing project, Oct-Nov 2005.

Background and goal

This website has been W3C-compliant ever since the publication of the first editions, according to the HTML4.01 transitional (loose) recommendation, and has originally (in Feb 2005) been designed with a classical table-based page layout. The goal of this overhaul project is twofold: (1) to qualify for HTML4.01-strict compliance, and (2) to replace the layout with a fully CSS-style tableless design.

The template approach

Since by now this website has expanded far beyond its original scope, a systematic approach for content and version management is required. Consequently, the overall page layout and the often-used constructs are first implemented and tested in "page templates".

The four template versions are accessible in the w3c++ submenu:

• Template 401-tb/en (where "tb" stands for "table-based") complies with 4.01-loose and is built with the "old" table-based page layout. It reflects and formalises my website's technical implementation at the start of this overhaul project.
• Template 401-lo/en (where "lo" stands for "loose") complies with 4.01-loose and is built with the "new" tableless page layout.
• Template 401-hy/en (where "hy" stands for "hybrid") complies with 4.01-strict and is built with a hybrid page layout (mixed CSS tableless with a few tables).
• Template 401-st/en (where "st" stands for "strict") complies with 4.01-strict and is built with the "new" tableless page layout.

These templates are useful to upgrade existing pages and to generate the framework for new pages, by fairly mechanical (though somewhat laborious) cut-and-pasting (into the target pages) of already w3c-validated and known-good html code.

Care has been taken for a "soft" overhaul path, during which pages of various versions (401-tb, 401-lo, 401-hy, 401-st) can flawlessly co-exist and remain available to website visitors, with minimal differences in visual appearance, until at last all pages will have been converted.

Status Nov 6, 2005

After long attempts, the pure tableless versions 401-lo and 401-st are still not stable under MSIE, since content-rich pages using these templates suffer from strange layout-breaking effects in MSIE. Until this situation is solved, I systematically use the stable 401-hy as production template. It is easily seen from the sources that the differences with 401-st are quite mininimal.

Drop-down Navigation Menu

Status: project completed Oct 2, 2005.

The drop-down menu for navigation has been implemented using a javascript developed and made available free-of-charge for (non-commercial) use by Ger Versluis:
   www.burmees.nl/menu/

This project will be documented here in some more detail (time permitting).

For browsers not supporting or blocking javascript...

The Versluis javascript code displays my navigation buttons on the gold navigation bar. The alternative for browsers not supporting or blocking javascript is now (Nov 6, 2005) fully implemented and documented on the "welcome" page.