On Tue, Jan 24, 2012 at 5:07 PM, Felix Miata <[email protected]> wrote:
> On 2012/01/23 10:35 (GMT+0800) Ghodmode composed:
>
>
>> 960px is a good max width... for most site visitors.
>
>
> ...where "most" is as little as 50% + 1 of today's visitors. I consider that
> a gross exaggeration except in cases where you know your demographic
> includes no netbook or handheld devices. At the other end are today's high
> resolution users, and tomorrow's much higher resolution users. IOW, the size
> of a px, until such future time as a CSS px and a device px are normally not
> identical, and probably even after that time for a long time to come, if not
> indefinitely, is an unknown size that bears an unknowable relationship to
> legibility and usability on users' screens, because px size depends on px
> density, which varies considerably among environments.
I don't know about the original poster's target demographic, but 960px
works well on a modern computer or a modern mobile device whether it's
tablet, netbook, or handheld. The handhelds will initially show the
site zoomed out, but they're designed for that. Pinching, tapping and
zooming is the normal use case for a handheld device.
Netbooks aren't a problem. The Asus EeePC is already pretty old, but
it handles a 960px web site pretty well. It's resolution is 1024x600.
I don't know about the current generation of netbooks, but I expect
resolutions to go up.
High resolution users can see and use a 960px wide web site quite well also.
Here are a few real-world examples of fixed width sites:
http://www.mashable.com 972px
http://www.stackoverflow.com 960px
http://developers.whatwg.org/ 820px
http://lifehacker.com/ 980px
http://developer.yahoo.com/ 974px
http://paulirish.com 936px
These are some really successful web sites with talented developers
using fixed width layouts. Their sites all look great everywhere.
> OTOH, the em unit bears a predictable relationship to both legibility and
> usability, and thus is the better way to determine how wide is wide enough.
> It makes a big difference how wide is 960px on a display on which 960px is
> nearly the full width of the screen (1024x768), or one on which it is less
> than half a screen wide (e.g. 2560x1440); and similarly where 960px is 60em
> wide (16px browser default), or one in which 960px is less than 24em wide
> (e.g. 3840x2160 or higher; considerably more than 16px browser default).
Well, em is obviously a better unit in most cases, but it doesn't have
that much to do with the original question. What's a good target
width?
Platforms currently use pixels to define their viewports. Working
within that limitation, we can come up with a target number. Then
perform the necessary calculations to convert to em. Just like you
said, we start with a pixel number, then make an educated guess about
default font size on target platforms in order to convert to em:
960px / 16px = 60em
> Screen densities are rising and will continue to rise. The main thing
> holding them back from rising more and faster is DTEs that presume
> yesteryear's crude average density and make little or no allowance for
> things to work properly when density is more than a little bit higher. Em
> units make no such anachronistic assumption, even going so far as to allow
> respect for user settings without significantly disrupting layout.
What's DTE?
It doesn't seem like anything is holding back screen densities. I''m
a novice, but I keep hearing about retina and super amo oled plus and
4k HD displays. It seems like hardware capacity is out-pacing
software capacity.
--
Ghodmode
http://www.ghodmode.com
> --
> "The wise are known for their understanding, and pleasant
> words are persuasive." Proverbs 16:21 (New Living Translation)
>
> Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
>
> Felix Miata *** http://fm.no-ip.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
