is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Please refer to the advertising and sponsorship page for inquiries.
+
I’m interested in the issue on a conceptual level, but have some basic reservations about it since, unless the content is brief enough to fit on a single screen, whatever the device, one still has to scroll to read it, albeit horizontally. This is the case with Thinking for a Living in its current design. Furthermore, as I’m reading it on a MacBook Pro with a 15″ screen, I’m having to scroll both horizontally *and* vertically, which is hardly an improvement, though the site is beautifully made and the content quite interesting.
“I think horizontal scrolling in desktop experiences is probably a nonstarter, but the idea has more than a fighting chance on the iPad”
Completely agree. I was trying to browse one of Frank’s sites (Thinking for a Living) on my 13inch Macbook at it’s max resolution. With the side scrolling turned on, the site was not at all pleasurable to browse.
I think it basically comes down to multiple screens/multiple devices that make it so hard to do horizontal scrolling. The fixed screen size/resolution of the iPad/iPhone are a big reason of why I like designing for them so much. I’ve done android apps, and frankly, I have no interest in doing any more, iPhone and iPad are so much more consistent across the board.
I’ve been thinking about the very same thing and wanted to test this out. Whilst building this UI I did have to figure out the vertical scrolling when content gets too long issue also. The solution seems to be columns and using JS to restrict the height of those columns and add news ones when required.
See WeeklyRetrospect.com for what I mean. It’s not as pretty as Thinking for a Living but it is functional…
I definitely thinking horizontal scrolling better suits lots of different devices (such as iPhone, iPad, TV and with the WR implementation, even desktop computers.)
Thanks for your comments, all.
I agree, the experience isn’t really satisfactory for those on smaller screens when they need to scroll in two directions. Unfortunately, we’re forced to do hand-column breaks with our content right now and we’re sort of guessing at what works the best with the content at hand and for most users at most screen sizes.
Also, this horizontal arrangement is meant for reading text at length. I’m not sure how it would work with shorter format writing, such as most blog posts and a lot of content online.
I look forward to a time when we’ll be able to use CSS to break our text into columns and have a dynamic height for the vertical measure. I’m aware that CSS3 supports breaking text in to columns, but in my limited tinkering with it, it only supported fixed height for columns and not dynamic. If I’m incorrect, I’d love to hear about it!
@Frank — Dynamic heights can be achieved with Javascript.
All you need is a fixed column width and you can take the original height of the content, divide it by the current height of the window, round to integer and you have the number of required columns at that width. Then you set the width of the content container as “width*number of columns” and, assuming you’ve set the column width in the CSS, it should all work out.
WeeklyRetrospect.com is where I’ve made this work.
“…this horizontal arrangement is meant for reading text at length. I’m not sure how it would work with shorter format writing, such as most blog posts and a lot of content online.”
Frank, I’m curious: why does the horizontal format seem more appropriate to you than the vertical for extended reading?
At bottom, the issue seems one of reading one long column vs multiple shorter ones. Though I find the horizontal format of Thinking for a Living beautiful, aesthetics aside I’m not sure I would say it is preferable. I don’t feel the vertical format is either, BTW. They just seem two ways of accomplishing the same task: presenting content to the reader.
@Nipperkin — I think the benefit comes with the fact that you can control the column width and maintain a uniform reading direction (ie. the next column to read will be to the left as opposed to it will be to the left OR if it’s the last column on screen it will be the first column on the next row down.)
We all know that reading is easier at optimised column widths and to control column widths (and maximise use of space, ie not just have one long column at a correct width but have columns fill the spaces next to each other) it makes more sense for these columns to run horizontally — granted you make sure the height of the columns is the same height as the viewport.
In essence, we limit scrolling to one direction.
@Ludwig,
Thanks for the explanation. What you’re saying is definitely logical, but how is it different from having a single vertical column with a fixed width? Even if the reader enlarges/reduces the size of the type by hitting command + =/command + -, the column width changes too and thus the number of words/characters per line remains the same. And I agree that limiting scrolling to one direction is best, but again, we have that already with vertical scrolling.
Not trying to be a PITA, I just honestly don’t see much difference between the two.
It’s the difference between say reading a newspaper and a literal scroll. In one the content is divided for you already into finite sections (each column) much like a book is divided into pages. Compare this to a scroll where there is no finite divisions and instead a continuous “reading.”
Finding one’s place within a document with finite divisions is much easier than doing so within a continuous document.
This comes back to the conversation about Spatiality on an iPad.
It’s easier to find one’s place and know where you are. I find a printed essay much easier to read than say a 7,000 word essay online for this very reason.
I guess I don’t have that much of a problem with the continuous vertical scroll, nor see much of a difference between a long single-column text and a long multi-column one (i.e. how is it easier for the reader to find his/her place at the bottom of the eighth column of a fifteen-column piece than at the end of the twenty-sixth paragraph of a single column one?) If the text is articulated with section titles and/or illustrations, that obviously helps, but if it’s pure text, I’m not sure the multi-column horizontal format is going to make much difference with respect place-finding or readability, per se, that being more an issue of type size, leading, and column width.
For what it’s worth, the only place I read *long* electronic texts is on the iPhone using Instapaper, which will save my place if I need to interrupt my reading. (I routinely save multi-page texts for reading in this way, rather than have to deal with them on-line. Either that, or I print them out.) In fact, I’m not sure that the screen is the best place for extended reading, whatever the format or device. That said, I follow along with interest.