I'm curious to learn how designers throughout history have dealt with this problem Joni mentions — typesetting a small amount of content, or content in a specific (and therefore limiting) format, given a spacious canvas.

Off the top of my head, some options are:

* Size to fit (success depends on reading distance)
* Flow to multiple columns (CSS can't reliably do this yet)
* Establish specific boundaries using edges or borders
* Establish periphery using subtle color shifts or illustration
* Position content tastefully, risking feeling of emptiness

Part of me wants to believe that designers throughout history, because of the finite nature of physical materials and the ability to dictate paper size, never had the problem of too much space.

twitter.com

Of course! Rearranging UI.

twitter.com

Re: Flow to multiple columns.

These are very hard and new problems to solve. Horizontal columns and pages can help the situation by allowing the content to stay narrow as it is stacked side by side. Implementing this responsively anywhere, particularly on the web can be incredibly difficult.

As web designers I think we can do a better job staggering our text columns, media and playing with white space instead of shipping a monolithic column of text and images. This only goes so far until the canvas is, yet again, too large for content that flows in a single direction.

Content flows a lot like a river and when things get too wide things start flowing more like a lake.

I'm currently experimenting with bi-directional scrolling and "infinite canvas" stuff. Not sure how it's going currently, and there aren't many existing examples at all, but here's one: fieldnotes.iancoyle.com

It's a difficult one. The finite/fixed properties of printed materials throughout history allowed for multiple columns and mixed media layouts with ease and without consequence. Obviously we work with an infinite canvas in our medium which in turn makes this effect tricky but it is certainly not as limiting as printed material.

I wonder are there any off canvas techniques we can make use of? I was lucky to be part of the Typecast team (beta.typecastapp.com) which offers off canvas columns as a way of navigating between workspaces - perhaps something similar can be achieved for displaying content for. If you could reliably display multiple columns with off canvas "pages" it would solve the problem of needing to know content length.

*"displaying content for." - "displaying content for reading"

Off canvas introduces new awkward scenarios - it may be more effort for the reader to move to the next pane/page than a regular scrolling environment and you risk problems with widowed lines especially when the layout is responsive. To alleviate the problem you may need to start looking into algorithms to stop this from happening which isn't ideal either.

I am sure we are going to see scenarios like this in Windows 8 where they make use of off canvas techniques in their phone and desktop environments. Perhaps it may offer interesting approaches to our problem.

twitter.com

The major problem I find with infinite canvas techniques is with navigation. It's immensely disorientating to be thrown far into the corner of an interface after clicking a link. Even if a navigation bar follows your movements it still feels wrong.

But I wonder if zoomable user interfaces can help with this in any way. Haven't heard much serious discussion on this front in quite a while so maybe everyone's already come to a unanimous decision about them. However...it does solve the problem of navigation. Zoom in to learn more, zoom out to see an overview. Everyone knows how this works instinctively.

fittextjs.com

Regarding Tim's point about sizing to fit and reading distance - I think getUserMedia will provide opportunities for some interesting experiments in this area. With user consent we could use their device's camera or webcam stream to detect motion or trace their silhouette onto a canvas and potentially gauge their distance from the screen allowing us update font size and leading accordingly.

Sources - dev.w3.org
adobe.com

Good point Jordan, but the Pixel and other fixed units are already designed to scale based on distance from the source. Of coarse this is not how it always works. Curious how things like the 80" supposedly coming from Microsoft will work as the view distance can be up close or far away (theverge.com).

The vh and vw units offer another solution similar to fittext js where typography can scale based on viewport dimensions. Not just headlines but body copy as well.

The issue of the infinie canvas remains. How would something as extreme today as a wall that users are supposed to work with at close proximity work? Does the size of the text scale up or does the canvas take on some other purpose? Do we need to start mapping more content on to these nearly infinite screens and come up with new UI for our websites? Are there situations where simply making things bigger break down? A good place to find design solutions now might be in museums or monuments. How do the giant walls of The Lincon Memorial effect our reading of The Gettysburg Address? How are plaques positioned next to exhibitions to add context to what we are viewing?

As for the infinite canvas, I believe it's still manageable using a mac (with trackpad or magic mouse) that allows for two finger scrolling, horizontal and scrolling quite easily.

I'd reckon Windows users would have a far less optimal experience with it.

Still, for conceptual and deliberately different web venues (or sites hehe) than usual, it can work if you leave trails like that example @Joni posted.

As for filling out the space available, I've always refrain from using multi-columns unless you can check or control the viewport and content length.

Jeremy has posted about using MQ to control this and enable/disable columns.
(adactio.com)

However, we can start experimenting with max-width setting a maximum length for lines but if the article is divided into small-enough sections, perhaps we can allow multi column layouts on each section of the content... unless it goes over the viewport height. In that case: 1 column, less width, centered would be used.

Has anyone ever found such a layout in use on the wild? How did it *feel*?

I like the museums/monuments analogy, @Scott.

Posters too. They have two jobs: catch attention from a distance, and provide more info up close. The reader is responsible for the transition — moving physically closer, changing perspective.

<a href="thegreatdiscontent.com Great Discontent</a> does a great job of navigating this duality, but the challenge isn't exclusive to publications. It's everywhere. When a fit headline (as in FitText'ed) rests above text meant to be read, that's the challenge in a nutshell.

twitter.com

I also like the idea of infinite two-dimensional canvas — I think it's more better for visualising data from a relational (highlighting links between paragraphs/images/videos/...) point of view, opposed to a single column layout which assumes data have some order (chronological for examples) which isn't interested in most cases...

I'm sure you have all read Allen Tan's Made to Measure over at Contents Magazine (contentsmagazine.com) but I thought it would be useful to reference a couple of points from it for the purpose of this discussion. 

"Because publishers intimately understand their material, they can put out content-specific design that is beautiful in addition to readable, with a number of visual entry points that turn skimmers into immersed readers, and that so accentuate the unique facets of their content that readers will prefer to read on the original websites and not elsewhere."

If you have a good knowledge of the general shape of your content then you are in a good position to start making suitable passive casts for allowing the content flow into. I see this as an extension of EM based media queries like The Goldilocks Approach where width, content shape and length can trigger suitable conditions to enhance readability through passively casting our content. 

In his article Allen provides a styleguide to demonstrate how the less rigid containers might look — contentsmagazine.com and how they might work in practice — contentsmagazine.com

Scott mentioned another point on twitter that resonated with me — "Responsive web design is not about designing layouts, it’s about designing layout systems." (twitter.com)

By knowing the content's features helps us figure out our passive casts and hopefully help us shape (with a bit of tailoring) more immersive and engaging experiences.

"Layout suites" is a term I've been kicking around in my notes.

"Layout suites" is a lovely description. For me it conjures up thoughts of feng shui which isn't far from what we are trying to achieve — "feng shui: A system of laws considered to govern spatial arrangement and orientation in relation to the flow of energy"

I made a simple page showing an idea I had after reading this thread. Like André said, you should refrain from using CSS columns unless you know the size of both the content and the viewport. Even though the viewport height is accessible in CSS, the content height isn't. (Unless it's equal to the viewport, which is seldom the case.)

