Keeping images and text in sync

Two examples of how digital images and associated text can stick together.

This is part of an ongoing series related to Peter Meyers’ project “Breaking the Page: Transforming Books and the Reading Experience.” We’ll be featuring additional material in the weeks ahead. (Note: This post originally appeared on A New Kind of Book. It’s republished with permission.)


I’ve got some seriously mixed opinions about Biblion — the iPad app for browsing the New York Public Library’s 1939 World’s Fair archive. On the one hand, it’s got few peers in rethinking how a document and photo collection can be packaged up in a fun-to-browse way. On the other hand, the whole design feels like one of my sketchbooks: overflowing with every kind of zany document design experiment that my caffeine-fueled mind can squirt out. Five minutes or so with this app and I find myself suffering from what might be called document disorientation — an unsettling sense that I don’t quite know where I am, what I’ve read, and how much remains to explore. I don’t, in short, find it a soothing or immersive reading experience.

But despite all that, I’m here to sing Team Biblion’s praises (the shop behind this effort is named Potion). Included in their feature fest is one innovation that’s particularly promising. It’s a system for posting a handful of images above an article and then pushing to the forefront whichever picture matches the current reading point.

As the reader scrolls the prose column upward, the app enlarges whichever image matches the top few lines of text.

Launch state for lightbox layout image collection
The article in its “launch” state. Eight lines down, the text mentions Joe DiMaggio, who’s pictured in the enlarged photo. (Click to enlarge.)

Further down in the article; a new image is on-stage
As the reader scrolls further down, new images are enlarged, one at a time. Here, the Babe Ruth photo matches what’s discussed in the second paragraph. (Click to enlarge.)

Overall, the feature doesn’t work as consistently as one might like — some articles offer this souped-up up treatment, some don’t; some images get summoned exactly when you’d expect, others never get enlarged. But the thinking behind the feature succeeds, I think, because it targets a specific reader need (spotlighting the image that is currently important) while at the same time addressing a shortcoming of iPad page layout (limited real estate).

Beta620, the experimental playpen over at the New York Times, has been tackling a similar problem: how do you keep a single image visible even as a reader scrolls further down into a long article? They’ve come up with a feature I hope they promote to the big leagues. It’s a dead simple layout tweak that keeps an image “above the fold” even as the reader scrolls down the page. Here’s an article that puts this feature to use:

As the reader scrolls further down screen the art on the right stays in place.
As the reader scrolls further “down screen” the art on the right stays in place. (Click to enlarge.)

Maintaining a persistent visual in this manner is a hugely valuable reader service, especially for pieces like this essay on a Velázquez painting.

Lots of different kinds of digital books and web publications can benefit from this kind of customized, dynamic image spotlighting. I’m reading a book right now called “A History of the Illuminated Manuscript.” A digital version of it would be perfect for keeping images onscreen, shuttling them off, and then re-summoning them as the reader progresses through the text. Save readers the hassle of having to flip back and forth between body text and referenced images and they’ll learn better … and want to buy more books with simple but useful enhancements like these.

Webcast: Digital Bookmaking Tools Roundup #2 — Back by popular demand, in a second look at Digital Bookmaking Tools, author and book futurist Pete Meyers explores the existing options for creating digital books.

Join us on Thursday, November 10, 2011, at 10 am PT

Register for this free webcast

Related:

tags: , , , , ,