Liquid Layout

Problem

Users must be able to read text comfortably regardless of the browser window size.

Solution

Allow certain parts of the page to scale


From www.wired.com


Use when

Basically any website can benefit from this pattern. Nonetheless, the pattern is most effective when used on pages where the is a lot of stuff to be read such as a News Site.

How

The basic page design must be such that text is readable already. But when users enlarge their browser window, the readability must increase. You must decide which parts of the page will scale along and which ones stay fixed. There is always a main content area that is on the Center Stage. That one should scale. Other columns with related stuff or navigation usually does not scale.

Why

Scaling the main content area helps users reading the main content. Other sections do not need re-scaling because they do not contain long content that users come for e.g. related sections, navigation, commercial stuff etc.

More Examples

At www.infosync.no the left column scales while the two right colums keep the same width:





plml logo

Comments

1 comment has been added to this pattern.


Jason Cobill, 2nd March 2008
Consider the issue of readability when allowing for extremely wide paragraphs of text - reasonably limiting the "center stage" width if you intend your users to do any kind of extended reading. The design of the page should showcase your content, not distort it.

According to Bringhurst in "The Elements of Typographic Style", a good rule of thumb is to limit text columns to a width of about 66 characters. With extra thoughtful leading and good fonts, you can sometimes push this to about 75 or 80.

I would make the case that whenever possible, text meant to be read should be thoughtfully set at a fixed width, then floated in a liquid arrangement of design elements that expand to fit the page.


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha