Forum Moderators: not2easy
I have several questions: Is the preferred standard full width, percentages, or fixed width? If you use a fixed width, are you still fixing it at 760px or so for the 800x600 displays of have you gone higher now?
I've given up on 800x600 and target 1024x768.
According to w3schools, only 14% are still at 800x600.
It would be nice to accomodate them, but I find it is just too limiting.
[w3schools.com...]
but they date back a couple of years.
Welcome aboard solodex, these come up like . . . every couple months, but mostly in the form of "screen resolution" posts - search for those and you'll find lots of discussions.
The problem with fixed width is you almost always have to fix it in pixels to make it work, and various resolutions will render differently. If you fix it at 1024px, along comes Mr./Mrs/Mz. Huge Monitor set at maximum resolution and squashes you up. While you can fix a width in percentages, if you're going to do that, you may as well go with fluid width IMO.
That being said, I like to use a fluid width with the max-width property set to 1024px. Yeah, this creates the same problem as mentioned above, but next year we can bump up max-width with a single line in the CSS, and it does accommodate smaller resolutions. You absolutely want to set a max-width. If the monitor is **really** huge, reading impossibly long lines of text is as annoying as any of the other top ten designer mistakes.
I always immediately discount statistical percentages that allow a designer to say "well we don't care about the lower percentile." It doesn't matter if it's 1% - if **I** were in that 1%, I wouldn't be too happy. A customer is a customer, a sale is a sale.
According to w3schools, only 14% are still at 800x600.It would be nice to accomodate them, but I find it is just too limiting.
Too limiting for whom? Remember when making decisions like this that:
In any case, fluid layouts are a good way to go, but aren't suitable in absolutely every instance. Sometimes a fixed-width design just does the job better.
That being said, I like to use a fluid width with the max-width property set to 1024px. Yeah, this creates the same problem as mentioned above, but next year we can bump up max-width with a single line in the CSS, and it does accommodate smaller resolutions. You absolutely want to set a max-width. If the monitor is **really** huge, reading impossibly long lines of text is as annoying as any of the other top ten designer mistakes.
I am not familiar with the max-width property. Is it read by the browser and the width of that particular div container is set to max(max-width, users display size)? If that is the case and you use em size settings for fonts, will they automatically scale based upon the width selected? If not, how can I do this.
Thank you for all of the responses so far. It really has been enlightening.
I find that with the higher width resolutions comes more browser size adjustment. Someone running 800x600 is much more likely to be viewing in full screen mode than someone who is running 1440x900.
All of the big box stores are pushing widescreen monitors these days. A 1440px wide site is painful, I would hazzard a guess that many of those users will scale their browsers to ~800px.
At this rate, it looks like by around January that 800 will be about ready to join the land of the Dodo's.
1. 1024x768 23,780 44.63%
2. 1280x1024 8,590 16.12%
3. 1280x800 5,391 10.12%
4. 800x600 4,003 7.51%
5. 1440x900 2,446 4.59%
6. 1680x1050 1,880 3.53%
7. 1152x864 1,784 3.35%
8. 1280x768 947 1.78%
9. 1600x1200 924 1.73%
10. 1920x1200 827 1.55%
And from another non-ecommerce site of ours:
1. 1024x768 13,414 43.99%
2. 1280x1024 5,322 17.45%
3. 1280x800 2,997 9.83%
4. 800x600 2,179 7.15%
5. 1440x900 1,303 4.27%
6. 1152x864 1,216 3.99%
7. 1680x1050 1,048 3.44%
8. 1600x1200 559 1.83%
9. 1280x768 494 1.62%
10. 1920x1200 420 1.38%
[edited by: Wlauzon at 9:48 pm (utc) on Aug. 29, 2007]
At this rate, it looks like by around January that 800 will be about ready to join the land of the Dodo's.
Maybe when it does, people will finally begin to realize that screen resolution is not the appropriate metric for deciding this question. When larger screens become ubiquitous, it becomes necessary to know the window size instead.
Since people do resize windows--even on Windows--it's necessary to ensure that layouts work at sizes significantly smaller than that of the monitor. To provide a statistically insignificant bit of anecdotal evidence, I browse with the window about 2/3 the width of my 1440px screen--which means my effective screen size is ~960px-18px or so for scrollbars, or in the neighbourhood of 940 pixels.
Either way, the route to take is one of a) a fluid layouts or b) a conservatively-sized fixed layout--though in either case (CSS being what it is), you could provide tools to allow visitors to resize an intelligently-built layout.
--b
I am not familiar with the max-width property.
min-width and max-width set the largest or smallest width any object can be on resize, and it can be set in px, %, or em (I think, I use px for this . . . )
... If that is the case and you use em size settings for fonts, will they automatically scale based upon the width selected?
No, the size of fonts are not affected by an object's width, and there is no real way to "control" the text preferences of the browser. The settings you create in em's and percentage are based on the current default of the browser - so a user can set their text size to medium, large, or largest and if you specify 90%, the actual rendered text is 90% of "whatever that is." :-)
Using fixed-size fonts works in IE, but FF allows fixed-size fonts to be resized.
(are there cross-browser issues with that?) [min/max-width]
Only with Everyone's Favorite Browser, Internet Destroyer 6. :-) Doesn't support it and you have to perform a hack of one kind or another to get it to play ball. I have had no issues with any standards-compliant browsers, but it's really one of those "less critical" rules.
There was a discussion recently that expressed some issues with min and max-height, can't recall specifics (search it out.)
When you are in doubt, and do not need absolute 100% control over every little thing on the layout, go with a mix of percentages and fixed pixels, a fixed menu for example with the content part set as a percentage. I also like the max-width idea and will be implementing it in any future percentage designs.
