Wicked Worn

Bulletproof Liquid

These Two Concepts Work Well Together

This article/demonstration is about the happy coincidence of two techniques – one a graphic design trend, the other a web standards coding philosophy – functioning surprisingly well together. Try resizing your browser while watching the header and you'll see what I mean.

That Wicked Worn Look

Cameron Moll brought this weathered design style to those of us who lacked the skill or patience to figure it out ourselves with his Wicked Worn Look Series. The style is exemplified by faded colors and roughly torn edges.

The highlight of the series to me was in the additional resource links at the bottom: Keith Bowman's Brushes. With these brushes one can achieve the basics of the look in seconds, which allowed me to toss together this page without spending an entire evening with an eraser.

Bulletproof Liquid Layout

Dan Cederholm's book Bulletproof Web Design is built on the premise that we should engineer websites to be as flexible and robust as possible. The book exists right on that cusp between design and programming where there has been considerable innovation in the past few years.

His book does something that few have done. It walks neatly from Photoshop to HTML, slicing up images and then pulling the interface together with CSS. And that is exactly where these two techniques meet.

Where They Meet

CSS Zen Garden showed the graphic design community that CSS layouts could be more than just a bunch of boxes. Many of the designs in the garden are heavily layered and textured, but few are flexible. It is my belief that this lack of flexibility is as much because of a lack of flexible CSS layout techniques as it is a deliberate typographical choice. But new techniques are emerging. One such technique is Sliding Doors. It is a versatile technique, scaling from individual navigation items to entire layouts. If you aren't familiar with the technique read Sliding Doors of CSS by Douglas Bowman.

The "Sliding Doors" that I have seen invariably have a nice smooth curve outside a soft bevel or gradient. The curve acts as an end-cap to a solid line border (with accompanying gradient/bevel). The reason that it works so well is that the repeating pattern of the edge image matches perfectly with the side of the curved image where it overlaps. Look at Doug's sample image tab_images.gif (popup window) to see what I'm talking about.

But the whole point of the worn look is that there aren't straight edges or smoothly rounded corners. The trick is, we don't have to get them to match perfectly. The edges are so ragged and pixelated that without watching closely at the seams as you resize the window you cannot see where the two images come together.

Let's look at a couple of the components of this demonstration and see how they're different. Pop up bg_corner_bottom_right.gif (popup window). That's the image forming the bottom-right corner of this page. Now look at bg_edge_bottom.gif (popup window), the image that tiles to form the bottom edge of the content area. These two images don't overlap neatly or deliberately. They're just one image jammed on top of the other. But they were sliced from the same static mockup, so they follow the same patterns, and the pixelated nature of the torn edges is very forgiving so it does not show a seam.

There you have it: a textured liquid layout. By combining a few of the latest techniques you can have CSS Zen Garden caliber design elements in a site that will squeze into one of those low resolution 15" flat panels Dell keeps foisting off on our unsuspecting parents.

Special Thanks

To Cameron Moll and Dan Cederholm, I cry your pardons. My implementations of your concepts, artistic and technical, are but crossing shadows of your own.

Article by Nils T. Devine, January 2006. Please post comments on the blog post or email me at divinentd@gmail.com.