fluid vs fixed width?

[arn]

What's people's opinions on Fluid vs Fixed design of websites.

I've always been a Fluid proponent, and macrumors is setup to be fluid. But more and more sites are fixed width and frankly, it's easier to setup and what not, not having to worry about extremes of size.

thoughts?

arn

[neocell]

I personally like fluid, though I've never made a real website so I have no idea of the trials and tribulation associated with its implementation. Since I use (and I image most Mac users do too) many open windows, like to be able to fully read more than one open window at a time, and not have to constantly scroll side to side, I'm a supporter of the fluid setup.

Thanks for all your work making this site a pleasure to use :)

[ChrisWB]

In general, I feel fluid sites are better with text, but fixed width are better with images or a mix of text and images. I have mixed feelings on forums. For my own forum, I use fixed width because I think it's easier to read on a large screen. The text isn't stretched out across 20 or more inches.

PS: Arn, this is the first time I've seen you actually on the forums. It's nice to "meet" you. :)

[rendezvouscp]

I think they have their own places, but I personally prefer fixed + max/min-width + elasticity.

I like this combination because I feel like it gives the benefits of everything. The "fixed" width is a general guide that most people will have, while the max/min-width of it all makes it a little bit flexible.

The "elasticity" just makes it nicer for those of us who want the font size to be a little bit bigger or smaller. I'm talking about a website that has a set size, but if you increase or decrease the text size in your browser, everything gets larger as well (save images). I can't wait for SVG when we'll have elastic images as well!
-Chasen

[Heb1228]

I think they have their own places, but I personally prefer fixed + max/min-width + elasticity.
I think I agree with this statement. Its the best of both worlds. Completely fixed width sites get on my nerves.

[theappleguy]

Fluid. Most fixed sites are designed for 1024 x 768 screens so don't look so good on higher res 20-inch + monitors. :)

[BakedBeans]

Fluid. Most fixed sites are designed for 1024 x 768 screens so don't look so good on higher res 20-inch + monitors. :)

I disagree (in a friendly mannor ;) ). My site is designed, begrudgingly for a 1024x768 but looks a lot better on high res monitors.

Not applicable in everycase i suppose

[arn]

I think they have their own places, but I personally prefer fixed + max/min-width + elasticity.


Is this actually attainable? My experience is that it is not, but I'm not that experienced with it.


Arn, this is the first time I've seen you actually on the forums. It's nice to "meet" you


Sometimes I crawl out from under my rock. :)

arn

[Heb1228]

Is this actually attainable? My experience is that it is not, but I'm not that experienced with it.
The forums already do this... they will shrink down to a certain width but then they stop and you get the scroll bar at the bottom. I'm not sure if its possibly to set a maximum width, but it seems like I've been to sites that do it somehow.

[arn]

The forums already do this... they will shrink down to a certain width but then they stop and you get the scroll bar at the bottom. I'm not sure if its possibly to set a maximum width, but it seems like I've been to sites that do it somehow.

nay, the scroll bar appears when there are elements that can't be shrunk (banners or images), but the remainder of the site shrinks down (the posts, for example) as you shrink down the screen. There is no minimum width enforced.

arn

[Heb1228]

nay, the scroll bar appears when there are elements that can't be shrunk (banners or images), but the remainder of the site shrinks down (the posts, for example) as you shrink down the screen. There is no minimum width enforced.

arn
Yeah I see what you mean... I looked through some of my bookmarks to see if I could find a site that really did that kind of thing and couldn't find one.

In that case I definitely vote for fluid.

EDIT: http://www.dashboardwidgets.com/ kind of does it, but like you said, I think thats because its being limited by the banner, but the banner somehow has a minimum width and can get larger.

[rendezvouscp]

While I haven't applied a min-width on this unfinished project (http://labs.chasenlehara.com/arts/) (simply because, often enough, you don't really need a min-width if you have an image that will always make a scroll bar at an unreasonably small size), you can see that everything under the header image is resized with the text size.

If you bring your window in on the sides, and then "push" further in so that the background no longer shows, it'll get smaller as well. On the flip side, if you make the text so big that it takes up all the space on the page, it'll just stop expanding horizontally to prevent a scroll bar.

