Liquid layout : Five Minute Argument

Liquid layout

A ‘liquid layout’ adjusts to the size of the browser, ensuring content widths are flexible, and at the mercy of the user.

Below is a simple example layout with two columns representing a sidebar and content area. The browser window is simulated here with a light grey border. Using percentage widths — 20% and 80% respectively, in this case — a liquid layout will adapt to its environment much like … a liquid!

Using this demo, you can see how the layout works. Try resizing the simulated browser window and observe how:

The columns remain proportionately sized, with the content four times the width of the sidebar

The text within each column adjusts to take up the available space

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If our ‘browser window’ is resized to a smaller width, both sidebar and content shrink in proportion.

And with a much larger browser window, the layout remains in proportion, allowing us to view more text on screen.

A liquid layout is the primary technique used to take full advantage of a variety of screen sizes. However, by handing control of line lengths over to the user, the designer loses some control of best practises.

Liquid layout

Comments