Liquid Layout Advocacy

Why do some of us stick those buttons on our web pages to say we’re compliant with this and users of that and avoid the other? We do it because we take pains to do something that is a Good Thing but which may not be immediately obvious (okay, the Coded By Hand buttons aren’t 100% serious).

One such Good Thing in my opinion is a stretchy “liquid” layout. Now, with a page like this one, especially given my humble graphic skills (any humbler and it would be a plain text file) and my somewhat idiosyncratic decisions (the big tree background is there on the basis that I hate big backgrounds, and hence figured making one that at least I didn’t hate would be a challenge), it’s immediately obvious that the page is stretchy.

However the finest examples of liquid layout pages adapt so well to the window size and are so æsthetically pleasing that you might not even know that the page wasn’t designed specifically for the window size you happen to have.

And of course with the humbler sites like my own there is still a difference in having a liquid layout because I think it’s the best thing to do, than because I didn’t bother to set the width! Generally I can’t avoid a degree of rigidity with code examples without sacrificing how well they read as code, but beyond that I try my best.

Why Liquid Layouts Rock

Buttons

So whether your site is a fluid Sistine Chapel or a cruder affair like my own, if you want to shout about your developing liquid pages from the roof-tops then I provide for you some buttons. These are based on some of the buttons offered on Taylor McKnight’s Steal These Buttons site for indicating the resolution a page was designed for, adapted to state that the page was designed for the resolution that you, the reader, like (I really like Steal These Buttons, I think I may have gone overboard with them a bit). The suggested alt text is cheekily a pastiche of the similar buttons for fixed layouts.

If you can do better (and having superior graphic skills to myself would probably put you in the majority) then please do so.

Also, some examples of beautiful liquid layout pages would be nice (especially if they don’t fall down on other usability and accessibility issues).

Please make copies of these images onto your own server rather than linking to them from here.

Suggested alt Text: Res: One you like!
XHTML1.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/1/" alt="Res: One you like!" /></a>
HTML4.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/1/" alt="Res: One you like!"></a>

Suggested alt Text: Best viewed at a resolution you like!
XHTML1.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/2/" alt="Best viewed at a resolution you like!" /></a>
HTML4.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/2/" alt="Best viewed at a resolution you like!"></a>

The resolution preferred by you is the resolution preferred by me.

Suggested alt Text: The resolution preferred by you is the resolution preferred by me.
XHTML1.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/3/" alt="The resolution preferred by you is the resolution preferred by me." /></a>
HTML4.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/3/" alt="The resolution preferred by you is the resolution preferred by me."></a>

Suggested alt Text: Stretchy pages rule!
XHTML1.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/4/" alt="Stretchy pages rule!" /></a>
HTML4.0 Code: <a href="http://www.hackcraft.net/resUlike/"><img src="http://www.hackcraft.net/images/resbutton/4/" alt="Stretchy pages rule!"></a>