Due to different screen resolutions, the user experience browsing a website might be different. Is it better to layout the website with a fixed width? (and if so should there be different static widths for standard resolutions?) Or should a website always be laid out in variable width?
I don't think there's an easy answer here, because, ultimately, it depends on what you're building and who you're building it for. Both fixed width sites and variable width sites have their advantages and disadvantages.
One thing I should point out here, I will not be talking about mobile experiences for fixed / fluid sites, because mobile sites are best when the design is specific for mobile devices, not a port of a desktop site to a mobile platform.
Fixed Width - Advantages
A fixed width site is a more consistent experience and is faster to develop than a variable width site. It also allows for the designer to have more control over the presentation because you can set hard values for widths, line lengths, typography sizes, etc. It's also ultimately easier to maintain than a variable-width site.
Fixed Width - Disadvantages
On the other hand, fixed width designs begin to fail when edge cases appear. Right now, it's very common for people to design sites for a 1024px width resolution monitor, but there are still people out there with lower resolution machines. Right now, I'm working on an application that was designed using a 960px grid; I took a look at the analytics today and noticed 3% of the users were on 800 x 600 monitors, and about 5% total were at resolutions below 1024 x 768. Those users are probably getting a pretty bad experience because the site is fixed width.
Fluid Width - Advantages
Fluid width allows the design the expand based on the user's settings; the design adapts to them, which is a good thing. This allows the site to maintain proportional negative space, so the site never feels too cluttered or too open (unless it was specifically designed that way).
Fluid Width - Disadvantages
Responsive Web Design
A few people have shown examples, but not referred to this technique by name yet. Ethan Marcotte recently coined the term to describe fluid layouts that can change completely based on a user's screen resolution (see details here). This is a hybrid of fixed width and fluid width - it allows you to set minimums and maximums so that the media or line lengths don't get out of control, and it also allows for the design to adjust to the user's settings. Of course, this technique also has its own advantages and disadvantages. While provided a layout specifically picked for a user's settings, this type of site is difficult to develop. Not all browsers support the media queries required to do this. Plus, you are essentially developing multiple layouts, extending the amount of time it takes to build and maintain.
I believe it's impossible to just lay out a blanket "Always use this" or "Never use this"; I would say that you should always evaluate your needs before making a decision. I feel for the majority of cases that a fixed width layout will serve your purposes, but that a fluid or responsive layout can provide a much better user experience, just at the cost of extra difficulty.
The problem with using 100% variable width is that it really does not display well for users with the smallest and largest screens. I will generally design my main content section for the norm by setting a min/max width and then I will center the important (fixed) content. You can then have variable width design elements (since they are not as important) that stretch/shrink to fill the screen.
This way the important information always(hopefully) displays correctly while looking good in many resolutions.
I am not a web designer, but I think ideally you should make a fluid layout. That is, a layout that will automatically (and dynamically) change according to the current width. That way, narrow devices like phones are nicely supported, as well as all the various display widths.
The blog post Finally, a fluid Hicksdesign both explains and domonstrates the technique. It has 3 colum, 2 colum and one colum layouts, which are selected according to browser window width.
Text is hard to read once the line length gets too long. So for any variable width sites, there does need to at least be a maximum width for any text areas to maintain readability.
It is a lot harder to make a variable width site look good.
Depends on what I'm working on, but I still tend to lean towards fixed width sites. The reason is because it allows you to better control the ui and keep it consistent across screen sizes. Lots of fluid width sites look terrible on larger/smaller monitors (depending on what they were designed for).
General rule for me:
- If the usability of the site is largely dependent on the interface and/or the content is mostly text: fixed width
- If the site has minimal interface, but the content is largely visual (photo sites or a maps app, for example), then I go for fluid.
Here's a great breakdown of some pros/cons: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Whenever I can, I try not to set the specific height and width of a object in
px but in
I'd suggest accounting for variable width, or providing an alternative layout for wider screens.
If you do go for a fixed width - please ensure it isn't a tiny one! I've seen some sites with a 500 or 600px width that makes reading the site like scanning the Yellow pages.
I've long been a fan of The Man In Blue's approach of providing alternate layouts based on the available width: see live demo here
You may want to design your website's layout in landscape orientation. More and more widescreen monitors are being used, with large resolutions of 1920x1080 (this one being the most common). Have you ever tried maximizing a browser window displaying a portrait fixed layout on that? It's like half to two-thirds of the screen filled with your background color/image.
It is nice that Windows 7 allows you to quickly resize a window to half the screen and stick it to the side: WindowsKey + Left/Right
Variable width is probably the way to go, because with a fixed width, some people might think your website is too small for their monitor and some people might think its too big for their monitor.
It depends on the content of the website. If it has a lot of text, variable width makes more sense as the text can spread out and the users can read it more efficiently. If it is more like a marketing website where appearance is more important, then go with fixed width as it is much harder to make a fixed-width website look great.
Any assumptions you make in designing a fixed-size layout are wrong for some of your users. The only way to provide a satisfying experience for everybody is to use a flexible, responsive design.
Two issues (trying to avoid duplication):
You can't assume that the browser is full-screen; analytics that report screen resolution only tell part of the story.
You can't assume that users are using the same font sizes you are. Lines that are too wide to read at your font size might not be too wide to read for someone who had to increase the font size a few notches; conversely, the column that you set a fixed width for based on your font settings may mean that user sees five words per line or something.
To be usable to all users, your web design needs to use all and only the space the browser gives you. Trust the user to have sized his browser to optimize his own experience; you should then work within those bounds. This approach works on 30" monitors and 7" tablets (and even phones, if you didn't make a mobile-specific version).