Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post – More than 3.5 million page views for New York Times’ “Snow Fall” feature – reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) – How We Made Snow Fall: A Q&A with the New York Times team – the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel – it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!

Don't be the product, buy the product!