Separating Style from Substance

The extranets that we set up for our clients and projects at Behavior have always been rather low-tech. That is, they’ve been updated manually, with designers and technologists painstakingly editing HTML code each time a new posting was added. This has been a royal pain in the ass, but we’re trying to change this by creating an extranet infrastructure with Movable Type.At my last job, we also made some attempts at implementing software-driven extranets, trying both home-brewed solutions and ill-conceived, cumbersome, off-the-shelf packages like QuickPlace. Movable Type, on the other hand, is powerful, cheap and easy to implement — it will only take a few days to get a workable extranet infrastructure up and running.

One of the things that this will require is re-creating the interface of our old extranets as new MT templates, complete with MT markup tags. I took this opportunity to really push my budding CSS skills as far as I could, and I’m in the middle of developing these templates using a strict combination of div positioning and style sheet formatting. The goal is to completely separate the display layer from the content. Granted, this is no innovation, but for me, it’s a big step forward.

With CSSWithout CSS

Have a look at the work I did today on the ‘front page’ of each extranet (of course, you’ll need a CSS-friendly browser such as Safari or version 5 or better of IE or Netscape). It’s not perfected yet, but it does accomplish my main goal: with the exception of the GIF image for the Behavior logo and the calendar table in the right column, the HTML for this page contains virtually zero formatting code — no colors, no font styles, no spacer GIFs, no table cells or rows for page structure. Instead, the page relies entirely on its accompanying style sheet for formatting, including even the dotted vertical lines.

To demonstrate my point, have a look at the same page with the link to the style sheet removed. You’ll see that the page is plain and ugly. Again, there’s absolutely nothing earth-shattering here; this is exactly the kind of thing Web standards advocates have been promoting for years. All the same, I just thought I’d give myself a little pat on the back.

+