Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

7 Answers 7

up vote 9 down vote accepted

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. Width a variable with 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.

share|improve this answer
1  
+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. –  theotherreceive Jul 29 '10 at 10:12
    
+1 for the readability point. –  jessegavin Jul 29 '10 at 17:01
add comment

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.

share|improve this answer
    
Can you give me an example of a feature that wouldn't work with a variable layout? –  BenV Jul 28 '10 at 16:58
2  
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. –  RandomBen Jul 28 '10 at 17:36
    
Ah, I misinterpreted your last sentence. I understand now. –  BenV Jul 28 '10 at 19:23
    
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. –  Marius Gedminas Jul 28 '10 at 21:03
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

What about a mix-up? This displays the #content-section in a fixed width (70em) if there is enough room - otherwise the section is shrinked to 80% of the view-port/browser window.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
share|improve this answer
add comment

The advantage of a dynamic layout is that it works across all screen sizes, including mobile devices. It's harder work though to make things look good at all those sizes. The question to ask is - are your visitors going to be using mobile devices?

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.