A nice example of a single-page Web app

This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.

NPR’s Book Concierge

npr_books_mobile

Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.

npr_books_desktop.jpgnpr_books_desktop_modal

Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.

They have merged all their JavaScript into one minified file. Separately, they have merged all their CSS into another single minified file (plus two separate font-handling files).

At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.

The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.

Storytelling

It’s no secret that I love NPR visuals. These are lovingly handcrafted stories that stand out from all the great audio stories by NPR because these stories cannot be told on radio — or if they are, they are very different.

The most recent example: Rain Forest Was Here.

Screen capture from NPR

Not only are the wall-to-wall photos responsive at any size — from small phone screen to giant desktop — but this story also plays perfectly in vertical mode on a phone. Try it and see.

Stories like this are no accident. There’s a philosophy behind them. A guy at NPR named Wes Lindamood, whose job title is senior interaction designer, wrote about that philosophy here:

The Evolution of NPR’s Picture Stories

I love seeing innovation in storytelling because it’s all about making the audience sit up and pay attention. There are so many stories, so much media, so many distractions. How can you make somebody pay attention?