Mockups are one of the best ways to flesh out the interaction between the CMS (Content Management System) and users of a website. And since sooner or later I'll have to deal with the nitty-gritty details of website design, it seemed straightforward to make "real" mockups, ie, real XHTML+CSS pages rather than gimping out stale bitmaps. (For the Linux-challenged in the audience, "gimping" is what you may call "photoshopping"). I have thus been spending some time learning the ins and outs of Web design, CSS, and even Javascript.

Conclusions so far? Well, the lofty ideals of complete separation between content and presentation espoused by the XHTML+CSS combination are getting closer to becoming reality, but are not quite there yet. There's a few shortcomings in CSS 2.1 that mean that most minimally interesting designs will require some non-semantic scaffolding in the XHTML. I am referring in particular to multiple backgrounds per element (CSS 2.1 supports only one), the Web 2.0-style curved corners (requiring background images or Javacript to implement in CSS 2.1), and basic arithmetic with units (e.g. 2em+16px). The good news is that CSS 3.0 addresses all of these issues, and some browsers (those based on Webkit and Gecko, such as Safari and Firefox, respectively) already provide partial implementation of these features, albeit in a provisional non-standard manner.

For the design of nleyten (or any other site for that matter!), one has to be realistic. The market leader (IE6) still has trouble with CSS 1.0, and its successor IE7 won't even fully support CSS 2.1, much less 3.0. Therefore, I am not relying on any CSS 3.0 elements. On the other hand, if we're going to wait for Microsoft to get its act together, we might as well be designing with HTML tables, à la 1995. The compromise solution is to adopt CSS 2.1: its support (even if not perfect) is now mainstream, and with minor non-semantic scaffolding in the XHTML it can do all that's required.

I now have a working design with which I am pleased. It's a three-column layout, with two fixed columns on the side, and one partially-liquid column in the centre (it has a minimum and maximum width, hence the "partially-liquid"). I have been working on two variants of this design: a fancy one which uses all the Web 2.0 bling (shadows! shiny buttons! curvy corners!) and a simple, minimalistic one. I am now also happy (well, as happy as a purist can be when having to make compromises) with the "dirty" scaffolding. Basically, the dirt consists only of special "wrapper" containers around the proper elements. The fancy design makes use of the wrappers, while the minimalistic one does not need them at all. The advantage of this solution is that once CSS 3.0 becomes mainstream the only required modification will be to get rid of the easily identifiable scaffolding.

Consider for example a floating box, expressed in pure XHTML without any non-semantic elements:

<div class="floatbox">
  <div class="floatboxhead">
  </div>
  <div class="floatboxbody">
  </div>
  <div class="floatboxfoot">
  </div>
</div>

And here's the version with the scaffolding:

<div class="floatbox-wrapper">
<div class="floatbox">
  <div class="floatboxhead-wrapper">
  <div class="floatboxhead">
  </div>
  </div>
  <div class="floatboxbody-wrapper">
  <div class="floatboxbody">
  </div>
  </div>
  <div class="floatboxfoot-wrapper">
  <div class="floatboxfoot">
  </div>
  </div>
</div>
</div>

Obviously not perfect, but something I can live with until the brave new world of CSS 3.0. Other good news is that it renders perfectly in Firefox (Gecko-based) and Konqueror (Khtml-based) without requiring any browser-specific tweaks. That's the beauty of standards. (You've heard that, Microsoft?...)