Liquid Bleach

Promised one week ago today, this is the next phase in a temporary exploration of page design and CSS layout for Stopdesign. Bleached turns liquid, making this Liquid Bleach.

The parent container for Liquid Bleach is set to 95% of the browser window width. 2-column proportions are basically set at 65%/35%, while 3-column proportions adjust those numbers to keep the middle column slightly wider by a small percentage. A min-width for the parent container is set at 750px for 3-column layouts, and at 600px for 2-column layouts, in attempt to prevent any weirdness caused by fixed-width images that live in the liquid-width columns. (IE users beware: min-width is — yet — unsupported in your browser, so it is possible for you to drag your window so small that the layout might break.)

Liquid layouts are easy to create in theory, but can be difficult to implement effectively. I’ve seen many liquid layouts that fall apart with hardly any browser resizing. I don’t even think this version comes close to achieving perfection. With liquid layout, columns constantly change widths, text reflows freely, objects reposition on the page without warning. More challenges ensue when relying on CSS for layout, rather than the easy-to-fall-back-on table-based layout.

Doubling margins, subtractive padding, nested percentages, and differing box models, oh my! Enough to make anyone shake their fist at the monitor a time or two. It’s hard to keep everything straight in liquid design. Which is my guess why we’re seeing so many fixed-width CSS layouts emerge. With fixed-width, everything Just Worksâ„¢ a lot more often. Liquid? Well, creating a flexible-width design might take just a little more care and experimentation. Pulled off well, they can be a pleasant wonder the user never needs to think about or notice, because the design adapts to whatever size their browser window happens to be.

At this point, I’m not arguing for either. I’ve written before about fixed vs. liquid before, but I always dodge the debate. Apply whichever one makes sense given needs, goals, and the environment you intend to create. Given the success of the liquid-based version 2 of Stopdesign, I thought it important to eventually go back and create a liquid version of this new design, even if it were devoid of most color.

When creating liquid layouts using CSS, here are a few considerations I keep in mind:

• Double-div columns: As much as I hate to use extra markup, there’s no easier way to ensure maximum compatibility across multiple browsers than to use two divs for each column. The outer divs are used for setting widths. Inner divs are used to set padding to create gutters of white space between each column.
• Use fixed-width gutters (or gutter widths based on type size): When column width gets applied independently of column padding, as above, percentages can be used for widths, and pixels or ems can be used for padding. This, without worrying about one column getting bumped to the bottom of another, or without purposely under-sizing columns so they always fit on the page. Even though column widths change as the browser gets wider or narrower, the text on the page generally stays the same size. The amount of white space required to make the text feel comfortable is dependent more on the size of the type, rather than the size of the column containing that text.
• Avoid fixed-width columns: As much as possible, make all columns a percentage width. It’s tempting to think of sidebars and navigation columns as being one static width, and let the main or middle column do all the expanding. This quickly destroys any proportions that may have been carefully chosen, as the fixed width columns can look puny and weak at large resolutions. Or wide fixed-width sidebars can become daunting, over-powering the main column at narrower browser widths.

These aren’t, by any means, rules of the road. They’re simply my own formulas for making liquid layouts as pleasing to the eye as possible. Given the first point, some of the markup had to change here to enable greater flexibility for different types of layouts and future style-switching of the design. As more flexibility is built into a design, the markup slowly gets more complex to account for different scenarios.

One small point of interest I’ll quickly point out: I’m using a new technique for liquid layouts that I’ve been wondering about for a while. Eric Meyer helped hammer it out last week as we batted ideas back and forth. It combines my Sliding Doors method with Dan Cederholm’s Faux Columns to create some sort of Sliding Faux Columns effect. Each of the floated columns vary in width and height, depending on browser width, and the column separators move with them, sliding together or apart as necessary. The separators also span all the way from header to footer, regardless of which column is longest.

This bleached version of Stopdesign only requires column dividers, since it eliminates the original tinted columns. But this same technique could also be used for columns filled with background colors or patterns, as might be shown in a future version of Stopdesign.

The trick is to create an ultra-wide background image (or two images for 3-column layouts, thus the Sliding-Doors-nature of the technique). The image is partially opaque, and partially transparent. It gets tiled vertically inside the parent container, just like Dan’s Faux Columns technique. The opaque portion of the image should match percentages of the column it helps create, so that it can be positioned with an identical background-position value. This allows the transition from opaque to transparent to become the axis point for the background’s position. The opaque portion’s position within the image could be altered based on order of content within the HTML to produce almost any effect desired.

Since this bleached version only uses dividers, and not fully filled columns, I’m only using one image for all column dividers, cut down to 1px by 20px. It’s still positioned the same way as above, it just doesn’t need to be as wide since it’s not creating a fill color or pattern.

I’ll restate again: this noodling with the layout is only temporary. Those of you harassing me to change it back, please stop. I’ll eventually default back to the full technicolor fixed-width version of Stopdesign. But it is my intent to make the changes I’ve been testing here available via a server-side style switcher. That’s next on the agenda, after other more pressing work is completed.