Loading ...
Sorry, an error occurred while loading the content.
 

Grids page widths

Expand Messages
  • Duncan Wilcox
    I m working on a site redesign and I m pretty much sold on reset and fonts, I m interested in grids however I m not sure I understand its goals. I m in love
    Message 1 of 4 , Mar 12, 2007
      I'm working on a site redesign and I'm pretty much sold on reset and fonts, I'm interested in grids however I'm not sure I understand its goals.

      I'm in love with the grids concept, brilliant implementation and the layout builder. My issue with grids is that (for example) a fixed 750px wide layout really isn't fixed. It's more like 750px is the min-width, but it can get wider (much wider). Except for IE6 and below, where 750px isn't even the min-width, it's the width with "medium" text size, it can get wider *or* narrower. Not very fixed width at all!

      I understand defining text size as ems or percentages as a way to let IE6 users resize text, but I must be missing the point of defining a layout width that changes its size with the character size, particularly when a layout that is nominally 750px wide can change from 500px to 1200px (not actual numbers, but it looks like it's somewhere around that).

      Is it expected that images should be sized with ems? Background, css-refereced images too? Is it worth the hassle to have all this flexibility when the direction in which browsers seem to be heading is resizing the entire layout including images?

      Seeking enlightenment. Thanks for all the great work!

      Duncan

    • Nate Koechley
      Hi Duncan, ... Glad to hear Reset and Fonts are working for you. ... There are a few ideas at play. First of all, the 750 and 950 layouts are fixed in
      Message 2 of 4 , Mar 12, 2007
        Hi Duncan,

        > I'm working on a site redesign and I'm pretty much sold on
        > reset and fonts, I'm interested in grids however I'm not sure
        > I understand its goals.

        Glad to hear Reset and Fonts are working for you.

        > I'm in love with the grids concept, brilliant implementation
        > and the layout builder. My issue with grids is that (for
        > example) a fixed 750px wide layout really isn't fixed. It's
        > more like 750px is the min-width, but it can get wider (much
        > wider). Except for IE6 and below, where 750px isn't even the
        > min-width, it's the width with "medium" text size, it can get
        > wider *or* narrower. Not very fixed width at all!

        There are a few ideas at play. First of all, the 750 and 950 layouts are
        "fixed" in relation to the viewport: the width of the layout does not change
        as the user adjusts the size of their browser window. In contrast, the 100%
        layout is fluid in relation to the viewport.

        > I understand defining text size as ems or percentages as a
        > way to let IE6 users resize text, but I must be missing ! the
        > point of defining a layout width that changes its size with
        > the character size, particularly when a layout that is
        > nominally 750px wide can change from 500px to 1200px (not
        > actual numbers, but it looks like it's somewhere around that).

        Second, I believe layouts should expand with text size to maintain
        readability. In the opposite case, increasingly-large text is crammed into a
        static space -- which can make readability difficult.

        > Is it expected that images should be sized with ems?
        > Background, css-refereced images too? Is it worth the hassle
        > to have all this flexibility when the direction in which
        > browsers seem to be heading is resizing the entire layout
        > including images?

        You're right that many browsers are headed that way, but they're not there
        yet. Further, though IE7 offers "zoom" in addition to font-size adjustment,
        I suspect many users haven't discovered that functionality yet because the
        old-school font-size menu remains.

        Regardless of all the above, locking down the width of the layout is
        trivial:

        <style>
        #doc {width:750px;}
        </style>

        As shown here:
        http://www.yuiblog.com/sandbox/yui/v220/examples/grids/fixed-width.html


        Thanks, and let me know how it works out for you.
        Nate

        -------------------
        Nate Koechley
        Yahoo! YUI Team
      • Duncan Wilcox
        Nate, thanks a lot for your thoughtful answer. ... I see what you mean. Seeing it from the web developer point of view though, there s the easy way out
        Message 3 of 4 , Mar 13, 2007
          Nate, thanks a lot for your thoughtful answer.


          > There are a few ideas at play. First of all, the 750 and 950 layouts
          > are
          > "fixed" in relation to the viewport: the width of the layout does
          > not change
          > as the user adjusts the size of their browser window. In contrast,
          > the 100%
          > layout is fluid in relation to the viewport.

          I see what you mean. Seeing it from the web developer point of view
          though, there's the "easy way out" fixed, in the sense that the width
          never changes and you can assume pixel positions, etc. and just slap
          in the heading jpg the graphic people give you , and then there's the
          "liquid" or "elastic" layout, which is generally much harder to deal
          with. So it looks like the standard grid doesn't support developer-
          friendly fixed layout. Which I totally understand from a philosophical
          point of view, but makes it a lot harder in many cases where a more
          pragmatic, "there's no time for this" approach is required.

          > Second, I believe layouts should expand with text size to maintain
          > readability. In the opposite case, increasingly-large text is
          > crammed into a
          > static space -- which can make readability difficult.

          I agree in principle, proper line length and leading are essential for
          reading on the web, but there are a few practical problems:

          - in browsers that support min-width, the 750px layout never gets
          narrower than 750px, so while the text will never get crammed because
          the layout will grow, you will get extremely long lines at smaller
          text sizes because the layout won't shrink -- and long lines affect
          readability too

          - a user with low sight might increase the text size even on a 800x600
          or 1024x768 screen, resulting in a layout that is wider than the
          browser width -- clearly reducing readability is not desirable, but
          the horizontal scrollbar is even less desirable

          > <style>
          > #doc {width:750px;}
          > </style>

          This locks the overall layout width, but columns move around because
          they're still defined with ems. I guess that could be easily fixed,
          though there's some magic with relation to gutter sizes, right? Was
          the gutter size determined by trial and error or in a more
          deterministic way?

          Thanks!

          Duncan
        • Nate Koechley
          Hey Duncan, ... True, though I personally consider the larger fonts case more important than the small-font case. One could argue that although the ability
          Message 4 of 4 , Mar 14, 2007
            Hey Duncan,

            > you will get extremely long lines at smaller text
            > sizes because the layout won't shrink -- and long
            > lines affect readability too

            True, though I personally consider the "larger fonts" case more important
            than the "small-font" case. One could argue that although the ability to
            shrink fonts is a nicity, the ability to increase them is a priority
            accessibility accomodation. Still, your point is valid and I'll see what I
            can do in future versions.

            > This locks the overall layout width, but columns move around
            > because they're still defined with ems.

            That's a very good point. Please log that as a feature request on
            Sourceforge and I'll work to fix it for the next release.

            > Was the gutter size determined by trial and error or in a more
            > deterministic way?

            They're set at 1em in most cases (via the delta between margin-left and
            width of the two .yui-b's). In response to repeated requests I hope to add
            more sophistication to gutter management in the next release.

            Thanks for using Grids, and for all your feedback.

            Thanks,
            Nate
          Your message has been successfully submitted and would be delivered to recipients shortly.