Friday, 20 February 2009

Columns Conversations

Today I had a fun lunch with Web developers at Shift (not all of whom work there). It was a follow-up on a short discussion at Kiwi Foo about columns on the Web. My goal was to brainstorm with some Web developers/graphic designers/user experience people about ways to display lots of text on large screens, and in particular to tackle the difficult problem of what to do when the text can't all fit.

We talked through various options. There was quite a lot of interest in using fixed-height columns and adding columns horizontally for overflowing content, and having users scroll horizontally to see the content. This is pretty well supported by the CSS3 columns spec and the Gecko implementation, although to make it more useful we'd have to work on horizontal scrolling UI and implement viewport units so an element's height can be related to the window size.

There was also quite a lot of interest in using fixed-height columns but adding overflowing columns vertically below the first set of columns, giving the effect of a set of pages laid out top to bottom. This is currently not supported by the spec or our implementation, although it wouldn't be too hard to add. This would require more UI work, to make it easy to scroll up or down by exactly the height of one of these pages. Continuous scrolling mechanisms like mousewheels would be hard to integrate.

Either of those approaches could be modified to try to avoid scrollbars and instead offer a UI based on pagination --- "next page", "previous page" buttons or even "next column", "previous column".

Another idea that Ross Howard raised, one I hadn't thought about, is to have scrolling actually happen *within* columns. So there's a fixed number of columns of fixed height; if content overflows, then initially it's not visible beyond the last column. But there's a UI "scroll down" action which removes content from the first column and pulls the rest of the content "up" through the columns to fit.

A good point that was raised during these discussions is that smooth scrolling is important to help users not lose their place during scrolling. It's not clear how that would work with the scroll-within-columns idea, though, since moving content within columns has to change the layout at column boundaries to choose tasteful column break positions.

It would be cool to provide support for a variety of options, but I need to think about the right syntax for expressing them and how hard various options would be to implement. Adding support for viewport units would be useful yet relatively easy (a brand-new volunteer, Keith Rarick, implemented 'rem' units recently). Adding some kind of "series of pages" feature would have many uses and wouldn't be too hard to implement, it's a lot like columns that stack vertically instead of horizontally. On the other hand the "scroll within columns" feature needs a lot more thought. The scrolling UI issues need more thought too.

One person asked me why I was interested in this problem. Partly it's because Web developers want a solution. Partly it's because screens have been getting bigger, on the desktop anyway, and letting users use them effectively is serves users better. It's also partly because proprietary platforms like Flash and WPF have some of these features and the open Web needs to keep up.

We had side discussions about fonts, typography and analytics. These Web developers would really love some data about how certain browser commands are used by visitors to their sites.

Thanks to Ross and co for a fun and helpful discussion, and the pizza!



10 comments:

  1. Vertical pagination would be a nice addition to allow HTML to compete with PDFs. Combine it with font embedding and maybe a JAR-like archive format for all the accessory images / data and maybe we'll finally kill the alternate document formats and start passing around serialized webpages. :o

    ReplyDelete
  2. When these features are added I'll be able to re-implement my multi-column readers script (http://userscripts.org/scripts/show/9022) in 5 lines of Javascript :-). Seriously, if these kind of features got standardized, I think they would get a lot of use. I thought for a while about extracting out my hackish implementation of some of these features into a library, but I never had the time.

    ReplyDelete
  3. Robert O'Callahan20 February 2009 22:26

    Cyrus: Gecko supports the jar: protocol, see
    http://docs.sun.com/source/819-0913/author/jar.html
    and in 3.1, font embedding:
    https://developer.mozilla.org/en/CSS/@font-face
    so we're pretty close!
    Manu: sounds good. I did mention your work!

    ReplyDelete
  4. I remember from my experiments with columns that I had major problems with printing, making us lose a partly filled column on the last page (bug has been filed for quite some time). I think bugs like that could turn out to be showstoppers for web designers, as those who care about columns probably have connections to on-paper text layout and expect their stuff to be printable.

    ReplyDelete
  5. Columns are a good start but I think there also needs to be a better way to have jump links. In a typical newspaper layout you'll align the columns and blocks of text to have a good layout for quickly scanning stories and then "Continued on page X" for things that overflow. It would be great to have this design technique on the web.
    I also really like the Seadragon zoom to see/read more technique. If you haven't seen the seadragon demo video it's worth a google.

    ReplyDelete
  6. On smooth scrolling in columns: something like this Roc? http://fluke.student.utwente.nl/columns/
    I quickly hacked some iframes and javascript together, a little proof of concept. I agree that scrolling in columns seems a little odd, and that text can be cut off ugly in this way.

    ReplyDelete
  7. One thing I think is needed in the current CSS3 column spec is a way to prevent something showing up as half a dozen 1-line columns. A `column(-min|-max|-)aspect-ratio` or column-*-height would be nice. Maybe I'm being crazy though.

    ReplyDelete
  8. Hyphenation engines/support might also be needed to make columns prettier than today, no ?
    Regarding the scrolling in a column and the cutoff text, you could put a semi-transparent png on top of the last line (and when content has been scrolled, on top of the first too), so that it would fade into the background and imply there's more content at the bottom.

    ReplyDelete
  9. I am very interested by this CSS property but I ask myself: How can we make the selection of a column? I have a case for you. For better readability, I want the column to which I point have a different color from others and when I'm not pointing in the block where the columns are, they appear normally.
    I made an attempt with the current page and I changed the style sheet as follows:
    .content .columns {
    color: #222222;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
    font-weight: normal;
    line-height: 150%;
    text-align: left;
    margin-bottom: 10px;}
    in place of this :
    .content p, .content .columns {
    color: #222222;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
    font-weight: normal;
    line-height: 150%;
    text-align: left;
    margin-bottom: 10px;}
    and add this in the end :
    .content .columns:hover{color:#AAAAAA;}
    .content .columns:hover a{color:#AAAAAA;}
    .content p:hover{color:#222222;}
    .content p:hover a:link {color: #4F7B9E;}
    .content p:hover a:visited {color: #8FABBE;}
    .content p:hover a:active {color: #8FABBE;}
    .content p:hover a:hover {color: #006699;}
    It's work when you point a paragraph block but not for columns. The problem is that the property does not create column element in the DOM so it's impossible to make a selection. I am right? Should I use Javascript and not full CSS for this basic graphic interaction?

    ReplyDelete
  10. For automatically hyphenation, you can use server-side scripting (PHP) or client-side scripting (AJAX) here : http://yellowgreen.de/hyphenation-in-web. For a selectionned language, they add invisible HTML characters (& shy ; without spaces) and browsers do the job for the presentation. It's very pretty.
    From what I read, there is a mature program that has already built the rules for hyphenation : it's TeX. The problems of integration of these rules in Firefox are: should we put all languages or only a selection like for dictionaries? We can imagine that the rules of hyphenation could be installed with the dictionary or following user preferences: he knows necessarily what languages he can read. Another problem : How to indicate to browsers that you want a paragraph with hyphenation ? A new CSS property or a condition for the CSS property text-align ?

    ReplyDelete