Website Layout: What Works Best--Fluid, Centered, or Left-justified?

by Dr. Bob Bailey

November, 2002

How should you lay out your website? Michael Bernard and Laurie Larsen from Wichita State University published a study where they compared three layouts: Fluid, Centered (fixed-width) and Left-justified (fixed-width).

Thanks to Mark Powell at Wordscapes for allowing us to use these icons.

The "Fluid" layout is the most traditional method, and allows the contents of a Web page to fill an entire window. In other words, it expands and contracts with the size of the window. The fluid layout is the simplest to implement, but is sometimes perceived by designers as being less modern. The "Centered" method allows users to focus on a narrower layout no matter what screen resolution they are using. The "Left-justified" method is usually slightly wider than the "Centered" layout, and is a popular method for text presentation, particularly with multi-column layouts.

With both the "Centered" and the "Left-justified" layouts, users do not have to visually scan as far horizontally, but when used on a 1024 x 768 pixel resolution monitor, it may require more pages to be scrolled vertically. Also, the latter two layouts cause considerable white space to show when a site is designed to optimize a 800 x 600 pixel resolution, and then used on monitors that are set for a 1024 x 768 pixel resolution.

The researchers had 20 participants search for specific information. Like almost half of the websites used today (thecounter.com -- September, 2002), the websites in this study were designed for 800 x 600 pixel resolutions. The test subjects used 17-inch monitors set at either 1024 x 768 or 800 x 600 pixel resolution. Half of the questions could be answered on the homepage, the other half on a second level page.

They found no reliable differences among the methods in search time, accuracy of finding information, or in search efficiency (number of clicks, use of the Back button, etc.). However, their users reliably believed that the "Fluid" layout was best suited for reading and that it allowed them to find key information more easily. In addition, users reliably preferred the "Fluid" method.

In July of 2001, Steve Kangas of NetConversions (Kangas, 2001) published an evaluation of several of the most popular home pages on the Web. A total of 87 websites were surveyed using a combination of manual checks and automated page measures. He reported that 49% were "Centered" with a fixed-width, 28% were "Left-justified" with a fixed-width, and only 23% used a fluid design that allowed content to grow or shrink with different browser window sizes.

Jakob Nielsen and Marie Tahir evaluated the homepages from 50 websites (Nielsen and Tahir, 2001), and reported that only 18% of them used a "Fluid" method (they referred to them as "liquid" layouts). The sites they reviewed were prominent in some way, including top-10 lists, world's largest companies, certain government agencies, well-run small companies and non-profit institutions.

From these studies, it appears that about one out of five websites (only 20%) currently are designed using a "Fluid" layout. Unfortunately, the layout most preferred by users, the "Fluid" layout, is the one implemented least often by designers.

References

Bernard, M. and Larsen, L. (2001), What is the best layout for multiple column Web pages? Usability News – Summer 2001.

Kangas, S. (2001), Layout and content of popular sites, netconversions.com.

Nielsen, J. and Tahir, M. (2001), Homepage Usability: 50 Sites Deconstructed, New Riders Publishing, 40.