Fixed Width or Liquid Sites?
Article ID: KB101620
When developing a web site, one of the initial
considerations is whether to use a fixed-width
layout or a liquid layout.
Fixed-width layouts, as the term suggests, are
sites where the main content area of the layout and
design has a static pixel width. One example of a
fixed-width site is
www.redenvelope.com. While the content area does
remain in the center of the browser window when the
browser window is resized, the actual width of the
content area does not change.
Figure 1.
www.redenvelope.com layout
remains the same width no matter how large or small
the browser window is.
Liquid layouts describe sites where the entire
layout of the site stretches or shrinks to fill the
entire browser window when the browser window is
resized. One example of a liquid site is
www.amazon.com. While the left and right columns
have the same width, the center content area resizes
and flexes according to the width of the browser
window.
Figure 2.
www.amazon.com layout fills the entire
screen as the browser window is resized.
Other sites, such as the home page of PixelMill,
combine liquid elements (the header and footer) with
a fixed-width content area. For the purpose of this
document, layouts such as the home page of PixelMill
will be considered as fixed-width sites, since the
main content area is fixed-width.
Figure 3. www.pixelmill.com has a liquid header
that expands to fill the screen, but the main page
content area is fixed-width.
Pros and Cons
A liquid layout will usually help a
site to be more accessible by being
“device-independent” – that is, it won’t matter if
your user has an 800x600 resolution monitor or a
1600x1200 resolution monitor. Your site will expand
to fill the screen in either case, so users with
smaller screens won’t have a horizontal scrollbar as
they might with a fixed-width site that was wider
than their screen.
Liquid layouts are also helpful in cases where
maximum real-estate of the screen is preferable. For
ecommerce sites and catalog layout pages, liquid
layouts are often used because you can display more
products across the screen. One example is the
catalog layout used at www.pixelmill.com. When the
screen is smaller, two products are shown. As the
screen is resized to be larger, the products “wrap”
so that more products are shown.
Figure 4. Product catalog at www.pixelmill.com
features liquid layout. More “columns” are added as
the screen size is increased.
Liquid layouts, however, result in less control
over the layout of a web site. As the text and
content expand to fill a screen, you lose control
over where text and images show up. From a marketing
standpoint, you then have less control over what
your viewer sees, and are less able to guide your
viewer visually to what you wish them to focus on.
It is for this reason that many major ecommerce
sites choose to at least have the main pages use
fixed-width layout. With fixed-width layout, you can
position ads more easily, create an area that is the
main focus visually, and have a better “wow” factor.
(Amazon.com is one of the major companies who
chooses not to go for a wow factor, interestingly
enough, and sticks with their liquid – but not as
attractive – layout.)
Liquid layouts can also make a site less usable
when displaying articles or long blocks of text.
Narrower columns of text are easier to read because
the eye doesn’t have to travel as far to go back to
the left side to the next line of text. Many news
providers, blogs, and other providers of content
will have fixed-width content areas for this reason.
Recommendation
We recommend both liquid layouts and
fixed layouts, and even a mixture of both, depending
on what the purpose of your site or pages are and
what your market is like.
If your site is mainly an ecommerce site, with
most pages being in a catalog layout, then a liquid
layout for your catalog pages will give you the
maximum use of screen space. You may consider a
fixed-width layout for the home page only if you
will be marketing heavily on the home page.
If your site will have a lot of text content,
then a fixed-width layout is probably better for
most pages.
The PixelMill site itself demonstrates this
flexible use of both fixed-width and liquid layouts.
The home page and main product category pages use a
fixed-width layout which allows for precise
placement of content and images. The support article
pages also use a fixed-width layout for more legible
text. The actual catalog pages which display
multiple products from search results, however, use
a liquid layout to use as much screen space as
possible when viewing products.
Think about your market and the purpose of each
page in your site, and determine which pages would
benefit from a fixed-width layout or a liquid
layout.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101620.htm
permalink to this article:
http://www.pixelmill.com/support/kb101620.htm
Back to top