Fixed width vs dynamic width

Question

I've noticed more and more sites have gone to a fixed-width layout, where resizing the browser window just causes scrollbars to appear, as opposed to a flexible layout, where resizing the browser causes the components of the page to "scrunch" together.
The StackExchange sites like this one are an example of the fixed layout. GMail and iGoogle are examples of the flexible layout. What are the reasons for choosing one over the other?

Solution 1

More complex designs can be very difficult to realize with variable width layout. So I imagine that plays a role.

There is also the fact that it is not comfortable to read text that is very wide. The column size on StackExchange sites is quite manageable and easy to read. With a variable width layout, you can not just extend the main text body across without it becoming illegible. Even Google limits the width of their search results.

Of course if you have a site where space is at a premium (like Google Docs and Google Maps) you really want to go with a variable width scheme to use all the available space.

Solution 2

Fixed with is much easier to developer for complex sites. Also, most fixed width sites will be around 1000 pixels wide. The reason is only 1% of browsers use 800x640 and 0% use 640x480. Check out the most current stats here. This doesn't include mobile though. Which is an entirely different ball game.

The value of variable width layout is that it allows people to use the website easily in a window that is not maximized.

You have to look at your audience and decide based off of what experience you think they want and if variable width is more important than other features that you won't be able to develop if you have to do variable width.

Solution 3

There is also a compromise between the two where you set a min width and a max width (using CSS) and then use percentage widths to make the rest flow in between the two extremes. For instance, you might want a left-hand menu column to not get narrower than 200px but the main content to flow. This technique enables your site to scale to the visitors resolution, without looking silly at extremely high resolutions or extremely low resolutions. HTML, after all, was designed to flow - it is a mark-up language and not the same as print.

This approach works well for relatively simple designs, such as blogs or ones that present a lot of textual information. Indeed, I use it on my own personal website. After all many people now have wide-screen or high-resolution monitors - my work monitor is 1680px wide - so why should they lose a large degree of real estate and have to horizontally scroll simply because a designer decided on a fixed width that suited their screen? In the end good design is about giving users the best possible experience - it's not just about what looks "pretty" on the designer's monitor.

Solution 4

You may not have to make that choice. A List Apart has an excellent article on Responsive Design. The main idea is that you can use media queries to catch changes in the browser window or viewport size and reassign CSS as necessary. There's a lot to read there, so check out the article for all the juicy details. But for the long and short of it (or should that be the "wide and narrow" of it?) look at the before and after pages of their example. The before page scales nicely up to a point, but if you make it narrow enough it gets a little clunky. The after page scales as well but also changes layout when you make it too narrow for scaling to work nicely.

Solution 5

According to Jakob Nielsen's 113 Design Guidelines for Homepage Usability:

67 Use a liquid layout so the homepage size adjusts to different screen resolutions.

It's also one of the The Ten Most Violated Homepage Design Guidelines:

Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.

View more solutions

Comments

[john_e]

Can you give me an example of a feature that wouldn't work with a variable layout?

[Ben Hoffman]

It isn't that features don't work with variable layouts. It is that you must spend more time testing and developing variable width layouts because you have to manage how chunks of your page handle moving around each other.

[john_e]

Ah, I misinterpreted your last sentence. I understand now.

[Marius Gedminas]

One problem with some variable layouts is that they don't have min-width set for the main content, so if your window is too narrow, you get text squished into an extremely narrow column, making it very hard to read. Fixed width layouts have the opposite problem when they hardcode the width rather than max-width and the main text cannot be read without horizontal scrolling.

[theotherreceive]

+1 for the text reading width point. Doesn't matter if the monitor is 1680px wide - you wouldn't see a newspaper put text across the whole page width.