views:

2590

answers:

18

Hey guys,

I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent.

To be honest though, I personally prefer looking at fluid websites that stretch to the full width of my monitor. My question comes from the fact that in most modern browsers you can hold control and scroll your mouse wheel to basically resize any website.

So is creating a fluid website worth the trouble?

+27  A: 

Absolutely. It is a big inconvenience to people with huge monitors to have to resize the page. It can also be a bit dodgy with some layouts. Little inconveniences, no matter how trivial, can actually affect people's opinions of your site.

Also, netbooks have odd resolutions which make it hard to design sites for. For example, I'm writing this at 1024x600.

It's not particularly hard nowadays either (in modern browsers), especially with min- and max-height in CSS, and the new gradients, etc in CSS3, so image scaling won't be as big a problem in the near future.

In response to the comment below, I think that the pros outweigh the cons in this particular case - IE6 is a problem everywhere. We just have to deal with it.

Lucas Jones
"It's not particularly hard nowadays either" I beg to differ. IE6 is still very real. Writing a fluid layout that will work in this little f@@@er is a meaty challenge. Try searching for "css holy grail". Grrr.
spender
I think, like all web developers, I like to ignore IE6 most of the time. Doesn't get rid of it, but it makes me happier :). (I know I'm sidestepping the comment, but I can't think of any response right now.)
Lucas Jones
I ignore IE6 when I can, but most often you can't. The last thing a client wants to hear from a customer is that their website looks like crap - they won't care about the reason.
womp
STOP SUPPORTING IE6
Jason
Yes, in utopia, we all would STOP SUPPORTING IE6, but usually the money says otherwise.
spender
According to http://www.w3schools.com/browsers/browsers_stats.asp, 13% of the Web uses IE6, 15% uses IE7. That's a good reason to support IE6. Simple idealogical dislike is not enough to dump IE6. Sorry Jason.
Paul Nathan
@womp: I know. I wasn't suggesting ignoring a client or anything - that comment was intended more as a joke. I've responded in the answer with a more formal response. (I don't want this turned into a "Should we support IE6" flamewar.)
Lucas Jones
Just a final note, @Paul: those statistics are based upon W3Schools' own visits, and IMHO are not representative of the general web. IE6 is still way overused - I'm not debating your point. (http://xkcd.com/386/ :D)
Lucas Jones
I'm aware that W3Schools is not 100% accurate. I'd actually expect it to be a lower % than general reality, since most IE6 users probably don't hit W3C.
Paul Nathan
I usually ignore IE6, mean whats the point?Auto updates ensure that the browser is update in Win Systems, most users don't click the advanced updates to disable the Browser Update.By the way w3schools statistics aren't that much updated.
Fábio Antunes
I'm not a web developer, so I don't know the answer to: Why do people still use IE6? IE7 and 8 are free... and many more browsers which are better then IE anyway..
Mk12
@KGTM - Unfortunately, most large corporations don't deploy browser upgrades with auto-update when they've sunk thousands of dollars into systems that work with specific browsers.
womp
Funny how people read things that aren't there. :-) Jason never said *why* one should stop supporting IE6. "Simple idealogical (sic) dislike"? Maybe he's found that it's not worth the money to spend the time supporting it -- something I would well believe, BTW, having spent countless hours on IE6 bugs and limitations, completely out of proportion with the number of users it has.
Alec
@KGTM, I think a large proportion of IE6 users are those who don't have the option to upgrade, be those in corporate environments, or the huge number of users locked out of the Windows update process because of the questionable origins of their operating system coupled with increasingly rigorous license checking in the update process.
spender
OK... **it's hard to develop for IE6**. We get the point.
Lucas Jones
@Paul, I went through web traffic statistics at $work in about May 2009, and I saw around IE6 at around 45%: corporate users visiting a corporate site. There's a lot of IE6 still out there, alas.
dland
Most people with large monitors probably don't maximize their browsers. I have a 1600x1200 monitor and I run my browser window at 1024x768 95% of the time.
PHLAK
@PHLAK: I do ;). But that's a good point. What if you like to resize your browser quite small, or at a non-standard size?
Lucas Jones
Stop supporting moronic IT departments who locked their whole corporation into one browser.
James M.
@PHLAK: Me too, I have a 1920x1200 display and I never have Safari fill the screen, there's no point.
Mk12
@Jason - Yes - IE6 sucks, but not as bad as 3 4 and 5, and a lot less than early netscape (yep - I'm old), but if you have corporate clients stuck with a business critical intranet app that will only work on IE6 unless it has a 6 digit upgrade, what you don't like just doesn't factor. In my happy place, there is no IE 6, but when I wake up, it's still here...
seanb
@seanb if you are working for a company that still uses a product that relies on IE6, GET THE F OUT OF THERE
Jason
@Jason - No I don't - but I am happy to sell stuff to places that do - they can use freakin netscape if they wanna pay for the compatibility hacks. I will happily dance on the grave of IE6, but in some (often lucrative) market segments, it aint dead yet.
seanb
@seanb you live a sad, sad existence my friend.
Jason
@Jason - rly - is not that bad - if IE6 the worst of your problems, existence is cool - it's just a browser - there are more important things to worry about in life. Deal with it and move on.I also do freebie sites for some friends that do charity work in third world countries, the demog there is stoked to have any kind of browser (and to have someone around who can read what it says) - should I tell them to fk off until they upgrade from win 98? Nah, rly, my life is freakin charmed :)
seanb
+22  A: 

Making a website fluid, but adding a min/max-width attribute seems to be the best of both worlds, for me. You support fluidity, but you limit it at a certain width (say, 800px and 1200px).

It is up to you - here are some things to consider:

  1. Text is hard(er) to read when lines are very long.
  2. Your audience may have larger or smaller resolutions than normal, and picking an 'incorrect' static width will annoy them.
  3. Maintaining a fluid site can be, but doesn't have to be much more difficult than its static counterpart.
Nick Presta
A: 

Yes. Page zooming is great but it is primarily used to make text bigger, not to make text fill the viewport. Certainly if the body text is already too wide, zooming down to make it fit will usually make it unreadable.

You need liquid layout if you're going to make the text fit the viewport whether or not it's zoomed.

The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)

(* which are indeed less work for highly graphical layouts. But for a simpler layout like, er, StackOverflow's, there isn't really any reason not to go liquid. Tsk @SO, eh!)

bobince
+3  A: 

It depends on what you're trying to do. Take a look at SO. It's fixed width and it's great. In fact, if it were fluid, it would be a bit of a PITA. Some sites look better with fluid layouts, but personally, I'd go with fixed unless you have a good reason to go fluid.

Jason
It would always fit my browser, instead of making me resize. How would that be a PITA? There are cases where complex graphical layouts are difficult to realise with liquid layout, but that certainly doesn't apply to SO's largely spartan design.
bobince
it would be a PITA because all the answers would stretch across the page. i'm glad that the text wraps at around 500 or so pixels. that's why books are typically at the width ratio they are because people's eyes get tired after a certain point moving laterally...
Jason
That is not a PITA. That is how I want it. If you want to limit very long lines, set max-width in em, but 500px in a typical font size is not long. What little actual research there is does not back up the traditional print-based line lengths for on-screen reading.
bobince
I would prefer SO to be fluid, myself.
Nosredna
+1  A: 

Up to a point - yes.

There's a certain width, where text begins to become annoying to read if it's too wide. Easy to test if you have a large monitor, just grab notepad and paste some text into it without line breaks.

However, when going down to smaller sizes, being fluid might be a good idea. Mobile phone browsers are more and more capable of displaying "normal" websites just fine, but they are sometimes width-constrained, and as such, benefit if your site can fit in a bit smaller space.

Personally I also like to keep browser on my monitor but only at half of the monitor's width (24"). Sites which scale nicely into that are very good.

I think it's mostly a user convenience case. Not all sites will benefit from being fluid, but I think sites which have lots of text content are the ones that will most benefit from it, at least if they are fluid up to a max width (say 800px or whatever)

Jani Hartikainen
Agreed. I tend to build all my sites in the 800 - 1200 px wide range. Looking at 1600 pixels across on a page there often isn't enough content to spread around and it just starts to look vacuous.
womp
+1  A: 

Preface: Not a professional web artist.

I've found that there's way too many fiddly bits to get things to flow just so at cell-phone and uber-widescreen sizes, especially in anything of reasonably interesting complexity.

Typically, I design around having a fixed-width site in some fashion; usually bounded at [600,1200].

I also find super-wide columns of content to be a hassle to read. I seem to remember that there's some research which suggests an optimal number of words per column line.

Paul Nathan
+29  A: 

It depends on your audience and your content.
The following are sites I respect and I think are example to imitate.

Fluid Examples:
Amazon
Wikipedia


Static Examples:
Apple
eBay
MSN
StackOverflow
MSDN


Some Mix it Up!
CNN



I think I prefer static most of the time. It is easier to make it look good in more browsers. It is also easier to read.

Bobby Ortiz
How does CNN mixes it up?
Alix Axel
+6  A: 

From my iPhone's perspective, fixed width layout is problematical when using code blocks. The scrollbar for wide code blocks doesn't show up, so I can't read the far right of the block.

Otherwise, I think it's a simple matter of what kind of site you're designing and how it looks on different size screens and windows. As previously mentioned, there's an option to set a maximum width, but the same caveat applies to code blocks and iPhones. I've designed both, and I don't prefer one over the other.

Although, it's fun to watch the boxes move around as I play with the browser size with a fluid layout, but I can be easily amused.

Elizabeth Buckwalter
A: 

I think the decision fluid/fixed should be based also on content of the website:

  1. For sites with big amounts of plain information (like news portals), better to use fluid layout.

  2. Web-services better look and work in fixed dimensions, so you always know where interface elements are located in their places and they are not moving around constantly.

Sergei
A: 

I'm a big fan of fixed at < 800px... it's easier to read narrower columns, and it will work anywhere. That is, if you're trying to make a website that presents hypertext... Websites which present application front-ends, are I think another can of worms entirely...

tychoish
+3  A: 

Many good points in the comments but from your question it seems you really like fluid designs and want to create one so go for it, it's your site, it doesn't have to be like every other site on the web.

Just be aware of pros ond cons of every solution.

allesklar
+10  A: 

You have to realize most computer users don't even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact.

Alex Baranosky
OK, so that means what, then? Which side are you arguing for?
Mark
It means that I'm arguing FOR fluid sites, because we can't assume users know how to change the size themselves.
Alex Baranosky
Don't you have to resize the browser to tell that a website is fluid? How could anyone not know how to resize a window?
Mk12
Or do you mean zooming in?
Mk12
yeah, I meant zoom in :) I myself just zoomed my browser in for the first time in my life 1 minute ago.
Alex Baranosky
A: 