So I used jQuery to compare the height of these 2, and only apply a 2nd column when the viewport is wider than 900px (mediaquery) and taller than the content (jQuery).

Any thoughts about this?

A great conversation. What if we adjust the appearance of the content depending on the available screen size? E.g. an article could be presented in simple, one typeface, one color, one-column layout on narrow screens and grow into rich, magazine-alike multi-column layouts on larger screens. There, an article could have larger blockquotes and images spanning across multiple columns, with heavily used typography, vertical rhythm etc.

I would love to see the content being transformed from one layout into another on larger resolutions. We shouldn't forget about print layouts either. We actually can use some of the typefaces we use on websites in print stylesheets as well.

Something like that, but way more advanced:
seanmcb.com

Actually, that's something that I was thinking about but on a larger scale: thegreatdiscontent.com

We did a lot of multi-column responsive design at Treesaver. This is a little easier said than done until CSS regions and pagination gain some traction. Treesaver uses JavaScript to not only paginate but algorithmically find the page template that best fits the content. This is a must when dealing with an infinite number of sizes and layouts. Treesaver still has room to grow as it is adaptive, not responsive which limits how it can scale to smaller devices. Content needs to be created to fill these pages, it can’t be pulled from the air.

There are a huge number of wayfinding issues with multi-column text and vertical scrolling as outlined by @iA: informationarchitects.net. All of witch can be overcome with a left to right scroll or pagination.

