What is the liquid layout?

Question

My designer continues to highlight the term "liquid" layout. What does it mean?

Thanks for the clarification, I always called it a percentage layout and thought he said that the pieces can be moved and it was liquid

Answer 1

A live layout is a site layout that expands to fill the entire available area when resizing the browser window. This is usually done using CSS. Liquid layouts can be very useful for certain types of sites, but they also tend to be significantly more efforts than fixed-width schemes, and their usefulness depends on the content of the site and how well they are implemented.

Answer 2

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

All containers on the page have their own widths, defined as a percentage, which means that they are completely based on the viewport, not the initial containing block. The fluid layout is moved and deleted when the browser is resized.

Answer 3

Basically, this is a web page layout that does not rely on specific width specifications for elements on the page.

See the discussion on Wikipedia .

Answer 4

This means a layout that dynamically adjusts to the width and height of the browser (or any other client) to effectively use the entire available screen space, unlike (mostly) fixed-width layouts that are created taking into account the common denominator at this particular time (for example, 800x600 is usually the norm for websites for many years).

Answer 5

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

Answer 6

Liquid Layouts refers to the concept of website design. The fluid layout will move and delete when you resize your browser window due to percentages and relative widths in CSS.

Answer 7

It just means that it will shrink / expand to fill the size of the browser window (usually the width), up to a certain point, if all goes well. Otherwise, the text can become quite difficult to read on large monitors (24 "+).

Answer 8

One of two:

• The design will scale to the width of the browser (as, for example, in a browser with a width of 1024 pixels), although this is pretty funny when developing for wide-format browsers with a width of 100 pixels (sometimes developers actually set a minimum width, though).

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

Answer 9

A live layout is a CSS layout method that defines the entire width as a percentage, so page areas will grow / shrink when the viewport (browser window) is resized.

They are very useful if you are trying to create a site that will fit both large and small screens. They are a bit more difficult to work than fixed layouts, because you give up some control over how everything fits on the page, and you have to pay very close attention to your content to make sure that it does not fall apart aesthetically when resizing.

I would say that liquid layouts are most useful for text heavy sites with a fairly simple column layout. You can also find a happy environment with an “elastic” layout - one that has both liquid and fixed areas.

Answer 10

In the true Liquid layout, your content expands and contracts to fit your user’s browser window in a meaningful, calculated and intelligent way. Thus, it is more than just setting the width of the columns and containers as a percentage.

Well, this can lead to an increase in perceived quality. Done bad, it's a usability nightmare.

Going Liquid is a huge pain in the grains. The pain is worth it, although if the theme / client / product (s) on which you build the site has strong visual quality for them (I think the summer blockbuster movie site), they require a certain fit and finish, or if it is necessary to display large pieces data.

Note. I will update this a bit later with links to good examples and quotes for my statements.