[Wylug-discuss] a webdesign query / mini rant

[Dave Fisher]

On Sat, Jan 14, 2006 at 01:11:42AM +0000, Smylers wrote:
> chris writes:
> 
> > thanks everyone!
> 
> Glad to help!
> 
> > i have swiched the stylesheet to work in px values,
> 
> They are my least-favourite CSS unit.  A good site should scale well, so
> that it is still usable in small browser windows, for those with small
> screens, and in large windows with large fonts, for those with poor
> eyesight.  In general that involves using relative lengths (for example
> em), so that the sizes of other page elements scale along with the text
> size.

Hi Chris,

I'd like to backup Smylers on this and to clarify a point that I made
earlier.

When I said that it was difficult to get stretchy designs right, I
didn't in any way mean to suggest that people should use fixed or
pixel-based layouts.

Like Smylers, I consider stretch design to be an intrinsic part of cross
platform interface design and a requirement for usable web pages.

The main point I was trying to make was that of the two layout methods
(float vs position), the latter is more robust, because of the
catastrophic way in which float layouts break.

If you have borders on your column divs, stretchy positioned layouts can
also break due to insufficient container width, but they do so less
dramatically.  

Typically, columns at the left and right will slightly overlap columns
in the centre of the page. In some circumstances, the container will
simply expand beyond the right edge of the viewport (browser window).
Both are ugly, but neither is catastrophic.

With good knowledge of CSS fundamentals, and a certain amount of
experience, you can make both float and positioned stretchy layouts
very pretty and pretty much unbreakable across browsers. 

This is partly a matter of avoiding settings which prevent related
widths from scaling proportionately to one another (e.g. mixing pixel-
or em-width borders with percentage widths on the rest of a box, or
unecessary use of the width property when margins and offsets will do).

Its also partly a matter of knowing when to use the less obvious
features of CSS (e.g.  using auto widths and min/max dimensions to let
the browser re-size margins or content to keep stacked boxes within
their containers).

Having said that stretchy designs are good, and quite achievable with a
bit of effort/learning, I would like to question the wisdom of _always_
using percentage widths on columns.

It's a long established fact that people find it hard to read very long
lines of text (> 8-12 words), even when they don't have to scroll
horizontally.

Setting widths in ems and also setting maximum widths (ems or
percentages?) would allow horizontal stretchiness without taking it to
extremes. Remember, if mad people really want 30 word lines, they can
always override your settings in a user stylesheet (browser
preferences).

Having made that caveat, I think its worth saying that I can't think of
any sane justification for setting a pixel-based height on a page.

It's a general principle of CSS design, that you can't sensibly
constrain the height of text boxes, because users will always have
different font-sizes/screen-sizes, so you can't predict the total space
that everyone needs for the same textual content. 

Since horizontal scrolling makes text much harder to read than vertical
scrolling, the obvious thing is to allow 'excess' text to flow down the
screen as far as it needs to.

Dave