[...] wrote an article for the new online Web Design magazine, 13things, entitled “Horizontal Flow: The Magic of Row-Based Design.” In it, I examine what the effect of column-based design has been, advantages of using rows [...]
I’m curious.. what’s more important a row? or a row containing columns?
Many of the example you referred to were row based layouts, but the rows contained columns. In a way the row were controlling the column and not the column controlling the row. I agree that a row is a superior basis for text layout but as far as readability, thousands of publications have stood the test of time to prove that shorter lines (across) are easier to read. Columns are very important. Magazine spreads, books, newsprint all utilize a column layout because of the simple fact its a shorter distance for the reader when scanning/reading a page. I believe this physical human characteristic is what has propelled the column into popularity, however when dealing with web, and “the fold” many have used it incorrectly. Perhaps because of the ever popular mouse wheel? etc I think we have to consider device aids and the medium when deciding to “all hail the row” I agree that “the row” is an important foundation for design…but it would be much less without it’s much loved friend “the column”. they both exist.. and personally I’ll continue to use both as I see fit.
Are your points are valid. I don’t mean to imply that rows are superior to columns, just that an overemphasis on columns has had some detrimental effects.
To be clear: all rows contain “stuff” and when that stuff is text it’s often a set of “columns.”
I personally can’t wait until browsers begin to properly support the CSS multi-column property which creates true newspaper columns to fit in a container “row” of any height.
I can’t wait for the multi-column prop. either. I’ve had several occasions where a client or boss has requested that and I told them it was currently possible. It’s so useful it’s surprising it’s been neglected this whole time. Do you think the multi-column property will contain and overflow value?
Good article, very well-thought out and researched!
I beg to differ with 1/2 of your points however.
Although rows are indeed easier to work with, they make reading more difficult with large paragraphs. A paragraph with a width in excess of 800px and a normal sized font approaches unreadability due to excessively long lines of text. I won’t even bring up fluid layouts and large browser windows. So although rows fit the screen better, they are less readable.
I would also contend that the rows, as presented in the article, are difficult to determine the hierarchy for relative to a columnar mode. In essence, you’ve created columns of hierarchy that are more difficult to navigate because it’s so unlike what web users have become accustomed to.
So, although it’s an interesting analysis, and would work for sites that have small discrete sections of material (like the cited examples) in broader scope this design mentality takes more work to implement rather than making things easier.
Rich, I agree with most of your points. A lengthy item of information, such as an article, news story or blog post, definitely is best-suited for a column (I mentioned blogs specifically in the article.)
Line lengths are always a concern and every developer needs to address that no matter what kind of layout approach he’s using.
It’s for the presentation of differing kinds of content that rows are at their strength.
I’m not sure I agree with rows confusing the hierarchy. Surely the top rows present what’s most important, popular, or to be considered first. As to columns/cells/items within any row, the leftmost position (in left-to-right languages like English) will likely be scanned first.
January 13th, 2009 at 11:26 am
[...] wrote an article for the new online Web Design magazine, 13things, entitled “Horizontal Flow: The Magic of Row-Based Design.” In it, I examine what the effect of column-based design has been, advantages of using rows [...]
January 13th, 2009 at 2:36 pm
Wonderfully written, Jon. Your CSS expertise knows no bounds!
January 14th, 2009 at 6:40 am
I’m curious.. what’s more important a row? or a row containing columns?
Many of the example you referred to were row based layouts, but the rows contained columns. In a way the row were controlling the column and not the column controlling the row. I agree that a row is a superior basis for text layout but as far as readability, thousands of publications have stood the test of time to prove that shorter lines (across) are easier to read. Columns are very important. Magazine spreads, books, newsprint all utilize a column layout because of the simple fact its a shorter distance for the reader when scanning/reading a page. I believe this physical human characteristic is what has propelled the column into popularity, however when dealing with web, and “the fold” many have used it incorrectly. Perhaps because of the ever popular mouse wheel? etc I think we have to consider device aids and the medium when deciding to “all hail the row” I agree that “the row” is an important foundation for design…but it would be much less without it’s much loved friend “the column”. they both exist.. and personally I’ll continue to use both as I see fit.
January 14th, 2009 at 9:00 am
Are your points are valid. I don’t mean to imply that rows are superior to columns, just that an overemphasis on columns has had some detrimental effects.
To be clear: all rows contain “stuff” and when that stuff is text it’s often a set of “columns.”
I personally can’t wait until browsers begin to properly support the CSS multi-column property which creates true newspaper columns to fit in a container “row” of any height.
January 14th, 2009 at 9:27 am
Apologies for the typo; I meant “All of your points are valid.”
January 23rd, 2009 at 6:14 am
I can’t wait for the multi-column prop. either. I’ve had several occasions where a client or boss has requested that and I told them it was currently possible. It’s so useful it’s surprising it’s been neglected this whole time. Do you think the multi-column property will contain and overflow value?
January 23rd, 2009 at 6:14 am
*not possible
January 28th, 2009 at 12:15 pm
Well done. Id like to see more sites with this layout. Its great for separating information.
January 28th, 2009 at 12:42 pm
Good article, very well-thought out and researched!
I beg to differ with 1/2 of your points however.
Although rows are indeed easier to work with, they make reading more difficult with large paragraphs. A paragraph with a width in excess of 800px and a normal sized font approaches unreadability due to excessively long lines of text. I won’t even bring up fluid layouts and large browser windows. So although rows fit the screen better, they are less readable.
I would also contend that the rows, as presented in the article, are difficult to determine the hierarchy for relative to a columnar mode. In essence, you’ve created columns of hierarchy that are more difficult to navigate because it’s so unlike what web users have become accustomed to.
So, although it’s an interesting analysis, and would work for sites that have small discrete sections of material (like the cited examples) in broader scope this design mentality takes more work to implement rather than making things easier.
January 28th, 2009 at 1:19 pm
Rich, I agree with most of your points. A lengthy item of information, such as an article, news story or blog post, definitely is best-suited for a column (I mentioned blogs specifically in the article.)
Line lengths are always a concern and every developer needs to address that no matter what kind of layout approach he’s using.
It’s for the presentation of differing kinds of content that rows are at their strength.
I’m not sure I agree with rows confusing the hierarchy. Surely the top rows present what’s most important, popular, or to be considered first. As to columns/cells/items within any row, the leftmost position (in left-to-right languages like English) will likely be scanned first.
Join in