Re: [trinity-users] New TDE site released

Timothy Pearson composed on 2014-10-15 20:49 (UTC-0500): 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/