Completely agree with Scott here. There are ways to make it work, but overall, the readability, and usability is poor, causing the reader to have to do way more work to understand where they are and where they should look next.

Jacobs demo is interesting, but further proved to me that it is incredibly hard to orient yourself with that kind of layout.

All that said, I think it can be used to great effect in some situations, esp where the columns are short and connected to something else (such as a photo, chart, etc).

I'm testing a crazy responsive concept with tons of horizontal scrolling and manual column breaks. jonikorpi.com

So far, the downsides are pretty obvious. But so are the benefits.

What a lovely concept, I am a sucker for off canvas patterns, speaking of which Luke Wroblewski and Jason Weaver would probably have interesting points to add to this discussion.

Here are a couple of off canvas concepts I developed a while back for small contexts — jordanm.co.uk and jordanm.co.uk - the latter only plays nicely on iOS for the time being but it gives you an idea of the concept - the viewport docks to each pane

Joni, that is an awesome experiment. I find that it's best suited to the iPad. It's pretty good on the iPhone, but, again, it takes some guesswork to know that each of those sections are swipeable. I find that on the desktop, (on a Mac) the horizontal scrollbars aren't apparent and it took me a bit to realize things were horizontally scrolling.

Regardless, this is a great test of what can be done and I really look forward to seeing where you push this!

Great link and it is exciting to see new UIs like Microsoft’s Metro stuff experimenting a lot with this. However if the viewport is the canvas basic scrolling is an off canvas technique limited to one dimension. Like @andreypopp posted above utilizing other dimension can create really powerful and surprising user experiences.

twitter.com

twitter.com

@Scott I also tried a ZUI with this same site earlier. Ran into two huge problems:

1. Browsers have a minimum font-size, so you can't em-zoom text elements to be smaller than that ~9–12px (depends on user preferences).
2. When zooming a large number of elements out with 3D transforms or scale transforms, scrolling performance just seems to die. I'm not front-end developer, so I don't know exactly what happens. No idea why Impress.js works so well.

I gave up pretty quickly, because the UI required a huge amount of Javascript and/or manual positioning to function. Not very webby.

Thanks for the insightful comments, Scott. I understand that the implementation would probably be extremely difficult and the design process for those kind of articles / editorial would be very time-consuming. It would also dramatically increase the complexity of the development process and maintenance. And it's definitely not an option for most websites out there.

It would be interesting to explore the content in terms of objects or components. Where we would essentially include a series of different elements into a encapsulated content component and then trigger some of the elements for certain screen widths/heights — of course, having the bandwidth considerations in mind. Content is fluid, but what if we gave it some shape?..

Just realised Thinking for a Living hasn't been linked in this branch yet: thinkingforaliving.org

Their layouts are very similar to what I'm moving towards with my redesign. With the current state of CSS, browsers and our input devices, a horizontal layout like theirs seems inevitable. Seems like it's currently the only sane alternative to a regular vertical layout that you can achieve without relying on a huge amount of Javascript.

Adding some relevant horizontal patterns - dribbble.com ligatureloopandstem.com

I think horizontal layouts need invisible elastic anchors to help lock the layout along specific points rather than stopping at the user's scroll position when they release. I'm thinking specifically in small contexts where padding around text content could easily be clipped and hamper the reading experience.

I guess it's more of an issue in horizontal layouts rather than vertical - when a user scrolls vertically through a long block of text, clipping occurs line by line as they leave the viewport whereas horizontally you can potentially clip an entire block of lines by their first few letters.

swipejs.com anchors panes nicely on touch devices.

I feel that the problem with so many of these solutions is that they account for scaling type size, but not margins.

A scroll-like, columned layout seems like an ideal approach, but I would love to see something like thinkingforaliving.org blown up so that we were only really focusing on one major column at a time.

Speaking of content transformation ... (@Vitaly): lab.yiibu.com

