CSS3 Columns
by Kevin Dangoor
Since I’m running Deer Park, I thought I’d see what CSS3 columns actually look like. Being too lazy to type a few lines into a text file, I googled and found this: Well, I’m Back: Gecko 1.8 For Web Developers: Columns. Lo and behold, that very blog entry uses two columns.
Multiple columns are nice, because you can use the full width of your media without your lines being obnoxiously long and painful to read. However, for reading on the screen I think I’d prefer to waste screen real estate and keep scrolling down vertically. It’s rather annoying to hit the end of the column and then have to scroll back up to the top to continue.
For printing, however, having multiple columns is great. For your eye to jump from the bottom of one column to the top of the next on the same page is very quick and painless.
Sure, when viewing on screen, you can get back to the top just by hitting the home key. But, on screen there is no vertical limit. Why interrupt the flow of reading for no appreciable gain?
This is really cool!
It might also work for the web if there was a way to guarantee that all the content will be visible without vertical scrolling. I’m not sure if there is way to define that.
IIRC, the Wall Street Journal uses columns in its website.
There is one newspaper site (I can’t find it right now) that uses a multi-column layout for its stories. The columns are done with JavaScript and don’t use vertical scrolling. They have next and previous buttons for moving to the “next page” of columns.
It was neat, but it still seems like this kind of presentation is still not ideal for online viewing. Vertical scrolling is “cheap” for the user.
I believe you are thinking of the International Herald Tribune at iht.com. For some reason, I like reading onscreen there – the columns are short enough that moving up and over to the next column isn’t as cumbersome as it would be with long columns. I also like the fact that you can click anywhere on the first or third column to advance or move back in the article, rather than having to hit the or links.
Yes, the IHT site is indeed the one I was thinking of. IHT’s implementation of columns is usable, because they computed the column height such that you’re not scrolling up and down to read. That is a viable solution. The only complaint I’d have is lack of keyboard accessing for paging through the article (unless they implemented keyboard controls for doing so…)