Is it wise to use a Fluid Layout?

Question

Google Labs Browser Size

---

I've always preferred fixed-width layouts over fluid-width layouts, one of the main reasons is that I'm able to better understand how the whole picture will be without having to worry about the screen resolution.

But now the "picture" has changed, there is a high discrepancy between the lowest and highest resolutions used by most users nowadays and they seem to be here to stay.

I've a netbook that only supports 800 pixels or 1024 pixels wide; I also have a 22" monitor that supports 1650 pixels and, 24" monitors that support 1920 pixels and more are becoming pretty common.

I've pretty much "ignored" the 800 pixels users for some time and I've been developing with fixed 950/960 pixels wide, I also notice that popular sites (SO for one) either use this approach or the fluid one.

For text (almost) only websites (like Wikipedia) I don't see a problem using the fluid system but what about all the other websites that depend on images / video to create interesting content? Social Networks, Classifieds, and so on... What is (will be) their approach to address this issue?

Seam Carving seems like a good option for the near future but it hasn't matured enough (neither browsers nor jQuery nativelly support it at this point in time), I also feel like users wouldn't understand it, get confused with it and as a consequence abandon the website.

The de facto standard on the web is still 1024 pixels wide, and leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong. So what are our options?

I would love to hear what you think about this and your experiences with both fluid and fixed systems.

PS: Popular websites using either one of these systems are also welcome, I'm specially interested in seeing non-text websites that use the fluid system.

---

EDIT: I just saw this answer and I got kinda confused about the difference between fluid and liquid layouts, aren't they supposed to be exactly the same?

Skite

Don't forget mobile users. Screen resolution can be there something like 320 x 240. – Orison

@Juha: Yeah, but mobile browsers normally resize the content to fit on the screen no matter what, at least that is my experience. – Skite

See also #1414102 for more on this endless argument. – Idalla

@ Alix: Check my answer. Hopefully it will help. – Congelation

Answer 1

I generally think that fluid layouts are a good idea. The problem starts when your fluid layout starts to get really wide with high resolution screens - there is a limit to how far the human eye can track horizontally without losing the vertical positioning. That is why newspaper columns, for example, are always rather narrow.

Try to look at wikipedia in a high resolution screen, and you'll see that they limit the maximum width to something around 800-900px - more then that (assuming a rather standard 12pt font) and people stop being able to read until the end of the line and then effortlessly find the start of the next line, and the whole thing breaks into a mess of eye and neck strain.

On web sites I build, I use max-width to limit the maximum width of the text content (and in that I also include images and other stuff) to about 720-800px, which with sidebars and such can possibly get to around 1000px. If the screen is wider then that, then either center the content of left align it (right align on RTL web sites) - both work well.

But you have to design your layout so that it flows when the available width is narrower - this is very useful for people with netbooks (which are rather popular now and I expect will become more popular in the future), smart phones and even small screen mobile devices. Such mobile devices more and more feature standard browsers and you should address this in your designs - even if a mobile browsers can reduce your website somehow, the "mobile mode" usually does this by messing up the page and killing your intended user-experience.

Histrionics

Great answer, provided me some very good insights. Thank you. – Skite

Answer 2

leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong

I’d disagree here. If you’ve got a monitor with that high a resolution, you’re probably not running with a maximised browser window. And even if you are, are you really fussed that the content’s all in a fixed area in the middle? Really?

As long your site has a decent, useable layout, I don’t see the problem with space either side on high-res monitors.

Disbelief

@Paul: Like I said before I've 22" 1650 pixels wide monitor. I always use my browser in a maximized state and I must say that it makes a impression on me having 43% of my view port blank on SO. With a 24" monitor I would've 51% of the view port unused. It's a terrible waste of space. – Skite

Fair enough. If you can think of something good to do in the space, super. Just because space is there doesn’t mean you have to put something in it though. – Disbelief

perhaps users with large size screens can zoom the site. – Velda

that's what i do (compute using my tv) – Fulltime