This is how I prefer blog-type pages; I believe that sites such as ma.gnolia (http://ma.gnolia.com/) are better served fluid. I used to browse the web with a maximized window on my Cinema Display, but then I realized that it was really straining my eyes and I usually have the window as wide as I really want it for fluid sites.
-Chasen

[arn]

EDIT: http://www.dashboardwidgets.com/ kind of does it, but like you said, I think thats because its being limited by the banner, but the banner somehow has a minimum width and can get larger.

ya, it does seem to do it - on the Mac. I'll have to try it on Win/IE

arn

[iGav]

Fluid layout design, but fixed width content columns, that way you have a degree of control of line lengths.

Excessive line lengths exceeding 11+ words (40-60 characters) makes for poor readability and legibility.

Obviously you have to consider the default text size, but you can still offer up a degree of flexibilty with a design to compensate for reasonable adjustments in browser text settings, whilst still maintaining a high degree of legibility.

[dpaanlka]

I'd say fixed width.

All of the sites I design are fixed width, generally designed for 1024 x 768.

On 30" displays, it's a LOT of wite space. Most people don't have 30" dipslays, and any site stretching out to cover 30" of space will look terrible and be difficult to read. It really isn't that big of a deal on 19" or 17" displays with higher resolutions than 1024 x 768. People need to stop using that maximize button. What a waste of space that is.

If you put a magazine on a table, it doesn't stretch out to the width and height of the table.

[dornoforpyros]

I pretty much always build fixed...however having said that I rather like the way MR is set up in it's current fluid format.

[Josh]

Fluid.

If font and imaging is done right in CSS, it will be presentable on many more resolutions than a fixed-width layout.

Working for Michigan.gov, one of my biggest issues with our site (besides the terrible Vignette CMS) is the horrible fixed-width layout.

It's 2006, no need to design sites that fill a tiny portion of the screen for anything larger than 800x600.

[yippy]

Fluid.

I like to view MR taking up the full screen of my PowerBook so I can see as much as possible at once. On occasion though I like to have 2 articles open at the same time next to each other and in that case I have to shrink the page but I don't want to have to scroll sideways.

[arn]

EDIT: http://www.dashboardwidgets.com/ kind of does it, but like you said, I think thats because its being limited by the banner, but the banner somehow has a minimum width and can get larger.

for what its worth, DashboardWidgets doesn't work on Windows IE the same way. no min width. Also the top area layout is broken.

arn

[UKnjb]

Fixed width with elasticity for me.
I started with fluid (from ignorance), but then thought that if the text and images were all laid out for 'good' resolution, 1024 x 768, then proportions could be established that would make re-sizing unnecessary. I agree with dpaanlka's quote above "If you put a magazine on a table, it doesn't stretch out to the width and height of the table." For what it is worth, I read these forum pages in default size and have only just played with seeing what happens when I re-size them. They're just fine on default size.

[Salasm]

Keep MR fluid please. If I wanted fixed width pages, I would have resized my browser window.

ps. Safari and Firefox support min/max width lengths in CSS, but Win/IE does not, so that's why you don't see it used often. Shame on Microsoft.

[Heb1228]

for what its worth, DashboardWidgets doesn't work on Windows IE the same way. no min width. Also the top area layout is broken.

arn
Ah I see... I guess with it being a dashboard related site they don't worry too much about IE for Windows.

At any rate, I think the fluid layout of MR is great.

[ChicoWeb]

Why not both.

It is possible to use the positive attirubtes from each to put together a well laid out site (ie. www.usc.edu). Personally, I would never design a fluid site for a client unless they SPECIFICALLY asked for it and we went through the positives and negatives of each. Fluid has much room for variation between resolution sizes and I view that as a negative. If I can not control where my content and images are, I become frustrated.

I'm actually quite shocked at the fluid answers. You'll notice that 90% of the web is fixed and built for 8x6, which is my standard. Anywho, just thought I'd tip in my 2 cents. :)

[Rower_CPU]

Hybrid layouts are starting to come into vogue now - as others have noted fluid designs with a minimum/maximum width. As you can see from the Dashboard site, IE/Win doesn't support min/max-width properly, which ties your hands a bit.

As a designer I go back and forth - fluid is nice and simple, but fixed gives you more control to make sure your layout is viewed exactly as you want it.

[MrSugar]

ah Fluid vs. Fixed... an interesting question.

My opinion is that elastic websites are the ideal setup. A fluid view with a min and max setup. However, Arn pointed out that this won't work in IE. Luckily there is fairly manageable Javascript to handle the problem. Or you can do it with CSS but it will create non-valid code.

My site, www.fluidvisiondesign.com uses a width based on EMs that has a max / min width. It works in IE thanks to the script I mentioned above, (http://fluidvisiondesign.com/script/minmax.js). This I believe is ideal. Although I am not completely turned off to fixed width's as I think if done right they can accomplish a lot. For instance, subtraction.com is a really nice fixed width layout.

[link92]

ps. Safari and Firefox support min/max width lengths in CSS, but Win/IE does not, so that's why you don't see it used often. Shame on Microsoft.
Actually, Win/IE supports min-width, as it's width implementation is buggy, and it doesn't support max-width/width

[AmbitiousLemon]

imo fixed width is lazy design. A good design will be able to stretch to fit a reasonable range of monitor sizes as well as accomodate resizing of text sizes (for accessibility reasons).

[MrSugar]

imo fixed width is lazy design. A good design will be able to stretch to fit a reasonable range of monitor sizes as well as accomodate resizing of text sizes (for accessibility reasons).

Just because stretches to fit the screen doesn't mean it's easy to read. Don't forget that. Long lines of text are much harder to read, and that is why fixed width still has a prevalent place in today's web.

[iGav]

Just because stretches to fit the screen doesn't mean it's easy to read. Don't forget that. Long lines of text are much harder to read, and that is why fixed width still has a prevalent place in today's web.

Exactly what I said earlier in the thread. ;)

Excessive line lengths = bad design. :)