5 ms·

I'm really not enthused about bringing multiple column layouts to the web. Yes, they are a staple of print - so is getting newspaper print on my hands. Should w

by ZoFreX 15y ago

I'm really not enthused about bringing multiple column layouts to the web. Yes, they are a staple of print - so is getting newspaper print on my hands. Should we be building USB fingertip-dirtyers? Multi-column layouts are a case of humans having to adapt to the constraints of the medium; as we move to the future, our content should be bending to our will, and not the other way around.

simanek 15y ago
As far as continuous text goes, you're right. These features probably will get used in horrible ways. But even without these features available there are already many well-designed column-based layout examples out there. Not to mention, "constraints of the medium" could take on a whole new meaning as the wide array of display sizes continues to increase. It will be more and more necessary for web designers to create designs that easily adapt to various displays. They call this "responsive web design" and if you are practicing it right now you are an exception. Soon it will be a necessity and these new CSS capabilities look to be well suited to this purpose.
mechanical_fish 15y ago
The problem is that we're not in 640x480 world anymore. We're rapidly leaving 960px-width-world. Our displays are finally getting denser (which lets us use smaller font sizes successfully) and wider. And the desire to avoid 120-character-wide columns isn't some arbitrary fetish of print design. Over-width columns actively hinder readability. Robert Bringhurst: Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed typeface in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters. If the type is well set and printed, lines of 85 or 90 characters will pose no problem in discontinuous texts, such as bibliographies, or, with generous leading, in footnotes. But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading. These typographical rules of thumb are ultimately derived from human physiology -- limiting the range through which the eye has to skip left and right makes reading more relaxing, and the mental act of trying to go from the right edge of a mile-wide paragraph to the left edge without losing one's place is fatiguing. [1] Up to now web designers have coped by forcing a single column, forcing that column to be of limited width, and just padding out the remaining width with navigation elements or whitespace. But the whitespace begins to look ridiculous when it's 80% of the width of the screen. So we're probably going to see more instances of successful multi-column layouts. This is likely to break continuous scrolling, but on a device which supports useful multi-column layouts you'll probably be okay with page-by-page scrolling. Or, well, not. We shall see. --- [1] I highly recommend resizing the HN screen if you want to read one of my doorstopper comments. ;)
- ZoFreX 15y ago
  Oh, I know full well that narrow columns are easier to read. I'm just not convinced that jumping from the bottom of one column to the top of the next is easier than scrolling and thus reducing vertical and lateral movement of the eyes. To me it seems optimal to reduce eye movement, but in fairness I am just assuming that is the case and drawing my conclusions from that assumption.
  - pavpanchekha 15y ago
    Most of the cases where I've wanted to use multi-column layouts were cases where that would let all my content be on one page. The benefits to all your content being visible at once are pretty great, so I'm happy newer CSS specs help.
    - ZoFreX 15y ago
      I'll have to have a play with it then :)
- pizza_ 15y ago
  Indeed, on my average LCD screen your post is ~150 chars wide.
nikcub 15y ago
newspapers don't display text in columns not just because it is easier to layout, but also because it is easier and faster to read. the optimum display settings for reading speed is two columns of an average width of 14 words. there has been a ton of research in this area[1] [2] [1] http://edlab.tc.columbia.edu/files/eye-tracking%20article.pdf http://edlab.tc.columbia.edu/files/eye-tracking%20article.pd... [2] http://www.springerlink.com/content/03310aej5bx4lekk/ http://www.springerlink.com/content/03310aej5bx4lekk/
- iaskwhy 15y ago
  Why is it faster to read two columns instead of just one? I can think of a reason: getting your head lower and eventually turning the page makes it slow to be only one column but on a screen you just scroll and scroll... (I cannot read the articles right now, if the answer is there just ignore me.)
  - jdunlop 15y ago
    Your brain might be able to skim faster when it has visible markers to use. I often use lines/paragraph breaks as these markers (on top of punctuation). It's easier to get lost in really long text lines than it is in short ones.
ColinWright 15y ago
I long for multi-column text. I hate scrolling, but worse, I hate getting to the end of a screen-width of text and then having to flick back to the left and work out which line to start on. Text should be in 8 to 10 word lines for optimal readability - much longer and it slows down your ability to read quickly and effectively. Your mileage will vary, and I'm not saying that everyone has the exact same preferences or requirements, but I can't wait for easily rendered, reliable multi-column text. Some references: http://baymard.com/blog/line-length-readability http://baymard.com/blog/line-length-readability http://www.456bereastreet.com/archive/200509/line_length_and_readability/ http://www.456bereastreet.com/archive/200509/line_length_and... http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng... http://www.bastoky.com/KeyRelations.htm http://www.bastoky.com/KeyRelations.htm
- fortybillion 15y ago
  The issue with columns in web browsers is the variance in screen height. Clearly it would be worse to render an entire long-form article in 3 columns, forcing the user to scroll back up to the top of the page to start reading the next column. This forces the designer to break the content up into multiple column blocks based on a target screen height... so now we have the same problem, only on a different axis.

