Should I let visitors to my site change the width of pages from fixed to a fluid?

Question

I'm considering implementing a feature that would let visitors to my forum change the width of the pages from 800px (for example) to 100%, and vice versa... Is this a good practice?

Answer 1

Relies on your design. What you want is called a Liquid, Hybrid or Fixed lay out.

• Liquid: Pages stretches as browser window changes size
• Fixed: Page always same size, mostly centered at browser window
• Hybrid: A combination of these two

I don't know your design so I don't know which you should use.

Changing a fixed width (800px) to a percentage is not very common. I never saw it ever.

Answer 2

You should consider that there are a lot of different screen sizes out there. So if you change a websites width to 100% it might be changing it to e.g. 1600px which would be the double of your initial size. If your site is build up of floating elements, that change in size as well, this might not be a problem. Here is a nice overview of what it means to be a liquid layout: link text

Answer 3

Web page development best practices

Answer 4

My advice is to remember that reading articles spread on full-width with resolution of 1600px is very tiresome. You have to use liquid design wise, where it's applicable.

Answer 5

Choose the minimum screen size you want to support and size your page to look good at that size by default, even if its does stretch to the size of the screen. Centering the design works well if users then have larger screens, just cater for that using a stylish border and background colour to suit the page design.

Answer 6

Take a look at some of the most popular website and see what they do when it comes to using fixed width or a percentage (or both).

e.g. Amazon, Google, BBC, Microsoft... etc

Finding a common theme with them might indicate a preferred method for the wider audience.

My own personal preference is you have a minimum (e.g. 800px) for your website, and for any increase screen size on that, you apply a percentage to fill the screen. Of course bear in mind that you can have HUGE screen resolutions which can make your layout look silly, so a MAX width might need to be introduced for your design.

If your still unsure stick to fixed width.

Answer 7

Why don't you just test it? Use javascript respectively ajax to load a script that stores the clicks on your switch and the users IP with it. Then you'll know how many of your users have intrest in such a button and how many switched back because they didn't like it.

Answer 8

So there are two questions I'm seeing:

1. Is it a good idea to let users have control over their UI?

   My opinion on this is a flat out YES. But only if a) you do it without taking shortcuts, hacks, or anything that will be instable and b) this feature isn't distracting, is easy to use, and doesn't irritate them more than help them. Do a google search for "Feature Bloat".

Now, if I was going to offer such an option, I wouldn't go with toggling from 800px to 100%. I'd have the bounding box be resizeable like a program window. This could break all of the rules that I just laid out, which is probably why I haven't tried it, but yeah, going to a site on my way-to-giant monitor and seeing a tiny 800px box and thinking "another one" and then noticing the little "resize" icon on the side, that would be cool. Ultimately we need to get over the idea of the web being a desktop publishing environment and realize its all about users getting to customize things so that it's the site THEY want to come back to.

1. How do you anticipate giant screens and what is the best thing to do for such situations?

   For this, most of what has come up is right on point. I'll remind everyone that FF does not play nice with min- and max- dimensions. There is another route that I learned not that long ago and still haven't tried. With CSS3, You can actually use the @media tag in your css to specify style sheets for specific screen sizes. they are called @ media queries, so for example:

   @media screen and (min-width: 400px) and (max-width: 700px) { ... }

Then if the screen is over, say 1024, you set the width to be 1000px, but anything UNDER 1024, you set the width to be 100% (or 90% or whatever). That way you don't need to worry about setting the width at 800 minimum and then having users on mobile phones unable to read the page because it's too wide, etc.

Answer 9

I would use a min-width and max-width css attribute to set absolute min/max, then let it be fluid otherwise. Note that min/max width are not supported in IE6, but then it'll just default to fluid so it shouldn't be a big deal.