[thelist] front end design: liquid design

[Felix Miata]

On 2008/10/20 10:45 (GMT-0500) Ben Dyer composed:

> On Mon, Oct 20, 2008 at 12:57 AM, Felix Miata <mrmazda at ij.net> wrote:

>> On 2008/10/19 14:01 (GMT-0500) Ben Dyer composed:

>> > You know, I'm not a fan of liquid designs anymore. For two reasons
>> > really:

>> > 1. Generally, the wider the column of text, the more difficult it is
>> > to read naturally.

>> Wider than what? 5 words? 11 words? 16 words?

>> Generally I find 10 words wide much easier to read than 3 words wide, and 15
>> as well.

> "Wider than what?" I wasn't defining a fixed amount, it's a hyperbolic
> curve: as width of column text increases, the readability decreases,
> approaching 0 readability.

So answer the question. How wide is too wide, using a unit of measurement
that is relevant. Is three words wide not too narrow? Is 35 words wide not
too wide?

> ... Just because you don't know what that point is
> doesn't make it not true.

When you define a width in px, you know not what you do except for your own
environment and the unknowable quantity of other environments matching or
similar to your own. You may think your 800px makes a pleasingly readable 12
word wide width, if that's how it actually works out on your own display, but
what makes you think 800px is not 5 words wide elsewhere?

Examples of the kind of px-measured line length pestilence that happens all
the time in non-liquid designs can be seen on:

http://fm.no-ip.com/SS/SC/sc-bendye1.jpg
http://fm.no-ip.com/SS/SC/sc-webspace1.jpg
http://fm.no-ip.com/SS/SC/sc-jonhug1.jpg
http://fm.no-ip.com/SS/SC/sc-mondaybynoon1792x1344x168f-uss.jpg
http://fm.no-ip.com/SS/SC/sc-philwi1.jpg
http://fm.no-ip.com/SS/SC/sc-richbr1.jpg
http://fm.no-ip.com/SS/SC/sc-skillsforaccess1.jpg
http://fm.no-ip.com/SS/SC/sc-tinava1.jpg
http://fm.no-ip.com/SS/SC/sc-arnora1.jpg
http://fm.no-ip.com/SS/SC/sc-crm1792x1344x168.jpg
http://fm.no-ip.com/SS/SC/sc-dianec2.jpg
http://fm.no-ip.com/SS/SC/sc-flaswi1.jpg
http://fm.no-ip.com/SS/SC/sc-georcu1.jpg
http://fm.no-ip.com/SS/SC/sc-jeresn1.jpg
http://fm.no-ip.com/SS/SC/sc-joseha1.jpg
http://fm.no-ip.com/SS/SC/sc-joset2.jpg
http://fm.no-ip.com/SS/SC/sc-paulka1.jpg
http://fm.no-ip.com/SS/SC/sc-pkruep1.jpg
http://fm.no-ip.com/SS/SC/sc-richgr1.jpg
http://fm.no-ip.com/SS/SC/sc-shelfoo1.jpg
http://fm.no-ip.com/SS/SC/sc-stephc2.jpg

>> > 2. I'm noticing that, statistically speaking, monitor resolutions are
>> > trending higher and higher. 1024x768 is still the leader, but widths
>> > of 1280, 1360 and higher seem to becoming a lot more prevalent of
>> > late.

>> How wide is 1024? How wide is 1280? How wide is 1920? Should it matter? The
>> answer is it should not matter one iota. It's too bad most designers refuse
>> to permit it to not matter, as it certainly need not.

> Uh...1024 is 1024 pixels wide, 1280 is 1280 pixels wide and 1920 is 1920
> pixels wide.  But I suppose the riddles you speak in refer to what
> percentage of width does the browser viewing space take up within the
> monitor space...

It isn't about percentage, it's about real world resultant dimensions. It's
about rampant real world non-use of relevant measurement units in CSS width
setting. If a good line length for your design is 80 characters, then make
the width 80 characters wide for everybody, not just for some unknowable
percentage of visitors whose own environment just happens to matche your own.
80 characters may be what you get from 800px on your 89 DPI 19" 1440x900
display, but it certainly isn't likely to be what somebody who wants
comfortably sized text will get from 800px on a 133 DPI 17" 1920x1200 display.

>> > Now, I know that many users won't maximize the browser window with a
>> > large screen space like that,

>> How "large" is that? How do you know whether 1680 is more than 1024 or 1440
>> isn't less than 1280? Are you aware that some people buy larger screens in
>> order to make things bigger, as opposed to providing more space for "same"
>> size things?

> Yes, but did you know that *most* people buy a new monitor and computer and
> leave it at whatever default resolution the computer came at and never
> change it or even know how to change it?

Did it ever occur to you that some people just might like the defaults? Do
you think the people who design those products have no knowledge of likely
results, or might believe that people might just like them the way they make
them? Did it ever occur to you that your CSS "corrections" for their supposed
failure to adjust to your liking is as likely as not to be negative rather
than positive?

> ... most people lazily stick with the

You do know what assumption means, right? Your use of lazily is just that.
Defaults are by design intended to suffice for the majority. It's unfortunate
for that majority that there's another majority who can't grasp the concept
that defaults are a good thing: a majority of web designers, a group that
constantly proves itself to be anything other than representative of the
larger majority.

>From http://www.useit.com/alertbox/designmistakes.html :

"1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many votes as
the #2 mistake. About two-thirds of the voters complained about small font
sizes or frozen font sizes;..."

> defaults.  Only a small percentage of power users or special cases (people
> like us) change away from the defaults.  The average user will not.

It doesn't matter how many do or don't. Your "corrections" for their supposed
failure to adjust can't be counted on for anything other than random impact.
Web browsers are well capable of auto correcting for those that do if only
designers would only design to allow them to do so. Liquid allows. Illiquid
prevents.

>> > but as these numbers keep increasing,
>> > the problem with point #1 will keep increasing as well.

>> That's a fallacious assumption. You have no idea whether my 1920 wide screen
>> is wider than my 1600 wide screen, because you have no idea how wide either
>> of them are. Of course, if you size in em instead of px, you embrace inherent
>> web characteristics, making any supposed physical width irrelevant, leaving
>> only relative width relevant, which is a good thing for web users.

> No, it's not a fallacious assumption.  It's a logical conclusion.

For your conclusion to be logical requires continuing to illogically design
against the grain built into user agents. If you set your sizes in em instead
of px, then, just as it should be, the number of px wide a display is is just
not relevant to anything having to do with making friendly, usable web pages.

>  Alright,
> look, here are the solid points from which the conclusion is drawn:

> 1. A large number of people have changed their viewing environment over
> time.  Five to seven years ago, the most popular screen resolution was
> 1024x768, with most surveys pegging it at around 66-75% of the share.  Most
> of the remaining percentages were lower resolution than that (e.g., 800x600)
> with only a small sliver higher resolution. Now, 1024x768 is still the
> majority share, but only around 33% in most reports, *and* most of the
> remaining percentage is a *higher* resolution than 1024x768.

None of that matters except to designers who can't think in anything other
than px, if they can think at all. There was a time many many moons ago that
the defaults were grotesquely large, yet today most continue to design based
upon the preposterous presumption that still "the defaults are wrong" (that
users are better off with smaller text than the size they presumptively
prefer), and compounding the effect of that presumption with a new bogus
presumption that #000 on #FFF is too contrasty, that #333 on pastel or gray
can somehow be easier on the average eyes.

> 3. Because of the shift during that time from CRT displays to LCD displays,
> as people have upgraded machines, many have likely upgraded their displays
> as well.  And LCD displays tend to have greater screen viewing space *and* a
> higher screen resolution.

LCD displays have a native resolution. Not using that native resolution
produces noticeably inferior rendering quality. To whatever extent people are
doing that, they're not "upgrading" by replacing the CRT with an LCD, instead
using a similar or identical resolution, and likely not enjoying any
improvement in vertical space. The fixed width designs rampant on today's web
won't be materially different in those cases except to the extent the
mousetype isn't given enough px to render distinctly.

Laptops have outsold desktops for several years. They have both higher
resolution and, as compared to desktops, less physical viewing space. This is
more proof how inane it is to size in px, to not use some variant of "liquid"
in web design.

> 4. The average user rarely changes away from the default options on a
> computer.  And this is where I think *your* particular logical fallacy lies.

No, this is where the fallacy that change from defaults is necessary or
desirable lies. You the designer can't do anything to "correct" my "failure"
to adjust to your liking. You may make a change, but that change is just as
likely negative as positive, ergo, random, in theory, but as pointed out by
Nielsen at the URL supra, more likely negative.

> The average user, however, just wants to read their e-mail, check a few
> sites, see that stupid YouTube video their friend sent them, open Office
> documents, etc.  They won't venture to the Control Panel or System
> Preferences unless they absolutely have to.  To some neophytes, even those
> names sound scary.

That's all fine, as the only sane assumption is the defaults work well enough
for most of them, and for the rest for which they won't, they will at some
point via help or otherwise discover available solution(s) or workaround(s).

> 5. Computer manufacturers will default to increasingly higher screen
> resolutions because this looks better in the store (more visible space =
> better appearance when trying to sell to a potential buyer).  If you set a

Increase to ever higher resolutions has been retarded by the retarded Windows
assumption of 96 DPI. If Windows of 7 years ago had begun taking real display
DPI properly into account instead of arbitrarily assuming 96, today's average
display PPI would likely be twice or more what it is now.

> monitor resolution on a brand-new 19" LCD screen to 1024x768, that would
> look odd to an average user.  It would feel cramped for a monitor of that
> size.

Not only cramped, but distorted. It's become quite difficult to find a new
display in any store that is not 16:10, rather than yesteryear's CRT standard
4:3. 1024x768 on the 1440x900 most often found on 19" in stores today looks
odd indeed.

These newer displays are as a group capable of communicating the native
resolution to the operating system using it. So, the OS _should_ be
automatically using native resolution unless the user figures out how to
override it, and for whatever reason does so. On some enlightened operating
systems this is exactly what happens.

> So, knowing that resolutions have increased, here's the case for
> readability.

> 1. Wider text *is* harder to read. 

Again, wider than what? If you're always measuring width in px, outside of
your own environment, you're not using a measurement capable of relating to
good or bad. If you say wider than X words rather than wider than X px, then
you're speaking in a measurement capable of usefulness outside your own
environment.

> This is why magazine and newspaper
> layouts are multi-column.  If they were from one end of the paper to the
> other, it'd be harder to read because your head has to move, you can't just
> read with your eyes.

Typesetters know how wide is wide. They use pt, and paper. Web designers have
neither luxury at their disposal. Fortunately for some users, a few web
designers both know how to actually do use em for measuring web page layout.

> 2. In the web, the same principle *generally* applies.  And this is the crux
> of the argument here. Reading Wikipedia at 1280x960 full screen or 1600x1200
> with a partial screen is more difficult to read than at 1024x768 full
> screen.  Why?  Because at some point, you can't continue reading with your
> eyes: the screen is too wide.

Without knowing the physical dimensions of those 1024x768, 1280x960 or
1600x1200 display viewports, there's no way the designer can know if or at
what point content set in px becomes too wide for comfortable reading.

The "point" is much different on a 14" display than on a 24" display
regardless how many px wide or tall it is. The relevant way to state
something is good width or too wide width is to speak in characters or words.
Letters and words gravitate to a legible character size either by default or
by user adjustment, quite unlike px, particularly on LCD displays.

Too don't forget users have a natural defense against too wide - they can
shrink the browser width. Widening the window is no help to the visitor
finding too narrow when the designer has set some arbitrary px width.

> Ergo, the logical conclusion to these points (with regards to the initial
> question about liquid layouts) is that screen resolutions are increasing and
> if you're designing your site to have content regions of a large percentage
> of the width of the browser, you are likely to have readability issues.

Only if you insist on thinking and styling in px. Resolution need have
absolute zero impact on readability.

> Honestly, I really can't figure out the crux of your argument.  It seems to
> be the usage of ems instead of pixels in font size, but that makes no
> difference to the argument at hand.  A larger screen resolution will have no
> bearing on the actual size of 1em and the size of 1em will not change based
> on the end user's screen resolution.

Yikes! PPI has a very large bearing, and, since PPI has high correlation to
px resolution, it is expected that "higher resolution" (higher PPI) screens
use more px to define 1em. Someday if and when a CSS px is not the same thing
as a device px it won't, but we ain't there yet, and probably won't be for a
long long time. Meanwhile, PPI is already much larger than when deziners many
years ago decreed that "the defaults are too big" (61 DPI 640x480 on 13").
That hasn't been the case for a long time. Now we have a 17" 1280x1024 96 DPI
baseline, steps to 89 DPI 19" 1440x900, 90 DPI 22" 1680x1050, 94 DPI
1920x1200 for desktops, and e.g. 137 DPI 1280x800 11", 133 DPI 1920x1200, &
105 DPI 1280x800 14" laptops.

> I suppose then that you are making the point about being able to use the
> zoom or magnification within a browser

Zoom/magnification are browser provided defense against
clueless/stupid/rude/indifferent web designers.

> I'd be willing to bet decent money that the average user doesn't
> even know that option exists. 

Doesn't matter. You can't do anything as designer guaranteed to overcome. You
don't know that there is in fact anything to overcome. That you (and most
deziners) still think the defaults are wrong (body {font-size: 12px} on
http://radicalbender.com/) has zero effect on whether they are for anyone but
yourself. When you quit working on that assumption, and start working on the
assumption that they are close enough (if not perfect), by sizing in ems,
using liquid design principles, you'll eventually be making your work easier,
and at the same time you'll be forcing users to waste less time fighting you
(if they know how), or suffering (if they don't know how to use the defenses
at their disposal).
-- 
"Everyone should be quick to listen, slow to speak, and
slow to become angry."		James 1:19 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/