Not responsive, but gosh. pitchfork.com

Heads-up, if you try and view it on iPhone, it will crash Safari :\

But, dang, that is pretty awesome on the web.

My feeling is that the whole thing kinda boils down to what user experience we want to deliver. What we got at the moment can hardly be the best possible reading & consuming experience on bigger screens. Why haven't we managed to beat the book UX here? On mobile devices apps like Instapaper are doing a great job & I think they are very close, perhaps even a bit ahead. But from iPad up to bigger screens we haven't found the way that exceeds a book experience. The more space we have, the more difficult it seems to get. I think that is the base problem we need to solve. Not from a technical view. That's just a matter of time & energy invested. But from the UX point of view. How do we consume information the best possible way on big screens?

I think Sven, you may have hit the nail on the head there by exposing where things break down.

It seems that the natural urge is to try and fill a large screen when we already know from years of reading books, what a comfortable measure and/or line length is. Combined with an appropriate size and lead for the reading distance, we should have something pretty close to great.

However, the trend these days is to push type up huge, filling up whatever screen we have to use - going against a lot of what we know makes for a better reading experience. In responsive or fluid layout, unless you take a stance towards defining sensible max-widths, a lot of copy is awful to read. Perhaps we need to start faking a page again and get some control back.

Not to be a massive tease but I am going to be talking about EXACTLY this issue that Alex is talking about next week at Smashing Conf and will have something for you all to play with then :) #totallygonnamakeyouwait

Ooh you meanie :)

Sounds interesting Josh. I will be there too. Not at the conf itself, but participating in Aarons Interface workshop. Had I known you would touch such an interesting topic I would have got me a regular ticket too.

After spending some time with the horizontal layout (with manually broken columns) I linked earlier in this branch, I'm actually enjoying reading in it way more than in a traditional vertical layout.

The column breaks are acting as wonderful "wayfinding aids" for quickly scanning through an article. On a widescreen monitor I feel like I'm getting a bird's eye view of the entire article with a single glance. That would be impossible with a single-column vertical layout.

Surprisingly, they're also acting as a great **writing** tool, helping me gauge the rhythm of my writing: "this section is already over 2 columns long… maybe I should shorten it so that it won't overpower the other single-column sections."

I'm kinda excited about this.

@Joni: But this is something you tailored to your screen dimensions, isn't it? This kind of layout is nearly impossible to adapt to different screen sizes (Due to the manual broken columns). I really like the idea. But the problems come with the different heights you would need to fit your columns to get the best user experience. This is easy in print, due to knowing the sizes while layouting the book. But this doesn't work online.

But I like the concept & thinking of doing something similar in my desktop app (newnet-soft.com). I will see how it works out...

@Sven: As long as you keep your columns relatively short, you can make the layout adapt to a pretty wide variety of vertical sizes by adjusting font-sizes and outer margins.

But yep, no way to make it fully vertically responsive. In some cases there will be vertical scrollbars.

No perfect solutions to this problem, it seems. :(

@Joni. Yes, agreed. So far at last.

Interesting approach: treesaverjs.com

@markboulton brings up some great typography points to consider when it comes to flexibility and readability as well, tinyurl.com

It might be worth keeping an eye on progress of the new Myspace as the demo video shows some of the horizontal layout and vertically responsive mechanisms we have been discussing - new.myspace.com

This is a subject I think about often…

Are we perhaps starting off on the wrong foot by trying to apply classic typography rules that apply to books? I'm not dismissing this historical knowledge by any means… but a lot has changed/changing - people read differently now, screens render fonts differently, people read in different scenarios. And I haven't even touched on screen dimensions!!

I think we need to experiment more, and conduct more research on new reading habits and line lengths. The results may be surprising.

And on the layout side: again books can be taken out of their context. A beautiful white book could be read on a dark table. This is not dissimilar behaviour to a narrow site on a large screen - is it as bad as we think?

One rule we can break comes to mind: compactness.

Paper is expensive, pixels are free.

Interesting article in this context...

If you have a UI and content that is conducive to rearranging, and you're willing to try to do it and do it well, more power to you. For practical purposes, I'm still happy to establish a rigid (or semi-rigid) content area and confine my material therein.