Whats a liquid layout?

Question

My designer keeps throwing out the term "liquid" layout. What does this mean?

Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid

Answer 1

A "liquid" layout is a site layout that expands to fill the entire available area as the browser window is resized. Typically this is done using CSS. Liquid layouts can be quite helpful for certain types of sites, but they also tend to be significantly more effort than fixed width layouts, and their usefulness depends on the site content and how well implemented they are.

Answer 2

Liquid Layouts refer to the design concept of a website. A liquid layout will move in and out when you resize your browser window, due to is having percentages and relative widths in the CSS.

Answer 3

From http://www.maxdesign.com.au/presentation/liquid/ :

All containers on the page have their widths defined in percents - meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Answer 4

It just means that it will contract/expand to fill the browser's window size (usually the width), up to a certain point if things are done well. Otherwise text can get quite hard to read on big (24"+) monitors.

Answer 5

Basically, it's a layout of a web page that doesn't rely on a specific width specifications for elements in the page.

See the discussion over at Wikipedia.

Answer 6

It means a layout which adjusts dynamically to the browser (or whatever client) width and height, to make efficient use of all available screen space, as opposed to (mostly) fixed width layouts which are made to fit a common denominator resolution at that particular time (e.g. 800x600 used to be the norm for websites for many years).

Answer 7

One of two:

• The design will scale to the width of the browser (as in, if the browser was 1024px wide, the design will be as well)... although this does get quite fun when designing for 100px wide browsers (sometime designers will actually set a min-width though).

• The design has a fixed width, but is set in a measurement using a relative size... for example "em"... so as the font size is increased, the width of the page increases.

Answer 8

A liquid layout is a method of CSS layout that defines all widths in percentages, so the areas of the page will grow/shrink when the viewport (browser window) is resized.

They're very useful if trying to create a site that will fit both large and small screens. They're a little more difficult to work it than fixed layouts, because you're relinquishing some level control over how everything fits in the page, and you have to pay very close attention to your content, to make sure it doesn't fall apart aesthetically on resize.

I would say liquid layouts are most useful for text heavy sites with a fairly basic column layout. You might also find a happy medium with an 'elastic' layout -- one that has both liquid and fixed areas.

Answer 9

In a true Liquid layout, your content expands and contracts to fit your user's browser window in a meaningful, calculated and intelligent way. So it's more than just setting your column and container widths to percentages.

Done well, this can result in a increase of perceived quality. Done poorly, it's a usability nightmare.

Going Liquid is a huge pain the rump. The pain is worth it though if the topic/client/product(s) you are building the site for have a strong visual quality to them (think summer blockbuster film site), require a certain fit and finish, or if it needs to display large chunks of data.

Note: I'll update this a bit later with links to good examples and citations for my claims

Answer 10

See this: http://www.time-tripper.com/uipatterns/Liquid_Layout