What's a liquid layout?

0 votes
asked Sep 15, 2008 by developingchris

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

9 Answers

0 votes
answered Jan 15, 2008 by bryan-m

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.

0 votes
answered Jan 15, 2008 by rob-allen

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

0 votes
answered Sep 15, 2008 by sean-cameron

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.

0 votes
answered Sep 15, 2008 by raithlin

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.

0 votes
answered Sep 15, 2008 by sietse

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.

0 votes
answered Sep 15, 2008 by seldaek

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.

0 votes
answered Sep 15, 2008 by rob-wells

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.

0 votes
answered Sep 15, 2008 by craig-francis

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.

0 votes
answered Sep 15, 2008 by grigy
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter