The Fix Is In

Six.5.02Most of the major work on Six.5 is done. Late last night I finished the template for each individual post (the page that results when you click on the the post’s title or the “This post continued…” link). This was one of the main motivations behind Six.5, as the new template allows for a lot more design flexibility than its predecessor.

The Down Side

The most notable layout change in this new template, and in fact for the site as a whole, is that the design is now fixed-width, rather than fluid. That is, when you resize the width of your browser window, the layout of the page no longer re-flows the content to take maximum advantage of its new horizontal dimension.

This is a kind of departure for me, because I’ve long been an advocate of fluid layouts, having always believed they offer superior usability. Smartly designed fluid layouts not only allow users to control the length of each line of text to suit their preferences, they also maximize browser real estate.

The Old Layout

The problem is that the support for fluid layouts with CSS is such a mixed bag. It’s obvious that the CSS1 specification was designed with fluid layouts in mind, but its implementation among the various browser flavors is pretty inconsistent. Specifically, it’s hard to design a fluid layout without being able to count on the poorly supported min-width property, which should theoretically set a, er, minimum width to which a fluid layout can be condensed. Narrow your browser while viewing this attempt at a fluid three column layout and you’ll see the effect I’m talking about.

Above, the Six.0 template for individual posts, which was a fluid layout. Below, a gratuitous picture of some fence.

It might have made sense to use a transitional XHTML, mixing tables — which handle fluid layouts much better — with CSS. That ran counter to my resolution to use only pure CSS though, and it wouldn’t allow me to do some of the things that I wanted to with CSS’s powerful layout capabilities.

The Up Side

Here is one of those advantages. The table structure of the last layout pretty much constricted me to laying out page elements inside of the main column. It might have been possible to break items outside of that column, but not easily and certainly not with Internet Explorer’s willing cooperation.

A Wide Picture

As you can see from the gratuitous images decorating this post, it’s pretty easy to break the column with CSS. I’ve set up a handful of classes with negative margin values, and when I place an image, I need only assign one of those classes to an enclosing <div>, and the image breaks free. The same principle is easily employed to create hanging captions. This is dramatically simpler than it would be without CSS.

What this all amounts to is increased layout control for designers. CSS is great for that. The way I’ve used it though, I admit that usability takes a bit of a hit with the fixed-width layouts. Because is a kind of playground, and because I’m doing all of this stuff for free, I don’t mind that much. There’s no reason though that, given a real project for a paying client, CSS couldn’t actually improve usability. I’m just waiting for the opportunity.