Class overview and anatomy of a multimedia story

Tue, Jan 21, 2020
Submit link to Google Doc from group exercise on bCourses.

Buy HTML & CSS book

This class will recommend you to follow closely with the following HTML & CSS book. This book will be a good investment in your learning of web development, and will serve as a good reference guide for many years to come.

HTML and CSS book

Purchase options on the HTML & CSS Website

This book is also sold as a bundle with a JavaScript and jQuery book. This is also a recommended purchase for those who want to further their knowledge of jQuery.

Making sure your text editor is up to date

Sublime Text logo

In this course we will be using Sublime Text 3 for all of the coding and previewing of documents. Please make sure your program is up to date.

Note: Sublime Text is dontationware, which means it’s free to use indefinitely, but will occasionally notify you to purchase the software. A license costs $80.

Review previous projects from this class

Here are links to a few of the projects from previous years from this class. Some are password protected based on the student’s request (embargoed for publication or other reason). Contact the instructor for access.

Two years Daesh’s destruction of Churches in Iraq.

Crimes that Serve You Labor trafficking in Alameda County.

Follow the Money How remittances sent abroad affect the broader economy.

Against All Odds Chinese students studying in America grapple with isolation and depression.

Legalizing Death A look at California legislation to legalize drug-assisted death for the terminally ill.

Death of Community Hospital The closing of a community hospital in San Pablo, and the ripple effect it will cause.

Privilege Project An experimental conversation-format interactive piece that places two strangers across from each other to discuss the concept of privilege.

Long Shore Port workers in Oakland are bound to lease agreements for little pay, and have few options to switch jobs.

Long Shore A lesbian couple, who wishes to have a child that has genetic makeup from both parents, looks to the brother of one pair to serve as a sperm donor.

Looking at examples of News Packages

On this site, I’ve created a page amassing a large number of online news packages for students to analyze. There are over 1000 news packages listed on this site. As we go through the different approaches to displaying multimedia stories, it’s important to spend a significant amount of time looking at these examples to dissect and understand their nature. Most importantly, you should consider the following:

  • What is the first immediate impression of the overall design?
  • How effective is the information hierarchy, understanding what the story is about immediately, and does it engage you to dive in deeper?
  • does the story design aid in pulling you further into the story, or does it exist for its own sake?
  • do the media forms (i.e. video, photo, graphics, text) fit the various story components and tell those parts of the story well?
  • are the various story components the appropriate length given the medium used to consume the story?

Techniques for telling digital longform stories

Telling a longform story requires careful attention to the reader’s train of thought and how they are consuming the story. Given that the medium of the Web (the devices that are used to consume stories) are distracting, it becomes important to use multimedia in a way that keeps the attention span of the reader.

In general, the goals are:

  1. Use multimedia in a way that is cohesive to the overall narrative. Videos, photos, and graphics shouldn’t be redundant to text.
  2. Understand how multimedia connects with the content around it. Does it distract from the narrative? What is the cognitive load of a piece of multimedia? Does it interrupt the flow? If so, is that OK?
  3. Don’t create flashy design effects for their own sake. Every design decision should have a purpose. It’s OK for design to be “cool,” but use the cool factor in a way that better communicates the story. (e.g. Autoplaying background videos, scrolling curtain effects, or animation.)
  4. Ledes and introductory text of the package becomes crucial, because most continuous stories require a commitment from the user. Tease users with good explanatory introductions so they know what they are going to get.

“Chunkifying” content

A technique used in lots of continuous pieces is to break text apart into smaller chunks that grasp the user’s attention. It’s a bit like holding a user’s hand and leading them through the story.

Game of Shark and Minnow

In this South China Sea Piece by the New York Times, content is broken into smaller chunks at various points in the narrative. These pieces of content help reinforce the multimedia with descriptions of what’s happening.

The New Syria

In the piece How the New Syria Took Shape by The New York Times, short chunks of text seem to annotate the background video that steps forward with the scroll mechanism. This gives the user agency to control the flow of the narrative.

Multimedia “Interrupters”

Another term has been adopted in the multimedia storytelling industry to describe when a piece of multimedia “interrupts” the narrative flow of a piece. While this sounds like a bad thing, it’s often done intentionally.

Careful consideration should be made as to when a piece of multimedia breaks the text apart, or when it’s placed off to the side of the text, where it becomes a more optional element.

Multimedia off to the side
Example of multimedia off to the side of a story.
The factors to consider in making this decision:
  • Is the multimedia critical the story, and at that point in the narrative?
  • What is the learning curve of an informational graphic? If it takes too long to decipher beyond a glance, perhaps it should be considered more of a sidebar.
  • Multimedia often makes good chapter breaks or segues for introducing the next section of a story.
  • Breaking up a narrative with a video is often a forceful indication that the viewer needs to watch it. You shouldn’t break the text if you think it’s optional, because the viewer will be left thinking they missed something.
New York Times Snow Fall
In the New York Time's Snow Fall piece, some multimedia was optional, some was intentionally interrupting.

Some multimedia elements essentially become the story, as in data-driven stories that are based on charts. In this Washington Post piece about the race gap in schools, the chart of every school district in the United States becomes an essential part of the story.