by ZoFreX 15y ago

simanek 15y ago

As far as continuous text goes, you're right. These features probably will get used in horrible ways. But even without these features available there are already many well-designed column-based layout examples out there. Not to mention, "constraints of the medium" could take on a whole new meaning as the wide array of display sizes continues to increase. It will be more and more necessary for web designers to create designs that easily adapt to various displays. They call this "responsive web design" and if you are practicing it right now you are an exception. Soon it will be a necessity and these new CSS capabilities look to be well suited to this purpose.

mechanical_fish 15y ago

The problem is that we're not in 640x480 world anymore. We're rapidly leaving 960px-width-world. Our displays are finally getting denser (which lets us use smaller font sizes successfully) and wider. And the desire to avoid 120-character-wide columns isn't some arbitrary fetish of print design. Over-width columns actively hinder readability. Robert Bringhurst: Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed typeface in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters. If the type is well set and printed, lines of 85 or 90 characters will pose no problem in discontinuous texts, such as bibliographies, or, with generous leading, in footnotes. But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading. These typographical rules of thumb are ultimately derived from human physiology -- limiting the range through which the eye has to skip left and right makes reading more relaxing, and the mental act of trying to go from the right edge of a mile-wide paragraph to the left edge without losing one's place is fatiguing. [1] Up to now web designers have coped by forcing a single column, forcing that column to be of limited width, and just padding out the remaining width with navigation elements or whitespace. But the whitespace begins to look ridiculous when it's 80% of the width of the screen. So we're probably going to see more instances of successful multi-column layouts. This is likely to break continuous scrolling, but on a device which supports useful multi-column layouts you'll probably be okay with page-by-page scrolling. Or, well, not. We shall see. --- [1] I highly recommend resizing the HN screen if you want to read one of my doorstopper comments. ;)

ZoFreX 15y ago
Oh, I know full well that narrow columns are easier to read. I'm just not convinced that jumping from the bottom of one column to the top of the next is easier than scrolling and thus reducing vertical and lateral movement of the eyes. To me it seems optimal to reduce eye movement, but in fairness I am just assuming that is the case and drawing my conclusions from that assumption.
- pavpanchekha 15y ago
  Most of the cases where I've wanted to use multi-column layouts were cases where that would let all my content be on one page. The benefits to all your content being visible at once are pretty great, so I'm happy newer CSS specs help.
  - ZoFreX 15y ago
    I'll have to have a play with it then :)
pizza_ 15y ago
Indeed, on my average LCD screen your post is ~150 chars wide.

nikcub 15y ago

newspapers don't display text in columns not just because it is easier to layout, but also because it is easier and faster to read. the optimum display settings for reading speed is two columns of an average width of 14 words. there has been a ton of research in this area[1] [2] [1] http://edlab.tc.columbia.edu/files/eye-tracking%20article.pdf http://edlab.tc.columbia.edu/files/eye-tracking%20article.pd... [2] http://www.springerlink.com/content/03310aej5bx4lekk/ http://www.springerlink.com/content/03310aej5bx4lekk/

iaskwhy 15y ago
Why is it faster to read two columns instead of just one? I can think of a reason: getting your head lower and eventually turning the page makes it slow to be only one column but on a screen you just scroll and scroll... (I cannot read the articles right now, if the answer is there just ignore me.)
- jdunlop 15y ago
  Your brain might be able to skim faster when it has visible markers to use. I often use lines/paragraph breaks as these markers (on top of punctuation). It's easier to get lost in really long text lines than it is in short ones.

ColinWright 15y ago

I long for multi-column text. I hate scrolling, but worse, I hate getting to the end of a screen-width of text and then having to flick back to the left and work out which line to start on. Text should be in 8 to 10 word lines for optimal readability - much longer and it slows down your ability to read quickly and effectively. Your mileage will vary, and I'm not saying that everyone has the exact same preferences or requirements, but I can't wait for easily rendered, reliable multi-column text. Some references: http://baymard.com/blog/line-length-readability http://baymard.com/blog/line-length-readability http://www.456bereastreet.com/archive/200509/line_length_and_readability/ http://www.456bereastreet.com/archive/200509/line_length_and... http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng... http://www.bastoky.com/KeyRelations.htm http://www.bastoky.com/KeyRelations.htm

fortybillion 15y ago
The issue with columns in web browsers is the variance in screen height. Clearly it would be worse to render an entire long-form article in 3 columns, forcing the user to scroll back up to the top of the page to start reading the next column. This forces the designer to break the content up into multiple column blocks based on a target screen height... so now we have the same problem, only on a different axis.