18

I'm in the early stages of designing a web application (a network management application). And I can't really decide if to go with a fixed width layout (say 960px) or a variable (full browser width) layout.

It seems that web apps that has a single view (google examples; maps, reader, gmail, new google groups) tend to be full-browser width. I guess you could say that they adhere to some kind of canvas+palette pattern.

For applications that more resembles "web sites" in that they have multiple views that can be very different from each-other seems to choose fixed width layout (for example; tender.com).

A user experienced with desktop apps might feel unfamiliar with a "full browser" app that has different main views. Frankly, I can't really think of a single desktop app that has different modes where the layout of the main window changes drastically (examples welcome).

So I'm leaning against using a fixed width layout, only for the reason that when the user presses one of the top tabs he will not scream in anger when the content of "app" changes to something totally different (from a list of something something to a network topology view for example). Are my assumptions wrong?

Somewhat related to:

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

Improve this question
2
  • 3
    How exactly is this a different question than the one you linked to?
    – Charles Boyung
    Commented Jan 4, 2011 at 18:39
  • 1
    I agree the question is somehow different than the linked one: there we speak of websites, here we speak of web applications. The different context may prompt different answers and considerations.
    – FOR
    Commented Jan 7, 2011 at 13:20

4 Answers 4

Reset to default
12

I used to favor a fluid layout because I wanted surfers to take advantage of larger monitors when they pressed Ctrl-+ (or Cmd-+) to increase font size. Long time ago, about 2008, fixed-width pages looked really bad when you pressed Ctrl-+ because nothing else increased in size -- the tables and div kept the same width, and the text overflowed them.

However, with current browsers, pressing Ctrl-+ now acts more like a "zoom" than an "increase font size" command: the entire page is proportionally and nicely enlarged. Currently, I prefer:

  • Using fluid width for pages where a grid- or table-like data or other info is being displayed. The key deciding factor is whether the user will see more information if she enlarges the browser's window. You mentioned Google Maps, Reader, and Gmail, all excellent examples IMO of apps where the user benefits from having a larger screen.

  • Using fixed width pages for descriptive pages or any page were resizing the browser will not result in additional information being displayed. Examples are this very stackexchange page and Apple's iMac page.

FWIW, I have found that designing for fluid width to be more trouble than worth for descriptive pages.

Improve this answer
0
6

I agree with Hisham in general, but an important consideration for fluid designs is the kind of content being displayed. In some cases it's not so much grid or table data, rather whether the content will work in fluid.

The reason gmail works is because email is primarily text and wraps well. However, it doesn't work seamlessly for all users because optimal line lengths for text are usually around 70 characters. For those of us with 22"+ screen widths, email message line lengths are too long. A big email message will be difficult for the eye to track multiple lines. That's why Hisham's second point makes sense, but it's not so much because of additional info where text is concerned.

Fixed width for text is actually a better choice because you can set the text size and UI width to ensure most readers are seeing an optimal number of characters per line. Since zoom now generally makes everything bigger and doesn't just increase text sizes you can expect fixed width designs to hold their integrity better.

Improve this answer
2
  • 1
    +1, especially for mentioning reading line length. I used to favour fluid layouts, but they don't work well when the lines for the main text get too long to read comfortably.
    – Marjan Venema
    Commented Jan 9, 2011 at 20:12
  • 1
    One option is to remain fluid, but have a maximum width so that lines don't get too long.
    – ICR
    Commented Jan 14, 2011 at 12:04
1

It'd depend entirely on a) the app and b) the users. That said, for a true application, I think the use of full-browser interfaces are probably limited in usefulness. Even on the desktop you don't see too many apps go full-screen unless there is some sort of 'canvas' area that can benefit from expanded size.

One exception is perhaps creating a web app for mobile devices, where your already limited screen size would push you towards full-screen layouts.

Improve this answer
1

This is a short answer, but true:

If your app is a rich, desktop-class web-app like MockingBird or 280 Slides, use the full browser width and height, but don't use a scrollbar for the entire page.

On the other hand, if your web app is like Google Search, Twitter, Facebook or perhaps this website, consider the fixed lay-out, or fluid.

Improve this answer

Your Answer

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

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