Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it wise to use a Fluid Layout?

Tags:

css

fixed

fluid

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?

screen resolutions with fixed layout

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?

like image 427
Alix Axel Avatar asked Dec 26 '09 10:12

Alix Axel


People also ask

Why would a designer choose to use a fluid layout?

Fluid design ensures that a website always looks similar in layout regardless of the screen. A consistent layout benefits the user experience while ensuring usability for as many visitors as possible.

What is fluid design what are its advantages?

A fluid layout is more user-friendly in that it adjusts itself to the viewer's screen size. So if you are viewing the content on a small screen, for example, the mobile phone, then you don't have to scroll horizontally to read the content. The white space remains the same no matter what the screen size or the browser.

What is the difference between fluid and fixed layouts?

Web page layout follows one of two different approaches: Fixed-Width Layouts: These are layouts where the width of the entire page is set with a specific numerical value. Liquid Layouts: These are layouts where the width of the entire page is flexible depending on how wide the viewer's browser is.

What is a fluid layout?

In WordPress theme development terminology a fluid layout is a layout that uses proportional values as a measuring unit for blocks of content, images, or any other item that is a part of the WordPress theme. This allows the web page to stretch and contract relative to the user's screen size.


1 Answers

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.

like image 130
Guss Avatar answered Oct 19 '22 02:10

Guss