33

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?

Improve this question
1

11 Answers 11

Reset to default
17

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

Unfortunately, fluid width designs aren't impervious to edge cases either. When widths get too skinny or too wide bad things can happen, especially with text. Line lengths that are too short or too long are essentially unreadable. Additionally, many forms of media, such as images or Flash objects, are difficult to scale in fluid-width designs; IE requires javascript to resize the images, otherwise they get pixelated.

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.

Improve this answer
2
24

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.

Improve this answer
1
  • 5
    Instead of just having max/min cutoffs, one could also experiment with reading widths that change non-linearly with screen widths. For example, using a logarithmic or sin based function to control the falloff of reading width as screen width increases.
    – Scott Newson
    Aug 9, 2010 at 21:01
7

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.

Improve this answer
6

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.

Improve this answer
3
  • 3
    Agreed. Variable width is harder. But it is what you should do. (Isn’t the right way always the harder way? ^_^)
    – Robert Fisher
    Aug 10, 2010 at 20:37
  • 1
    I disagree. The right way is always the simpler way - Occams razor!
    – Mongus Pong
    Aug 11, 2010 at 8:47
  • I think max-width is one of the most important CSS properties.
    – August Karlstrom
    May 1, 2014 at 16:04
2

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/

Improve this answer
1

Whenever I can, I try not to set the specific height and width of a object in px but in %

Improve this answer
3
  • While good in theory, this can make certain things unusable with very small widths (i.e. nested comments are usually unreadable on my BlackBerry)
    – Robert Fraser
    Aug 10, 2010 at 6:04
  • Unfortunately % only works within the size of the parent element. I am not sure it is possible to fill the screen with only % as unit.
    – txwikinger
    Aug 14, 2010 at 5:20
  • It can fill the full height and width of the browser window if It is below the <body></body> tags.
    – megubyte
    Aug 14, 2010 at 12:45
1

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

Improve this answer
1

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

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
1
  • It is well known that longer line lengths make text harder to read, so I’d disagree with your reasoning.
    – Robert Fisher
    Aug 10, 2010 at 20:35
0

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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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