Building Good Websites with Fluid Layout
Tuesday, June 16th, 2009
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