Answer 3

There are ways to create different @media rules inside of a stylesheet—W3C has something on this—and although it's a big Schroedinger's Cat whether the handhelds' browsers will obey the rules, it's fairly safe to assume that, even if they don't, they have big enough and well-ratioed screens to just use a scale model of the site as it appears on desktops.

Seems to me that it was in the devices' manufacturers' best interests to make them compatible with web sites that predate the advent of such devices by 5-10 years.

And if not, it's their problem.

Gloomy

You can use device-width in your media query to provide different CSS for smaller and bigger monitors. – Disbelief

Sure: it’s not super well-supported at the moment, I think you’ll be out of luck in IE at least. – Disbelief

Answer 4

I approach the problem from a different angle. Have a fluid layout but give it a minimum width (rather than a maximum width). You can achieve this with CSS.

The problem with the images is not such big. What you do is the following:

1. Upload your image at the maximum size you expect to have.

2. Make the image fluid as follows:

   <img src="http://example.png" style="width:32.5%">

As you resize the page the image will re-size itself at the percentage width. Just make sure that you don't have any width or height attributes in the image. I call it superlastic :)

Masseuse

Humm... Interesting approach. Do you know of any website that uses this method? – Skite

I am guessing that by letting the browser choose the image size it'll have strange artifacts, no? – Skite

Answer 5

Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.

• http://lessframework.com/
• https://github.com/thatcoolguy/gridless-boilerplate

Maleki

Answer 6

There is no right answer to this question as no two design goals are ever alike. Fluid layouts make any semblance of typographic control virtually impossible, but not all designs need or want it.

No collection of "best practices" will ever equate to an actual design education, and not all users feel compelled to blow their browser windows up to fill the entire screen, either.

Phoebe

Answer 7

Most informative discussion on layouts I have read so far is in Andy Budd's CSS Mastery book. If you get a chance, do read it. I think it's a must have book on CSS (intermediate level). It looks like the layouts chapter is available in article form here. http://www.webreference.com/authoring/style/sheets/css_mastery2/

Another link : http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Liquid and Fluid are two different names for the same technique.

HTH.

Congelation

Answer 8

I think it's better to have a maximum width of the layout, you can change that with Javascript. A good example of that is this layout, look what happens (in Firebug or something) with the layout if you change the width: http://tweakers.net/ They have chosen a width of 1208px and make it smaller with Javascript when the width of the browser changes. With Javascript disabled, the website is still 1208px wide, which seems not to be a problem anyway.

EDIT: The first width of the website will be like 900px. With Javascript you will check the width of the browser and you give the a class with the closest resolution to your browser width. For example: the browser width seems to be 1100px, so you give a class 'res1024', or the browser width is 1080px, then you give a class 'res1100'. This will be your CSS:

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

I hope it helps you :], you can ofcourse change a lot more with this body class, like:

.res900 #menu {
     width: 100px;
}

EDIT 2: You can handle images the same way:

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}

Tezel

Hi Harmen, the white (content) section of the link you provided seems to always occupy 1000 pixels wide, if I resize the browser window bellow that width scroll bars appear. – Skite

Hi Alix, Maybe that's because your screen resolution is 1024px? Let me edit my post to give you an idea how it works :] – Tezel

Wow, they've managed to create a design that breaks horribly in anything but a full-screen browser window with all its width available. (breaks on mine because I have my tabs on the right side, so the content disappears under it) Great job. :P – Freeboard

Overlapping content everywhere; that is a terrible, terrible example of just about everything. – Phoebe

@Harmen: I'm using 1650 pixels right now. The content area goes from the default of 1124 pixels to a minimum of 1000 pixels, no further. – Skite

@Daniel & Bruce: Thanks, I wasn't able to reproduce the effects both of you have mentioned, maybe this approach isn't such a good idea. – Skite

Oops, sorry! I meant @Daniel and @NSD. – Skite

@Harmen: I can pretty much do all of that using just fluid CSS, the problem with the images however remains the same. – Skite