A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar. So, Liquid Layouts Template totally based on Percentage (%).

Advantages

  • If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is rarely a reality, but in theory, and if care is taken to ensure it, it is possible.
  • Fluid widths match the browser default layout method making this the “traditionalist” of them all. But does a developer’s want of site purity sometimes stand in the way of usability? I think it may.
  • The fluid layout makes the most out of available screen real estate. More content should be above-the-fold (meaning it’s available without scrolling in any direction).

Disadvantages

  • Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered. There is an expression: “White space sells” and it’s a truthful statement, even on the web.
  • If width limiters using the CSS property max-width — which isn’t supported by Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may very well, in your quest for layout purity, create a site that is at best difficult to use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see the problem.

Some Fluid Layout Advice

  • Use this layout method purposefully. Don’t do it because it’s “pure” and for no other reason. I suspect there has to be a better reason than this. If you do create a fluid width layout, make sure it fits in a large variety of view port sizes. Else, why bother?
  • If you’re making a fluid layout site and have fixed width content areas, you have essentially made a fluid/fixed width layout hybrid and can only be as narrow as the width defined by the fixed width content section or largest object. Be careful. If you’re going to make a site that is fluid, make sure it’s really fluid and not just in name only.
Advertisements