Unique Storytelling On The Web

Originally published on December 2013 at The Really Good Newsletter, but still relevant today; Some links have been updated.

Traditional newspapers have always used the written word with some imagery to tell their stories. It’s only natural that when the Internet first appeared, it was a text-only medium. It took many years of technological progress for websites to embrace new possibilities and use images, video and audio.

To this day, most websites use one or more classic forms of content to tell their stories, be it a news article or a landing page for an event or mobile app — stacking blocks of text or images, maybe throwing a video in and calling it a day.

However in the last few years, we’ve seen dozens of websites which understand the power of the web and the unique opportunities it holds when it comes to conveying a message. These special “native” web experiences are still fairly new and we’ve collected some of our favorites to share with you here.

One of the first sites to make heavy use of scrolling to tell a story was the Coming Soon page for Ben the Bodyguard, an iPhone app for security. The page is actually an interactive comics, taking you through the “Mean Streets”, and getting you quite paranoid by the end, at which point you could subscribe to get notified upon launch.

More recently, we’ve seen subtler scrolling effects, where layers on a page move at different speeds, thus create a sense of 3D, also known as Parallax. Check out the award-winning website of the Milwaukee Police Department for example.

One extreme example of interactive storytelling, Snow Fall, also uses scrolling as the basic trigger for progressing through the different media used. Snow Fall is a feature by The New York Times which drew millions of page views, lots of attention, and a great debate ensued over whether or not it’s “The future of journalism”.

Animation

The Story of Send is an animated mini-site by Google, covering both privacy, security & environmental aspects of Google products in a fun, lean-back experience. It almost feels like Flash, but then you see the HTML source and realize it’s all accessible, searchable and mobile-friendly.

ֿThe landing page for the payment solution Coin uses animations elegantly to deliver its message, showing off what the device can do. That moment when the cards come together and turn into Coin as you scroll is great because it’s exactly the message, delivered at your scrolling pace without any words or having to load and watch a video.

Explorable Explanations

Explorable Explanations is meant to let users play with the data and moving parts of complex systems. Bret Victor talks about this a lot in his “Kill Math” series and others, and Ten Brighter Ideas is an example of what he calls a Reactive Document. Play with the different buttons and sliders to get the idea.

Prior to the 2012 presidential elections, “The New York Times” published an interactive page titled “512 Paths to the White House”, enabling readers to select different winners for each competitive state and see how many paths that candidate has to win the elections. That’s a cool, fun way to let users explore scenarios on their own and dig deeper, instead of having a commentator talk about only a select few.

Personalization

Websites today can transform and adapt to the user’s browser type and size, operating system, geographic location, and when logged-in, may even get more personalized content and experiences.

This Alzheimer’s Research Clinic from the UK allows users to connect to their unique website with their Facebook profile to experience a strong, personalized message and learn about the lab’s goal in interesting ways. They also use scrolling, animation and more techniques covered in our previous issue to create a truly immersive experience, which can’t be reproduced in any other medium.

Tech Links

Here are some plugins and libraries to help with your very own unique storytelling web pages:

• Tangle by Bret Victor
• A comprehensive list of jQuery Parallax Plugins
• jQuery Scrollpath — “A plugin for defining custom scroll paths”
• Aware.js — “Tookit for enabling reader aware design for your site”

We hope these concepts and libraries made you think, and perhaps even consider using one of them for your next web project. If we missed a must-see example, do let us know.

Thanks for reading, and see you next time!

Originally published on December 2013 at The Really Good Newsletter