Bye bye liquid layouts!
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 next step after 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, because of varying screen-sizes obviously, but also when the viewer increases (just) the text-size. 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 a wider screen (for example) the chance to increase the size of text and images, while still preserving the ratios of 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.
Really interesting observation. You might actually be right on this prediction.
I do think that for many websites, liquid will stay — mainly news websites and webapps such as gmail and google calendar.
But for the bulk of websites, indeed it is easier to design without the flexiwidth.
Of course, if Google Chrome sticks to text-only-zoom, we’re still nowhere!
And don’t forget Safari! As the Apple browser becomes more popular during the impending Mac Boom, a lot of designers that haven’t factored that in will be screwed!
Twitter: @simonhamp
True, Safari (and IE 6) are the only browsers with (semi-)sizable marketshares which don’t feature full page zoom. I mentioned Safari in Px vs Em: Is it still relevant? (first link in the article):
I wrote that before the introduction of Google’s Chrome browser though — I’m not as sure as I was that browsermakers will all offer full page view in the future. I still hope so though.
I agree James. I always used to design for liquid because I believed that that’s what users wanted. But the positive feedback I received on changing to a fixed width on my own website convinced me to adopt fixed by default.
I once wrote somewhere that zoom should be handled by the browser, not by the designer and I still believe that. It’s heartening that browsers now support a proper zoom function (I’m sure Safari won’t be far behind) — and this development signals the end of liquid in my eyes too.
I have to agree. Liquid is dead. The already available beta of Chrome 2.0 supports full page zoom already.
As the page zoom is part of WebKit, it should be available for Safari in the next version too (maybe it is already there, I don’t use Safari).