[thelist] front end design: liquid design

[Felix Miata]

On 2008/10/28 13:02 (GMT-0700) ekm at seastorm.com composed:

> Felix Miata opined:

>> Fixed design is worse, particularly with high DPI. Text columns get just
>> too narrow to read, often 5 or fewer words per line.

> Can you give an example of what kind of "high DPI" user agent you are

I don't know what you mean. High DPI is an environment. Properly designed
user agents simply use whatever DPI everything else in that environment uses.

1-On a modern Mac, DPI is locked at an assumed 96, regardless what the real
DPI is.
2-On Windoz, the traditional default is an assumed DPI, regardless what the
real DPI is, but there it is adjustable. Laptop vendors typically preset the
higher resolution models to 120 to prevent everything from being too teensy
to attract buyers. Windoz has preset selectable DPI of 100% (96), 125% (120)
& 150% (144), but also has a scale that can be used to fine tune to anything
from 75% to 200%.
3-The newer Linux distros try to set DPI to the actual DPI of the display.
When it works the way it's supposed to, 12pt is really 12pt, as are other
physical dimensions, regardless how many px are required to achieve those
dimensions.

All versions of IE, because their default is sized in pt, automatically
resize default size and derived size page text according to DPI. Most Windoz
and Linux browsers, including IE, similarly resize UI text according to DPI.
Mac browsers lock the whole desktop, including UI, to 96, which means Safari,
Opera, Firefox, etc UI text is uniform. This behavior carries from Mac into
Safari for Windoz, which means Safari UI text on Windoz will not match the
rest of the desktop's UI if the DPI is not 96.

Most browsers other than IE set page text default size in px, which means
their defaults have 0 correlation to DPI (or to IE's defaults when the DPI is
not 96). High enough DPI users of those other browsers will find UI text is
larger than page text default size as long as they don't take it upon
themselves to adjust the preference settings to their liking.

Maybe a study of http://fm.no-ip.com/SS/bbcSS.html would be helpful here.

> talking about?  I looked at the screenshots on your previous mail; found
> that a few of the sites were unattractive but, none appeared unusable,
> with the text zoomed large.

I don't think a single one of those I listed employed either zoom or minimum
font size, so regarding "zoomed large" I don't know what you mean. Many have
such flaws as overlapping text, hidden/partially hidden text, and select
boxes and link text overflowing div boundaries. I consider all pages
containing overlapping or hidden text to be unusable, even though they
usually can be used by turning off site styles.

I have to wonder how many you looked at, and how you define usable. Maybe we
should further examine just one, from multiple perspectives. Here's one from
the previous list (made from http://fm.no-ip.com/tmp/sc-webspace1.html ):

http://fm.no-ip.com/SS/SC/sc-webspace1.jpg (big dollar, high resolution 17"
laptop)

Other looks:
http://fm.no-ip.com/SS/SC/sc-webspace2.jpg (large, extra high resolution CRT)
http://fm.no-ip.com/SS/SC/sc-webspace3.jpg (compact, high resolution 11" laptop)

Those are 1920x1200, 1920x1440 & 1280x800 respectively, and represent DPIs in
the 40%-50% above 96 DPI standard range. I have to warn you that for you to
match what I did to set up the shots will require a tiny user stylesheet to
override that site's rudeness trigger. It contains only the following: body
{font: medium sans-serif !important}. Trying to use zoom or a minimum font
size produces a quite different impact that generally defeats contextual
sizing used on the page.

If you have a typical 96 or assumed 96 DPI system, and all defaults left at
factory settings, as most web developers leave them, the URL used for making
them should have more words per line in each showcase column, as that page's
developer probably expects. It's pretty good that way, around 6-7 words per
line in the center column, close to the too narrow threshhold, using the user
stylesheet. Without the stylesheet, line length is around 8-9, better word
count, but with sub-preference text size to get there.

Conversely, in the high DPI environments, the links in the outer columns
don't fit very well in the narrow allotted space, and the line length in the
showcase center is about 4-6. I don't think most users would be very happy to
have so much available desktop space and yet be force to only so few words
per line, in short, poor usability.

This is the crux of the px fixed width problem. Developers using px fixed
widths are not embracing the web's natural adaptability. They're effectively
building magazine pages for a certain size paper, then hosting them on the
web, assuming the browser canvases of their users roughly matches their own
real size. But, there's much too much variation among assumed DPI, real DPI,
and window sizes for that assumption to work for enough users. Too many
deviate too far from the assumption.

You as developer/designer have the option to dispense with px entirely or
mostly and use the natural browser flow, via em and %, to make a
_proportionally_ pleasing page and nicely working page that produces little
or no exclusion from usability to those environments that deviate
significantly from whatever normal may be, assumed or otherwise.

> Also, it seems to be worth mentioning, every design choice has its
> advantages and drawbacks.  Fluid design trades flexibility for control. 

Ultimately designer control is mere illusion. All CSS is suggestion. It need
not be applied at all. Users can turn it off. The more sophisticated ones can
directly undo it if they care to waste enough of their time. The less
sophisticated and the rest can use web browser defense conveniences to
override or defeat, such as ignoring color entirely, ignoring font sizing
entirely, or applying zoom or minimum font size.

> And honestly, in the real world?  Front end *developers* are hard pressed
> to find opportunities to use fully fluid design, since *designers*
> generally opt for control (or the illusion thereof) over flexibility.

I have a few simplistic examples of non-fixed design that are supposed to
show there's really no need to try to lock anything down with px. Try viewing
with rather wildly different font and window sizes at least, if not different
resolutions if you have display(s) that permit it (if you don't, you should):
http://fm.no-ip.com/indexx.html
http://fm.no-ip.com/auth/Sites/dlviolin.html
http://fm.no-ip.com/auth/Sites/ksc/

Eventually the consumers of deziner services should start to wise up, shun
the [shyster/naive/stupid/indifferent/rude] deziners foisting Photoshop
magazine pages onto internet users, and start using real web designers, those
who understand all of the web's inherent nature, user nature, and site owner
needs, and build to synergize them instead of pitting one's needs against the
needs and desires of the others.
-- 
"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/