Fixed Width vs Fluid Width Webpages - Technology Evangelist

A few colleagues and I have recently been kicking around thoughts on the benefits of fixed vs. fluid page width for web design. We haven't come to any conclusions on this yet - the issue will probably never be resolved - but thought it would be fun to open the discussion to all of you.

What are fixed vs. fluid width sites?

Fixed sites have a "fixed" number of pixels determining the width of the site. For example, a site may be designed to be 770 pixels wide in order to fit onto monitors that display 800 pixels wide by 600 high. A little hedging needs to be taken for the scroll bar.

Fluid sites use percentages rather than exact pixels to determine their width. For example, a site could be centered with 98% width, leaving 1% to the left and 1% to the right of the screen. The webpage's actual width would be determined by the visitor's monitor resolution and how large their browser window is set.

Advantages and Disadvantages

There are advantages and disadvantages to both. The main advantage to fixed width is the website owner has more control over the layout of their site. It will look the same to all who visit. Two disadvantages of fixed width are:

1. Horizontal scrolling for users with monitor/browser settings smaller than the site's minimum width.

2. Empty margins for users with monitor/browser settings larger than the site's maximum width.

The main advantage of a fluid design is that it displays the maximum amount of content possible for every web browser/monitor configuration. The biggest disadvantage is a loss of control over site layout.

What's Popular?

I decided to take a quick look at how the web's most popular websites are addressing this dilemma -- here's what I found:

Site	Fixed Width	Fluid Width
Yahoo*		X
Google		X
MSN*		X
Ebay*		X
MySpace	X
Passport		X
Amazon		X
Microsoft		X
Google UK		X
Blogger*		X
BBC	X
CNN	X
AOL	X
Go	X
Craigslist		X
Alibaba	X
IMDB		X
Ebay UK		X
Google CA		X
Comcast	X
Adult Friendfinder	X
Xanga	X
NY Times	X
Geocities**		X
Fastclick	X
CNET	X
About	X
Weather	X
The Face Book
Yahoo Search Marketing		X
MapQuest	X
Orkut		X
Mediaplex	X
YouTube	X
Google Australia		X
Yieldmanager	X
Hi5		X
StatCounter*	X
Match	X
Flickr	X
Gator		X
Bank of America	X
Download	X
Earthlink***	X/2	X/2
Casale Media	X
NetFlix	X
Friendster		X
Tribalfusion	X
Macromedia	X
Total	27.5	20.5

* Some sites have a fixed homepage layout, but use a fluid layout for the rest of their site. I chose to consider sites like this fluid since the vast majority of page views will be on fluid width pages.

**Geocities site can be fixed or fluid.

*** Earthlink's marketing pages are fixed, but my.earthlink and search are not.

It looks like fixed width is winning. Having looked at every one of those sites, the common theme I came across was marketing vs. research. Sites designed for marketing purposes, dating and news sites tend to have fixed layouts. Sites designed for research, such as search engines (like Google, Yahoo, Ebay, and Amazon) are using fluid layouts.

What to do?

Can any definitive conclusions be drawn from this data? Are there any set-in-stone rules regarding page width we're not aware of? Let us know in the comments below.

And let us know which layout format uses and why you chose. Thanks for contributing to the discussion.

We are currently fixed width, but are in the final stages of a fluid width implementation.

This is James Trickey from Gloscheck. My website is currently construction and I am designing an informative website for Gloucestershire with forums and a directory.

The website currently uses a fluid width, but the lack of control over the design and problems with getting images that resize has forced me to change the design over to a fixed width!

The biggest dilemmas with the fluid width have been the header image (which has had to be of a huge width to be resizable for different resolutions; also the navigation bar.

Hopefully once the site changes to a fixed width, these problems will be put to rest!

If you have a fluid design that you like, but want to make it fixed-width, this article might be useful. I wrote it for Blogger users but the same principle is applicable for most designs.

Looks like this discussion is a little quiet, but has anybody considered using a flex layout (fluid but with fixed min and max limits)?

We use this on approximately 30% of all of our client sites, and it satisfies our requirements for the lowest common denominator 800x600 while allowing the site to take up to full-screen on 1024x768. We usually limit our sites to 1040px width, just to ensure that the site fills maximum width up to the most common screen resolution, and this also avoids pvonelling's problem of text in one extended line on very large screen resolutions.

Our designers need to be a little creative about how their concepts are designed, ensuring that images have seams running vertically which can be extended or with cunning CSS cropping, but the result is worth it. This may have been a solution to James's problem.

Site's are built using usual fluid CSS columnar layouts and the limits are set by min-width and max-width for 'good' browsers and Javascript for 'bad' browsers. De-activating Javascript on 'bad' browsers fixes the site at 779px.

We reckon that with IE7 supporting CSS min-width and max-width, and the recent emergence of capable mobile internet devices still requiring lower resolutions, many more companies will turn to flex layouts combined with multimedia stylesheets when building websites.

George, that does sound like a good compromise. That gives you some control over the presentation, yet is flexible for many monitor dimensions.

As James points out, while HTML may be flexible, images generally are not with the exception of background images that can be repeated to create the illusion of a continuous image.

Robyn, combining Flash and fluidity sounds nearly impossible assuming you're talking about a site that's primarily Flash driven and not consisting of a combination of Flash elements with HTML.

pvonelling, great point about the readability of text at different widths. I find it difficult to read a line of text that runs border to border on a high-res screen and also can't stand text that wraps every 20-30 characters. But by giving me a fluid site, I can make up my own choices on what works best for my eyes rather than picking a one size fits all fixed width for everyone.

Mahavir, while a fixed width gives the designer more control, why not give the visitors more control instead?

Comments

1. Posted by: pvonelling on March 29, 2006 8:45 AM:

As a designer, there are definite reasons for using fixed width, largely due to the proper line length for text. Fluid web pages that allow text to either expand greatly or compress to very narrow widths can make text much less "readable." Many studies and much experience have found that there is a range of line length based on the text size that readers find easiest to read and follow the story. Good designers, whether for print or web, will follow this. Portals and application sites, which have discrete parts, can be more fluid since they tend not to have have large blocks of text.

Required fields marked with: *
Name*:

Email Address*:

URL:
Remember personal info?

Comments*:

HTML Tags you can use in your posts:
<b>Bold</b> = Bold
<i>Italicized</i> = Italicized
<a href="http://www.othersite.com">Link to Other Site</a> = Link to Other Site

Please keep comments on-topic. Contact authors or other commenters
directly for off-topic conversations.

Notify me of future comments via e-mail

Technology Evangelist Digest - Free Newsletter

Sign up for the free Technology Evangelist Digest to receive daily updates, editorials, and practical advice on emerging technology trends in hardware, software, webware, marketing and beyond.

Technology Evangelist Digest will keep you up to date on the technology trends that will help make you more productive and efficient both in business and your personal life.

Let's face it: If you made it to this line, you must have found something valuable on this page, right? Think about how cool it would be to have something free and interesting to read every day from Technology Evangelist by signing up today.

1. Fill in your email below,
2. Then click on the confirmation email you receive.
3. That's it. Your first Technology Evangelist Digest will arrive within 24 hours.