New York Times Snow Fall
This Washignton Post piece titled, "America’s schools are more diverse than ever. But the teachers are still mostly white" relies on the data to explain the level of disparity in race between teachers and students.

Design techniques

Web producers employ several design techniques when building these packages. Most have usefulness, but some are often gratuitous or exist for their own sake.


Scrollytelling is a term that relates to animations that play as the user scrolls. This is often an effective method for engaging readers, because it offers simulation as they interact with the piece and makes the process of scrolling enjoyable. But the caveat is that most scrollytelling pieces require movement, and are often antithetical to longer text stories which are read at a much slower pace.

American Nile by National Geographic
In National Geographic's American Nile piece video and photos animate while you scroll, but someone actually reading the piece might find it distracting.
New York Times Easter Island
The New York Times did this scrollytelling piece on the erosion of Easter Island.
Space Race by the BBC
In this Space Race piece by the BBC, animation is tied to scrolling so that you can travel on a journey as you scroll through the piece.
Space Race by the BBC
In this mobile health piece, a playful animation is tied to the scrolling mechanism
  • Good for: scannable content, chunkified content.
  • Bad for: longer text stories.
Curtain Effect

A curtain effect is when part of the page seems to reveal another section of the page. This effect is often useful for indicating breaks in a piece, or a transition to another section of the copy. It should be considered a hard interruption, and give the sense of unveiling a piece of content.

Multimedia off to the side
In The Long, Strange Trip of Dock Ellis, multiple uses of the curtain effect unveil new parts of the story, often with a quote or photo.

Many times it’s used as purely an aesthetic device, perhaps gratuitously and unnecessarily.

  • Good for: creating very strong interruptions for transition, unveiling new content.
  • Bad for: times when it doesn’t serve a purpose, or it’s used gratuitously and unnecessarily.
Auto-playing Background videos

Another element seen in many continuous stories are silent auto-playing background videos. These can really make static images come alive and add some dynamism to the piece.

They usually come in two forms:

  1. Aesthetic: Simple repeating imagery that sets a scene or offers a piece of movement.
  2. Illustrative: A situation when it shows something happening. In this case it’s similar to an animated GIF. This is a quick way to show an action without the user having to commit to a video.

In the first case, the types of background videos that work best are ones that are short and have some type of subtle movement. They generally work create a scene setters, and help create a more dynamic feel that differs from the frozen moment of a still photo.

In the second case, the action should be quick or users might get confused about whether the video should be watched or just glanced at.

The Shirt on your back Guardian
The Shirt on Your Back Guardian project uses many auto-playing background videos to set the scene of where things are.
  • Good for: setting scenes, creating dynamism to a piece aesthetically.
  • Bad for: when it’s distracting, overused, too long, or should be a playable video instead.
Auto trigger elements, like videos

When autoplaying multimedia content, like video, it’s important to make sure sound doesn’t autoplay. In fact, this is a restriction being employed by most browsers these days. There is also rumors that Google will lower your seach index if you autoplay content without the user’s consent.

But pausing videos when scrolling away is an effective way to keep one’s place in the story. This interaction also creates a subtle sense of responsiveness to the page. It knows you’re no longer looking at a video, and it will automatically pause it when you scroll away.

Star Wars best light saber battles
This piece by the Washington Post about Star Wars light saber battles employs autoplaying videos as you scroll down. Notice sound doesn't play, and the videos pause when you scroll past them.

Slideshow Models

In reponse to the popularity of Instagram stories, many website news packages have started employing slideshow-like experiences. These create a great sense of continuity with a visual story, and allow you to effectively mix still photos and video together in a seamless experience.

It’s important to draw on user interface techniques users are already familiar with, such as the bar navigation along the top of the page (as seen in mobile slideshow storytelling).

Photographing Hong Kong urban battleground
Hong Kong urban battle ground slideshow model.
Mobile Formatted Stories

Consumers are more likely to consume stories on their mobile device before anything else. When designing a news package, it is essential to make sure it functions on mobile.

But going further, many producers are designing packages specifically for mobile first, adding features and design considerations that don’t show up or work on desktop web. Some of these conventions are:

  • swiping to switch content
  • revealing content on scroll
  • slide-out “drawer” menus that appear when a button is pressed
  • large buttons that are easily pressed with a finger

Here are some examples of mobile-formatted news packages:

Long live group chat from Outline
From The Outline. This employs some of the best mobile design conventions for animating the feel of receiving alerts late at night. While the package holds up well on desktop, it plays especially well on mobile.
Science of Hummingbirds
From National Geographic, each page has a section that allows the user to play with animations.
Lynching in America
From the Equal Justice Initiative, the entire package is structured around swiping and paging, design conventions that are awkward on a desktop computer with a mouse.
City At War by Red Cross
From the international Committee of the Red Cross, animations play at each point of the story to illustrate concepts described in the text.
Washington Post Eclipse Package
Washington Post Eclipse package takes advantage of features to swipe the earth graphic to see where future eclipses will occur. This is clumsy on desktop.