Nameplate set in Sutro Deluxe and Initials from Parkinson. Your typeface could be next. Learn more.
Ads via The Deck
Commentary

Novel Text for the Web

Typographica on January 5, 2005

The readability of paging vs. scrolling has been studied and debated without a definite conclusion, but Coudal is hedging its bets on paging. The studio presents an excerpt of a new book, Cast of Shadows, in a two-column layout on multiple pages. Following the precedent set by the studio’s new site (launched last year), all the text is built with code — even the showy title.

Another example of this solution for long web reading can be seen at the International Herald Tribune.

22 Comments

  1. Miss Tiffany says:

    I was contemplating this yesterday. I am not a web designer (coder, whatever) by any stretch (but I am a designer working on style-sheets to be implemented by others who know better what they are doing). I was working on it yesterday and it struck me that 2 columns would fill the space better than 1 column. Glad to see more are doing this.

  2. Colin says:

    It only works if the whole page fits into your browser. For the first link, I have to scroll to read the last quarter of the text, which defeats the purpose.

    If paging is to be successful, there needs to be a more flexible paging system, kind of like a beefed up version of Acrobat.

  3. What’s your res, Colin?
    What’s the frequency, Kenneth?

  4. Miss Tiffany says:

    Why is it that we can use the up/down arrow keys to scroll but they don’t allow the right/left arrow keys to scroll sideways? I have to admit that I’ve visited some sites that are quite long in the horizontal and it always annoys me that I can’t scroll.

  5. Jim Coudal says:

    I’ve just pushed a bit of revision up to the server, eight pages instead of seven, pages a bit shorter. (tweak, tweak)

    We think that there is a difference between reading for pleasure and reading for information. An excerpt from an entertaining novel seems an appropriate place to attempt to recreate the printed page experience. It feels more leisurely and the smaller chunks are less imposing too.

  6. Miss Tiffany says:

    I should add–as I’m not a total and complete newb–that I can scroll left/right on a lot of sites. The problem is only with a few. :^/

  7. I agree with Jim. While we argue about what is the absolute best practice for designing long text passages, paging certainly acheives the desired effect with the Cast of Shadows excerpt. The psychological effect of dealing with shorter chunks of text is also very valuable.

  8. Colin says:

    1024 × 768

  9. JD says:

    I agree with Colin. This is a joke. I have a 1280-px wide monitor, but my default browser window width is 800px.

  10. nick shinn says:

    I suspect we will become more accustomed to on-screen paging as more documents are created as PDFs that open in full-screen mode. PDFs are getting more online respect from search engines. And with rich-media features such as hyperlinks, movies, and VR, they are not outclassed in functionality by web pages.

    It occurs to me that even without XML, it’s possible to easily create both landscape (for screen) and portrait (for printing) formats of a single “text” with InDesign’s layout-changing thingy — know what I’m saying? Must try it.

  11. Carl Beeth says:

    Thinner columns are easier to read so in that sense it is a good idea to divide the page in columns. but that has little to do with the relative merits of paging except that if you do divide the text into columns you are forced to page as you can’t ask your readers to scroll down one column and then ask him to scroll back up before reading the next column. The IHT has and elegant system that adapts the column length to the window size but you will still need to page if the whole article does not fit on your screen.

    I have yet to see a study that showed paging somehow was better than scrolling, most information I have seen seems points the other way. I suspect that the reason a lot of media sites chunk their pages has more to do with banner impressions than usability.

  12. JD says:

    Carl, I agree. Jakob Nielsen’s most recent column (I realize that this is just his opinion) says that scrolling is the most effective way to read stuff that is too long for a small display; when displays improve, then the interface will change.

    Nick, what is the InD feature you are talking about?

  13. The caps at the top throughout the whole thing look really bad (kerning). Is it just my screen?

    cheers,

    -J

  14. Hervé S. says:

    FYI, there has been for a couple of years a macintosh text / rich text / illustrated text viewer based on this very principle. Its name is Tofu, at http://homepage.mac.com/asagoo/tofu/

  15. nick shinn says:

    JD, the InD feature is “Layout Adjustment”.

    ***
    >scrolling is the most effective way to read stuff that is too long for a small display

    But if the term “reading” is expanded to encompass remembering what you have read, the structure of a book (magazine, or newspaper) helps. The shape that a particular paragraph makes, it’s position on a page, whether that page is left or right, and the position of the page in the document all provide precise physical co-ordinates that aid memory.

    You don’t get that with scrolling.

  16. JD says:

    Nick, thanks for the layout adjustment info. It would be great if it could be implemented on the reader’s side (as in CSS print and screen style sheets).

    As for the paging vs. scrolling, the only things you mentioned that one doesn’t get in scrolling are the facing pages and the page’s relative position within the document.

  17. nick shinn says:

    JD, once scrolling begins, the top line(s) of the text disappear from the field of view, and it’s not clear exactly how far down the column one is.

    My argument is based on the understanding that visual memory is eidetic, or “snapshot” in nature.

    I don’t know if you have this experience, but when I go back to a book to find a particular paragraph or idea (to clarify my thought on the subject, or to quote the text verbatim), I often have a strong sense of where to look — eg “a short sentence half way up the left-hand page, near to the end of a chapter, two-thirds of the way through the book”.

    It’s this specificity of coordinate location that’s missing from scrolling. The sense of visual place is even stronger in magazines and newspapers, as one also has multi-columns and pictures as part of the “grid” on which the text is fixed.

    Scrolling and hyperlinks make for a very different literal engine with which to construct the world — more fluid, less precise. For better or worse.

  18. Hugo L. Casanova says:

    Yes, I think you are right Nick, but to find partialy remembered information in a web page one can use the search mechanism of the browser. So we can say that, on the web, less data is needed to be remembered in order to find the information seeked as easily. I think this is why the experience of reading a book feels more intimate and rich: it is more complex.

    The problem, in my view, with paging websites is the necessity for static layout. The HTML principle of basic content that can be acquired by all anyhow is a bit broken. As been noted by others, in Cast of Shadows, the width of the column layout is static. It can’t adapt to the user’s situation.

    It is waste of time to wish to mimic the feel of book reading on the web: two media, two usage principles, two design rules.

  19. Hrant says:

    Even a basic understanding of human reading leads to the conclusion that paging is superior to scrolling*. But it is much harder to implement well, much easier to mess up. BTW, this stance has nothing to do with a Luddite attitude.

    * The fact that this is actually counter-intuitive is tellingly paralleled by the counter-intuitive nature of saccadic reading.

    Also, horizontal sites (unusually rare) are more in tune with human nature than vertical ones. Verticality is a byproduct of the difficulty of implementing multiple columns. If/when you overcome that, long vertical layouts are about as nice as walking using a leg and an arm.

    hhp

  20. Hrant says:

    De Groot once said something very pertinent about that: an interesting text doesn’t need to be highly readable! But of course conversely, stuff that we have to read, to be ready for that test or that meeting, does benefit from even “subvisible” gains in readability. And really, most things most people read these days is indeed “obligatory” – most people would much rather watch TV more of the time – especially when confronted with text of low readability!

    hhp

  21. Darrel says:

    It should also be noted that the CSS title, while ‘cool’ looking, is rather horrid markup. It requires the duplication of text so anyone using a text browser or screen reader will see/hear ‘CAST of CAST of CAST of SHADOWS SHADOWS SHADOWS’.

    So, interesting experiment, but not really practical.

    As for column layouts online, as others have pointed out, they’re great if they fit the end-user’s browser’s viewport. They’re very annoying if they don’t.

    CSS3 will support columns. The question remains if browsers will support CSS3 ;o)

    http://annevankesteren.nl/archives/2004/08/css3-columns

  22. Jordan says:

    Following on from Darrel’s comment, there is proposed multi-column layout functionality in the next version of css. This would enable authors to simple create a container for their <p> tags, and specify some rudimentary things like number of columns and the spacing/rule between them, and the browser will do the rest.

    It’s all very well being proposed, but with development of IE on anything but the longhorn platform discontinued, it’ll be up to Mozilla, Safari and all the other ‘minority’ browsers to start using this standard. If their popularity becomes high enough then one day it may even be practicable to start using this lovely idea. Until then the only realistic way dynamic paging can be achieved is using the IHT Javascript based method (or similar).

    I’ve attempted a server side (PHP) based solution, that takes a plain text file and performs a rudimentary pagination based on the approximate desired number of characters per page, but it lacks the abilty to break the final line at the visible end of the line — something that I think can only be done client side using javascript.

    Until CSS3 comes in, the only reliable way to paginate without using client side scripting is manually, which is fine if you’ve got a fixed set of text like this, but useless if it’s dynamic (plus it has accessiblity downfalls).

    Jordan

Post a Comment

Comments at Typographica are moderated and copyedited, just like a “Letter to the Editor” in a newspaper. Abusive or off-topic comments will not be published. Compliments are appreciated, but will not be published unless they add to the conversation. Thank you!

Recently Commented
Colophon

Typographica is a review of typefaces and type books, with occasional commentary on fonts and typographic design. Edited by Stephen Coles and designed by Chris Hamamoto. Founded in 2002 by Joshua Lurie-Terrell. Relaunched in 2009 by Coles and Hamamoto.

Set in Bureau Grot by Font Bureau, Nocturno Display by Nikola Djurek, Fern (unreleased) by David Jonathan Ross, and JAF Bernini Sans by Tim Ahrens.

Brought to you by this month’s nameplate sponsor, FontShop, MyFonts, FontFont, Wordpress, Fused, and the letter B. Read our editorial policy.

Elsewhere