Skip to content

Lightbox Layout: Serving Up the Right Picture at the Right Point

Innovative layout features for keeping an article’s pictures in sync with a reader’s progress

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 upwards, 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.

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.

Overall, the feature doesn’t work as consistently as one might like—some articles offer this souped 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 which image 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:

Web article with fixed-position image alongside scrolling text

As the reader scrolls further “down screen” the art on the right stays in place.

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 Iluminated 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.