3

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?

5
  • 2
    Just to put some clearness on the question. If there would be an option on the site to skip from 800px width to 100% width (and vice versa), would you like it?
    – Maka
    Jul 23, 2009 at 7:40
  • And if the site looks OK to be 100%, why wasting the space on the user's monitor? ... But I agree sometimes a too wide page is not looking good and not easy to read, consider a 100% width paragraph on a 1920px wide-screen, that's one of the reason why we have max-width in css.
    – xandy
    Jul 23, 2009 at 7:45
  • Yeah, that's why I want to add option into my forum.
    – Maka
    Jul 23, 2009 at 7:52
  • Edited: Yeah, that's why I want to add this option into my forum.
    – Maka
    Jul 23, 2009 at 7:54
  • This is not a good question for stackoverflow as there is no canonical right answer and it's verging on religious war territory
    – Polsonby
    Jul 23, 2009 at 12:56

8 Answers 8

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

2

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.

1
  • That's a very good point, even though a lot of screens is 1920 pixels wide, does not mean that your web page has to fill all that space!
    – Kimble
    Jul 23, 2009 at 9:35
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.

1
  • My design is sort of 'line long'. In brief, it would never be spoiled if changed from 800px to 100% and bla bla bla.
    – Maka
    Jul 23, 2009 at 7:44
1

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.

0
0

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.

2
  • Hell, what are you talking about? Read the question.
    – Maka
    Jul 23, 2009 at 7:41
  • Sorry, that comment was addressed not at you.
    – Maka
    Jul 23, 2009 at 7:50
0

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.

1
  • I'll take it into consideration.
    – Maka
    Jul 23, 2009 at 8:05
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.