: Fixed width vs dynamic width 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

@Radia820

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.

Vote Up Vote Down

@Goswami781

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?

Vote Up Vote Down

@Murray432

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%; }

Vote Up Vote Down

@Courtney195

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.

Vote Up Vote Down

@Goswami781

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.

Vote Up Vote Down

@Welton855

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.

Vote Up Vote Down

@Angela700

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.

Vote Up Vote Down