The Anatomy Of Liquid Layouts (Part 1)

Liquid layouts have been around for quite some time. Some while ago it was thought that liquid layouts are dead. But liquid layouts are far from dead. Designers have shown that when implemented properly liquid designs can look as beautiful as fixed width layouts.

What are liquid Layouts?
As the name suggests liquid layouts are fluid and flexible. In liquid layouts widths are defined in percentages instead of pixels. The characteristic which makes liquid layouts special is that the layout scales with the size of the browser. So if you resize the browser the layout will resize accordingly.

So whats the big deal?
Liquid designs are very helpful in making the site accessible. These days there are so many diverse ways to access a site. People use different screens, resolutions, browsers, operating systems and even devices to view websites. Liquid layouts ensure that the layout of a site doesnt distort even when viewed in different resolutions.

Fixed Width
Fixed width layouts are made keeping a particular screen resolution in mind. They have fixed dimensions The layouts can at times look undersized over oversized if viewed from different screen resolutions. For example a site designed for 1024 x 768 px would distort when viewed from 800 x 600 px resolutions.
There are many advantages of using fixed widths, which make them so popular. They give the designer more control over the structure of the site.

This is the Part I of this post. I am working on the part two of this post which will feature the implementation of liquid layouts and some other stuff :)