What is a liquid (fluid) web site design
Fluid (or liquid) design has gained a lot of attention since web designers started using CSS for web sites. Sure, why not. But what is a liquid design for a site owner?
First of all, why is it called fluid?.
A design is called fluid (or liquid, flexible) when the width and the height of the page layout adapt to screen resolution or browser window.
Pretty simple, right?
Fluid design is achieved by using Cascading Style Sheets for layout and using flexible measurement units (%, em) for specifying block size, paddings, margins, etc.
So what are the benefits of a liquid design?
Flexible site layout has a couple of benefits, such as:
- a visitor is always able to see the entire width of the screen (on small resolutions/browser window)
- the site expands on larger resolutions/windows so there is no extra white space (usually on the left)
- when the site expands in width, scrolling vertically may not be necessary
Generally, it is a good idea to make your site layout fluid.
But there are a couple of buts.
Long lines are harder to read on larger screens when the site expands to full width. So it is wise to use some left and right margins on the main site layout. It won’t affect smaller screens much, but will be helpful on larger ones. Just need to find the balance for that, though.
When using flexible design layout, you or your designer need to work on making the site look equally right on all browsers, while with fixed layout everything works fine in most browsers (except Internet Explorer, probably, though). The designer has more control on how elements will be displayed on the fixed layout.
But the advantages of the liquid design are for the visitors, so it is worthwhile spending some money on developing a site on CSS.
Related posts: