trinity-users@lists.pearsoncomputing.net

Message: previous - next
Month: October 2014

Re: [trinity-users] New TDE site released

From: Felix Miata <mrmazda@...>
Date: Wed, 15 Oct 2014 23:05:24 -0400
Timothy Pearson composed on 2014-10-15 20:49 (UTC-0500):

> Personally I don't see a problem; I asked for opinions and got them, a
> wide range of them but all favorable towards the new design.  Now we're
> just hashing out how best to handle a > 2000 pixel corner case.

Summary:

Thinking in pixels is absolutely the wrong thing to do in web styling. It's
why there's so much difficulty using the web, why people routinely use zoom
and other browser defense mechanisms.

Saying 2560 resolution is "wide" doesn't mean anything without knowing
whether the text size used on it can only fit 15 words (roughly twice optimal
line length) or has room for 30 words (way too long for comfortable
reading[1]). Setting a paragraph max-width in em (or rem) would be exactly
the right thing to do here.

Details:

2560 wide on a 40" screen is very much different than 2560 wide on a 27"
screen. Without knowing how tightly the pixels are packed, they have no
correlation to physical size, much less to whatever physical sizes are
appropriate to the user and his environment, how many pixels it takes to
render a comfortably sized glyph. Even if you knew the physical size, you
still would have no clue to viewing distance, or visual acuity of the user.

2560x1440 on 27" packs them into a space 597mm wide by 336mm high, 2010 sq
cm. 2560x1440 on 40" is 885mm wide by 498mm high, and 4411 sq cm, 219% of the
space of 27" even though only 148% of its height or width.

Luckily, you don't need to care about resolution, or density. Computers deal
with that automatically, so let them. As designer all you need to or should
care about is the relationships between the page's parts. While you could do
that in pixels, they do not adapt to user requirements. In fact, pixels
wholly and utterly disregard them.

Instead, you can use rem and/or em units, the size of letter glyphs. If it's
easier on you to visualize, convert the letters to words (increases required
math, but it works on the same principles). You could use %, but that too has
no predictable relationship to physical size, only to available space.

IOW, think how many letters tall, or how many words wide should a space be.
If you want a left side menu block to fit 20 letters, make it that many
letters wide (~10rem, because letters average half the width of the height
that equates to a CSS "size"). If you want a paragraph to be no more than 14
words wide, decide how many letters in your average words (e.g. 6), multiply
by 14 (84), then divide by 2 (half height equals average width), and you get
42em for max-width. Let the computer figure out how many pixels that requires
based on however many the browser has had its default size set to to make the
default the user's optimal reading size.

The new site already has the basics right by respecting the user's default
text size. It just could a bit of restraint so that people looking at higher
density screens than average get to see things in reasonable (and similar)
proportions instead of seeing masses of empty space if they fullscreen their
browsers. Saying 2560 resolution is "wide" doesn't mean anything without
knowing whether the text size used on it can only fit 15 words (roughly twice
optimal line length) or has room for 30 words (way too long for comfortable
reading). Setting a paragraph max-width in rem would be exactly the right
thing to do here.

[1] see e.g. http://baymard.com/blog/line-length-readability
-- 
"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/