Fluid design - truly fluid - is hard. Very hard. It's not just a question of page width - do your fonts scale, and does everything scale with them? Ideally:

  • Sizes should be defined in em rather than px
  • ...and that goes for element sizes, not just fonts!
  • Given a change in font size or zoom level, the page elements should be the same size relative to each other

Our main product is fluid, and it's a pain from my point of view as a designer, especially because it involves a lot of user-generated content.

For one thing, images - in a fixed-width site, you can have an image that fills half the width, and looks great. In a fluid site, this image is just as likely to be lost in a sea of whitespace, looking rather lonely.

Life should be easier once border-radius and other CSS3 properties come into play more, but sadly our core audience are government workers, who all, ALL STILL USE IE F@!*ING 6!


To answer the question, "is it worth it"? Yes, if you do it right.

Here's a scenario: choose a fixed-width site: your boss displays it to a client on his brand-new, 1920x1600 laptop, then complains to you about "how it all looks small on this guy's screen!"

Keith Williams
+5  A: 

Text based apps: No. Table based apps: Yes.

Pros of fluid layouts

  1. People with big monitors gets to use their screen real estate.
  2. Easier for users with big monitors when you have a lot of information on your page.

Cons of fluid layouts:

  1. A fluid width text column is hard to read if it's too wide. There's a good reason behind the use of columns in newspapers: it makes skipping to the next line much, much easier.
  2. (Somewhat) hard to implement, because of the limitations in CSS.

If you're showing tabular data (iTunes, db manager, ...), fluid width is good. If you're showing text (articles, wiki pages, ...) fluid width is bad.

August Lilleaas
A: 

I think it's nice to be able to scale well on a user's screen, rather than make the users pan and zoom. In a time when users surf the web from such a wide variety of devices, ranging from smartphones to ultra-mobile PCs, each with its own, possibly non-standard resolution, I think it's important to keep user-experience at a high level when your site is viewed on such screens. Regarding the text length, it could be bounded by a certain ratio, so it would fit nicely within the layout. I think there are also frameworks that may help with writing a site in a fluid manner, and help with coding maintainability.

luvieere
A: 

I'm gonna go against the majority and say NO. Reasoning: fluid sites like Wikipedia are a nightmare to read on large screens due to their long line length (though its citations make it hard to read at the best of times).

The problem really occurs because there is no mechanism to size text relative to the screen resolution. If you could automatically make text bigger on bigger resolutions, you could stay closer to the 80-odd characters per line that's generally regarded as the best for readability.

There is also the problem of images and other fixed-size elements. You can have large images and let the browser shrink them if necessary, but then you run into other problems like much longer download times, and image quality problems in many browsers.

DisgruntledGoat
A: 

Why not let user choose text portions width (line lenghts) and font size by proper javascript UI? With some "handles" for line lenght resize and zoom in/out icons for font size (in a more defined way, not the entire page, but a portion of page). Anyone tried this way?

Dario Cangialosi
A: 

Yes, fluid websites are worth creating
As you said, it looks good and reasonable when you plan properly at design phase.

Your doubt about the impact of Ctrl + Scrollbar is not a big deal. This feature is primarily for accessibility, to make text more readable by increasing the size.

However, if you mention all your sizes in Pixels (px) it won't happen. Proper adjustment happens only when you use "em" to specify size. So you have a way to turn it on/off

Narendra Kamma