Yes, I am predicting the death of liquid layout of web pages. Not all mind you, some web apps will still be liquid, but for the rest of the web: liquid is dead. This is a natural follow-through from declaring elastic layouts dead, so no surprises here.

There are three main ways to define your layout in web design: fixed, elastic & liquid. Having written about the differences between them before, I’ll suffice with stating that fixed layouts are defined in “px” (pixels) and liquid ones in “%” (percentages).

Using a fixed layout means your web page is the same width irrespective of the viewers’ screen width, like so:

Using a liquid layout however, means your web page scales along with the viewers’ screen width, like so:

Liquid layouts used to have an edge over pixel layouts in the sense that they increased use of the screen real estate, thus providing more room if the viewer increased their text-size. Line-lengths are hard to control with liquid layouts however, especially in the case of text-size increases by the viewer. Jason Kottke posted a good warning about line-lengths in liquid layouts a while back:

Attention liquid designers: take a gander at this portion of an ancient Egyptian parchment on papyrus from the Louvre. Even the ancient Egyptians knew not to make columns of text too wide.

Now, however, most browsers have adopted full-page zooming over text-size zooming. Most provide both, but full-page zooming is the new default. Full-page zooming gives users with (for example) a wider screen the chance to increase the size of text and images while still preserving (ratios) on fixed layout pages, like so:

As you can see, full-page zooming means fixed layouts also provide increased use of screen real estate, but only when needed. In addition fixed layouts keep line-lengths relatively stable, and are easy to work with as they are based on pixels, just like images, videos and other objects you may have on your web page.

I’ve been listening to Simon Jobling’s One Phat DJ, the excellent funky, sexy, house music podcast series. You should too. Twice a month, he outputs more than an hour of wicked house tunes. Give the April 2008 Crescendo one a try for instance. Of course, this is coming from someone who’s “musical compatibility rating” on last.fm is “Super” with One Phat DJ :)

So back to the subject of this post: wallpaper. I regularly feature wallpaper of house music I like, or rather wallpapers based on the artwork of house music that I like. Now apparently, I have the need to create a wallpaper out of everything I open in photoshop. I was supposed to be creating a cover for an upcoming podcast of One Phat DJ, when I realised I wasn’t busy creating a cover at all - it was a wallpaper! So while that means I had to go back to the drawing board, I still thought it’d be nice to share it with all of you.

The “One Phat DJ - Pro” wallpaper is based on a Sam Hardacre sketch of the One Phat DJ character as featured on the April ‘08 Warm Up cover. While it’s obviously inspired by the NBA logo, this style seems to be used for a lot of pro sports now, even pro gaming!

It’s available for download in both wide-screen and square format. Feel free to use this wallpaper at home or at work, but please don’t redistribute.

Enjoy!

You see, when a picture loves another picture very much, they get together and do something very special. Son, I’m going to use a word I’m sure you’ve heard before - they get Photoshopped together. And this is how a disaster comes into the world; it’s a beautiful thing.

From Photoshop Disasters, a site which I enjoy, especially since I dabble a bit in Photoshop too.

You used to have to choose. Choose between an easy, but inflexible, px-based layout or a hard to control, but flexible, em-based layout.

Now with full-page zoom being implemented (as default!) in Internet Explorer 7, Firefox 3 and Opera 9*, it’s a different story. Full-page zooming means your easy px-based layout will be fully flexible. Even more flexible than most em-based layouts in fact, as images will scale along too.

So I’m asking myself, why bother with hard-to-keep-from-breaking em-based layouts?

Update: I don’t think liquid layouts are relevant anymore either.

PS. * I don’t know what Safari is planning, but if all major players do it, I expect them to follow suit (eventually, as they’ll want to do it right). They also have to deal with more dependancies, like Dashboard, than most other browsers.

PPS. This still leaves percentage-based layouts of course, but they maximise screen real estate. Which is very different from maximising readability (line-lengths and all that jazz). As far as I can see, %-based layouts are good for some web-apps (like gmail) but aren’t optimal for other uses.