14

Possible Duplicate:
For websites, is it better to have a variable width layout or a fixed width layout?

We are about to rebuild a web based application and currently the UI is fixed width, we've taken a look at a few other applications and noticed they're fluid.

I'm a fan of fixed width layouts because I have a widescreen monitor but I'm noticing more and more applications are using fluid layouts.

What are your thoughts on this?

Just took a look at our Google Analytic stats and were noticing the most popular screen resolutions are 1024x768, 1280x800 and 1280x1024. From that point on the screens get larger/wider.

Improve this question
0

5 Answers 5

Reset to default
9

A fluid layout with limits can offer the best of both worlds. The layout fills the width of the browser window, but at a certain limit (1200 pixels, for example) the layout won't get any wider. Thus users with 30" widescreen monitors will be able to use a full screen window without ridiculous horizontal pages.

Within the overall width, text size is specified such that the text can still be resized as the user requires.

There is no fixed minimum width for the layout, but there is a set minimum that the layout will support. For example, you can design the layout so that it still looks good even if the user resizes the window to 600 pixels wide. Users can make their browser window smaller than this, but they may end up with scrollbars or a messy layout.

This approach can maximise usability and aesthetic appeal for most users, while ensuring that the site remains at least functional for all screen sizes.

Improve this answer
3
  • I just took a look at our Google Analytics and noticed that 23.28% of the visits in the last month had the screen resolution of 1280x800, followed with a very close 21.79% were using 1024x768. then we have a 16.72% who are using 1280x1024. the screen resolutions further down seem to get larger/widescreen. But this all varies, yesterday 1024x768 was the most popular screen resolution.
    – el baby yeh
    Oct 27, 2009 at 20:30
  • Bennett do you have any examples of websites that currently use this fluid layout with limits? i had a look around, is this website (456bereastreet.com) using that technique?
    – el baby yeh
    Oct 28, 2009 at 21:27
  • Yes, exactly like that.
    – Bennett McElwee
    Nov 6, 2009 at 11:01
4

I agree with Bennett, fluid + min + max limits. I've heard 55-character length lines (CPL) is a good guide but have not sighted conclusive evidence for that, but it's better than no guideline at all. Don't forget if you don't have a print stylesheet (and of course if you do) that if you expect users to print stuff (and don't make assumptions here - people will print/PDF pages more often than you think) then it should work at around 660px for an A4 portrait page, plus of course all the other standard resolutions appropriate for the people you're designing for, based on your persona profiles.

Improve this answer
3
  • Excellent point. All too often, beautifully laid-out web pages turn into disaster areas when printed. A fluid + limits layout can definitely help here.
    – Bennett McElwee
    Oct 27, 2009 at 23:20
  • On characters per line, there seems to be a HUGE amount of variation in what people recommend. Anything from 35 to 95 (though somewhere in 40-70 range seems most common, so 55 feels like a good centre-point). I'm sure I've read an article which made an evidence-based case that reading speed is actually not slowed significantly by very long lines of text. Though of course speed isn't the same as perceived usability or comfort - people might feel like they're reading long lines less comfortably, or more slowly, when in fact their speed is the same.
    – Andrew Merryweather
    Oct 28, 2009 at 12:42
  • Hi Andrew, you're right - there was a uni study with the max line length 95 CPL and the outcome was no reduction in reading performance at 95 compared to shorter lines.
    – Nathanael Boehm
    Oct 29, 2009 at 4:25
3

The answer to this question is a big fat "it depends".

I gather you're creating a backend interface (some sort of CMS perhaps?) so depending on how your interface is structured, you could consider using portlets (like iGoogle).

That way the wider the screen, the more you can fit at eye level. There are other patterns that fit nicely in an elastic layout, you can limit the amount of elasticity and so on...

But again, it would be nice to know more about the app you're trying to redesign to be able to hlep you more.

Improve this answer
1
  • We're rebuilding our survey tool.
    – el baby yeh
    Oct 27, 2009 at 20:23
2

The "fluid-to-a-point" is definitely something worth considering, although it depends very much on your content (and what you know of your user base). On a recent project, we've been constructing components for which we know there will be a small amount of information, and making these fluid really seemed nonsensical - at greater widths (even limited ones), the small amount of information in some blocks on the page made a fluid layout look downright daft.

Relying on current users/stats is definitely useful, but possibly a little limiting since the demographics will probably change quite quickly, and if you want your design to last a few years it might be worth planning for an increase in higher resolution visitors.

I'm noticing more and more applications are using fluid layouts.

Apps like yours or apps in general? I'm kind of with "unknown" here - certain layouts may be more appropriate depending on what your app actually is and what it offers.

Improve this answer
1
  • apps in general, but I took a look at other popular survey sites and it varies. SurveyGizmo uses fixed but a fluid header. SurveyMonkey seems to be fluid Zoomerang seems to be fixed but aligned to the left.
    – el baby yeh
    Oct 27, 2009 at 20:25
1

well, if it's a CMS, chances are few people will use it, so it's easy to gather some resolution info.

I prefer a liquid UI, even though i have two huge monitors (be careful to use alternative background rows and highlight for current on tabular data).

I saw that most people who have 24" - 30" monitors don't use maximized windows (mac users especially).

Improve this answer
1
  • I do all the time. Even though I'm a Mac user, I strongly dislike to glance to other distracting stuff in the background.
    – LuckyMethod
    Feb 24, 2010 at 0:19