HOME

Teaching Online Journalism

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!


Categories: code, design, examples


20 Comments

  1. [Mindy McAdams] 10 examples of bespoke article design and scrolling goodness http://t.co/ldj6BHqSqL

  2. Very cool. 10 examples of bespoke article design and scrolling goodness http://t.co/H3FFGXNzdP

  3. News design coders: What are your fave plugins & libraries? Esp. for bespoke article design: http://t.co/cyxne0iz6L

  4. Periodismo multimedia con scroll: cómo aprovechar el recurso en este post de @macloo http://t.co/XWljd6H8K4)

  5. Bryan Murley says:

    Thanks for this post, Mindy. Lots of good examples to show to future students.

  6. @troelsbj says:

    Keep scrolling: Great examples of high quality and immersive journalism http://t.co/s98Vj0U6Og

  7. That is what I am talking about! 10 examples of bespoke article design and scrolling goodness http://t.co/x8jLFVav2l #journalism

  8. Guter Überblick über Best-Practise-Beispiele von Storytelling mithilfe von Scrolling: http://t.co/8mS6PqTfGz via @dermedienmann

  9. @simon_sturm says:

    10 Beispiele für tolles #Storytelling im Netz. Warum sind keine deutschen Medien darunter? http://t.co/5ArAlumgp3 #digistory #webdesign

  10. [...] Hay vida más allá de Snow Fall: 10 examples of bespoke article design and scrolling goodness [...]

  11. “Bespoke article design.” Well said. RT @palafo #Snowfall and friends: 10 examples of bespoke article design http://t.co/EGieadDwF3

  12. [...] Snow Fall’s release, lots of pretty sliding scroll down articles have been popping up over the internet, with my personal favourite (as a cyclist) being Washington [...]

  13. [...] Washington Post, ESPN and other media outlets have created beautiful, highly visual articles that depend entirely on scrolling and could not appear in print in the same way. Some Web comics and infographics turn scrolling into [...]

  14. @valenzine says:

    Muchos medios bien despiertos trabajaron en nuevas propuestas de lectura enriquecidos por el scrolling http://t.co/1mRN7lQYYU

  15. [...] The New York Times feature Snow Fall: The Avalanche at Tunnel Creek is one of our favorite examples of scrolling done right. The article also pointed to Robin Sloan’s awesome tap essay [...]

  16. [...] the technical end of things, for starters I highly recommend visiting Mindy McAdams’ 10 examples of bespoke web sites and scrolling goodness. There, she lists journalistic stories and some of the technical work that went into them. Some of [...]

  17. [...] Washington Post, ESPN and other media outlets have created beautiful, highly visual articles that depend entirely on scrolling and could not appear in print in the same way. Some Web comics and infographics turn scrolling into [...]

  18. [...] screen can do marvelous things for the reading experience. But what do you give up when you read on a screen instead of on paper? [...]

Leave a Reply