On Thu, 19 Mar 2009 17:28:08 +0000 (GMT)
Came this utterance formulated by Bobby Jack to my mailbox:
>
> --- On Thu, 3/19/09, Michael Stevens <bigm...@bigmikes.org> wrote:
>
> > So, is it uncommon, or bad practice, to use both in this
> > situation?
> >
> > {height: 7.2em; width: 20%;}
>
> More and more, I find myself using the two in various combinations. It
> gets particularly interesting if you throw pixels into the mix (which
> *can* still have valid uses!) and/or combine different measurements
> with, for example, width, min-width, and max-width.
>
> Generally speaking, I think the following are relevant points:
>
> 1. Line lengths are less legible if they are too short or too long;
> this suggests some level of box-sizing related to font-size, i.e. ems.
>
> 2. That's not to say the line length cannot vary; min-width and
> max-width in ems can still achieve readable copy with varying font
> sizes.
>
> 3. Horizontal scrolling is BAD. Unrestricted em-sizing tends to lead
> to horizontal scrolling, but this can be mitigated (esp. on the good
> browsers) with max-width as a percentatge - e.g. 100%
>
> 4. Users with v. wide screen resolutions might like to take advantage
> of the fact. This suggests some level of percentage-based box sizing
> (for width).
>
I use ems for widths to try to work to readable line lengths.
Recommended line lengths generally vary from 40 - 75 letters depending
on whom you are reading:
http://desktoppub.about.com/cs/typelayout/a/linelength.htm
http://blog.anthonyjones.biz/2009/01/typography-101-line-length/
http://artsci.wustl.edu/~gssw/2004/dw/typography.htm
> 5. Equally, users with narrow resolutions are increasingly common -
> mobile phones, handheld games consoles, pdas, etc. It would be wise to
> ensure your content is at least readable by them, so large fixed
> widths may not be the best long-term strategy.
>
I do use percentages for maximum widths when i consider the browser
may be anything from a phone to a very wide screen. I have also used a
pixel maximum width of around 1250 for the site design width. To cater
to IE<7 (without maxwidth support) i generally supply a fixed width on
the wrapper div, in a seperate style sheet which works for 800px
screens unless i know the customer is on 1024px throughout - in this
case IE<7 users on 800px screens scroll the menu bar out of view (bad,
yes, but these IE users are in the under 10% minority).
> I think 'combined measure' layouts are the way of the future; georg (I
> /think/ - apologies if someone else!) discussed these at great length
> in an excellent mail the other day. Em layouts have fallen out of
> favour recently with the introduction of page zooming, especially
> given that percentage-based layouts tend to behave 'nicely' with this
> technique (i.e. NOT causing horizontal scrollbars in good browser
> implementations). I don't think 'unrestricted' percentage-based
> layouts are the end of the story, though.
>
I tend to turn text only zoom on before zooming and i personally use
zoom on a lot of sites where i want to read.
> I'm currently experimenting with a (much improved) layout for my
> site's home page which will combine some of these concepts to produce
> a layout that scales nicely with font size, adapts to browser width
> appropriately, and gives everyone 'screen estate' value for money.
> More on http://www.fiveminuteargument.com very soon.
>
> - Bobby
> ______________________________________________________________________
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Michael
All shall be well, and all shall be well, and all manner of things shall
be well
- Julian of Norwich 1342 - 1416
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
