Fixed Versus Liquid Design

One of the design considerations that a web designer must grapple with is the decision to use a fixed-layout or a liquid design. For the new designers out there, a web page designed with a fix-width layout is one whose width dimension is set to a fixed value, so that the users will see the same layout dimensions regardless of their browser size. A liquid layout on the other hand is meant to adjust its width based on the size of the user’s browser.

Early web designs were naturally fixed-width because some of the early web designers came from the print media where they’re used to having the full control on the dimensions of their final design. This changed though when designers realised that not all web users use the same viewing dimensions (i.e. their browser may be set to different sizes). This is also one of the big advantages of using a liquid over a fixed layout: you are able to design for your different users.

The idea in a liquid layout is to continually fill the page as the user changes its browser size. Multi-line content should wrap a the right margin unless the browser width becomes too narrow to make your content readable, in that case you should allow scrollbars to appear.You should allow your main body content to fill the new space, while keeping navigational elements anchored to your desired position.

Liquid layouts are harder to implement, and even much harder to nail. It is however a way to cater to most of your users who maybe viewing your pages with a limited setting. And one of the foundations of a good web design is the ability to design within these limits imposed by your users’ least common denominator.

Go back