Choosing the Right Search Results Page Layout: Make the Most of Your Width

Optimizing for Your Best Customers

The take-away here is that only you and your customers can determine the best fixed-width layout for your site. If your site is like most ecommerce or content sites, the overall share of 800 x 600 page views is anywhere between 1 and 5%. Can you ignore these customers and optimize for higher resolutions? That depends on your business model.

If you are a content provider, you may want to ignore that 1%, because you get paid by page impressions. However, if you are a retailer, you may discover that those 800 x 600 page views are coming from large enterprise companies that buy often and in large bulk orders. So, that 1 to 5% of page views may actually be responsible for a whopping 5 to 20% of your sales! Thinking about optimizing revenues, it makes perfect sense that Staples has made its search results narrower, for 800 x 600 screens, while Amazon search results pages are wider, for screens with widths of 1280 pixels and above. Presumably, Amazon has discovered that their biggest profits come from affluent consumers who have wider screens with higher resolutions.

It’s really up to you what fixed-width layout you choose, but make sure the metric you use fits your revenue model and optimize for your most profitable customer base. Of course, you can alternatively do what Google does and choose to invest in a good liquid layout that is optimized at every screen resolution that is important for your customers.

Handling Margins in Fixed-Width Layouts

When choosing a page layout, it is important that you ensure your pages behave gracefully on all popular screen widths. Liquid layouts like that shown in Figure 2 are usually left aligned and handle extra width gracefully by increasing the white space between columns or increasing the width of the primary column on a page. Fixed-width layouts, on the other hand, are generally centered and absorb any extra space by adding neutral margins or panels at the left and right of a page’s fixed-width main content area.

For a usable, fixed-width search results layout, there are only two optimal choices: centered or left aligned. A centered layout, like the one on Staples.com, divides the extra space at the margins in half, as shown in Figure 3. In contrast, sites with left-aligned, fixed-width layouts—such as the StubHub Web site pictured in Figure 5—put all of the extra space on the right side of the screen.

At first glance, a left-aligned, fixed-width page layout might seem like a logical choice. The search results start at the upper left on each page, which seems desirable, because in the West, we read from the upper left to the lower right. However, in fixed-width layouts, the margin on the right quickly becomes disproportionately large in comparison to the rest of the page.

In my field research, I’ve observed people’s reactions to the large, empty spaces that appear on the right in fixed-width layouts. All that space devoid of content causes what I can only describe as pixel agoraphobia. When that space first opens up, people usually grimace and attempt to reduce the width of the window to remove some of the empty space. Most Windows users who have maximized their browser window do this by clicking the Restore Down button on the window title bar. This sometimes results in a window size that is too small for a site, so users must then adjust the window size manually. When your customers are busy fiddling with the width of the browser window, they’re not shopping or looking at ads on your site. In fact, they’re usually becoming more and more irritated—and that’s before they’ve even begun interacting with your Web site’s fabulous functionality!

In contrast, a centered layout—especially one that uses a neutral or darker color for its margins or side panels—divides the blank space into two halves, thus reducing the effect of pixel agoraphobia. So, if you insist on using a fixed-width layout, I generally recommend opting for a centered layout for your search results pages, with darker or neutral-colored side panels, especially if a significant percentage of your customers have wide, high-resolution screens.

In Summary

When deciding on the layout for your search results pages, clearly define the appropriate page behavior at all screen sizes your audience uses. Design your search results using a liquid layout if your visual treatment and level of technical expertise allow it. If you are forced to choose a fixed-width layout, be sure to study and understand the traffic and revenue metrics for different screen resolutions. A good middle-of-the-road solution is to make the main content area on your site 1003 pixels wide, so there is no horizontal scroll bar at the most popular 1024 x 768 screen resolution. If a large percentage of your customers use wider screens, opt for a centered layout for your search results pages, with darker or neutral-colored side panels. Whenever possible, do usability testing on your search results pages at the various screen sizes that are appropriate for your audience. 

Bibliography

Budd, Andy. CSS Mastery: Advanced Web Standards Solutions. London: Friends of ED, 2006.

Griffiths, Patrick. “Elastic Design.” HtmlDog, January 2003. Retrieved March 6, 2009.

Koblentz, Thierry. “One Clean HTML Markup, Many Layouts.” TKJDesign, October 2005. Retrieved March 6, 2009.

Olsson, Tommy. “Relatively Absolute.” AutisticCuckoo, December 2004. Retrieved March 6, 2009.

Shea, Dave. The Zen of CSS Design: Visual Enlightenment for the Web. Berkeley: Peachpit Press, 2005.

—— Zen Garden. Retrieved March 6, 2009.

Weakley, Russ. “Liquid Layouts the Easy Way.” MaxDesign, December 2003. Retrieved March 6, 2009.