A short bibliography on interactive documentaries

A colleague in film studies asked for my assistance in pulling together a short bibliography on i-docs (interactive documentaries). This topic and the broader issue of interactive non-fiction narratives as web-based digital storytelling is a long-term interest of mine.

Scholarship on i-docs:

  • Aston, Judith, et al. i-Docs : the Evolving Practices of Interactive Documentary . Wallflower Press, 2017.

  • Aston, Judith, and Gaudenzi, Sandra. “Interactive Documentary: Setting the Field.” Studies in Documentary Film, vol. 6, no. 2, Routledge, pp. 125–39. (This entire issue of Studies in Documentary Film is a special edition on i-docs.)

  • Miles, Adrian, et al. “The Material turn and interactive documentary: a panel.” (2017).
  • Nash, Kate, et al. New Documentary Ecologies : Emerging Platforms, Practices and Discourses . Palgrave Macmillan.

  • O’Flynn, Siobhan. “Documentary’s metamorphic form: Webdoc, interactive, transmedia, participatory and beyond.” Studies in documentary film 6.2 (2012): 141-157.

A few interactive documenataries:


Significant resources for learning more about i-docs:




Student questions about Undercurrent

Continuing the series on student questions about multimedia storytelling. For this class the students viewed Undercurrent, which won the Online Journalism Award in 2016 for excellence and innovation in visual digital storytelling (small newsroom category).

Questions and comments by the students:

It seems like the designers of the “Undercurrents” used a template when creating the site: for each chapter, the first thing will be a video on overview of the chapter and some personal factors related to people of the chapter. After the video, there will be an introduction to the issue or the person. A “360-degree video” will follow the introduction, although the video is actually a photo with audio.

Is that possible to “divide” the documentary at the beginning and put them in different parts of the chapter? A documentary is very fascinating; however, it is a little bit confusing for me to watch a video without any introduction of the person speaking, in the meantime don’t know how long will the video last.

The videos are complimentary multimedia tools for the words, but it cannot replace the words. For the “Undercurrents,” is that a better idea to put a short documentary on the overview of the issue at first, then put several interviews or other videos to support the paragraphs? In addition, for the “360-degree video,” is that possible to change it to audio and automatically play to impress audiences?

In a story such as “Undercurrent” how do journalists find the right balance between scientific writing and narrative? At times the story didn’t  go very in-depth into the science behind coral bleaching and other problems, even though the article was created by marine scientists. What audience was the article catered to?

In the first chapter, “The Watchman,” I was confused by the second video, a video with beautiful images, but no commentary or caption. As I continued to read, I found that each chapter has a section like this. I wondered what the purpose of these videos is, or how I should evaluate them in the context of the story. This makes me wonder, when is it valuable to include images for image sake? And how do you effectively demonstrate the purpose of your visual components to your reader?

I thought it was interesting how Undercurrent told its story in five chapters, each chapter holding a unique, distinct story. Is this an effective way to tell a story? How does each story interact to tell a larger story?

What is the effect of starting with a video versus text?

The websites we have analyzed so far have varied dramatically in terms of content—telling a story, discussing an issue, and launching an investigation. What criteria do journalists use to determine whether or not a topic is worthy of (or right for) multimedia storytelling? What makes this type of storytelling the best fit for these subjects?

How did the website designers create the effect of a wave rising when you click on the first chapter? I think it added a lot to the transition between chapters and distinguished each section of the story from the one before it.

Not a question, but it has to do with format: I like how even within chapters, sections are separated to let readers know approximately how much information is left in each chapter.

In chapter 3, there is a piece where you can flip through different topics regarding Tourism in Panama. How was that created?

I noticed that this website did not have a logo in the tab the way some other websites do when you view on Google Chrome. Is that something we could do for our website?

Does giving the reader the ability to “launch experience” OR select which chapter they choose help or hurt the goal of interactive journalism?

Obviously many websites have been created about different topics, but in the same format as Snowfall, how/what is considered copying this original idea?



Student questions about NSA Files Decoded

Continuing the series on student questions about multimedia storytelling. For this class the students viewed NSA Files Decoded by The Guardian.

Questions and comments by the students:

This one is a well-made piece. Only one question on the design: instead of putting all of the contents in one very long page, is that a better idea to divide it into different chapters and put a linear “chapter guide” thing at the bottom of the page to navigate the readers? Moreover, it may help readers who don’t have time to read it at once to remember which part they should continue and pick the parts they are specifically interested in.

In “NSA  Files: Decoded,” there is a graphic that says how many terabytes the NSA has selected of data to review since you started reading the article. Does The Guardian update the algorithm to account for any changes from the NSA in regards to how much data they review? Or is the example based on data found when the article was written?

How did the web designers create an aspect of the website that changed the amount of data collected based on how much time you have spent on the website?

I thought that integrating brief snippets of video interviews into the story was an engaging way to use quotes. What is the value of using video interviews to present quotes? If the reader did not want to watch the video interviews, would the story still be as an impactful?

This story referenced vastly more sources opposed to the NSA surveillance mission than in support of it. How does a story ensure it is providing the most fair and balanced perspective?

What are some benefits and disadvantages of having the site be fully scrollable through the every chapter vs having a button to the next chapter at the end of each chapter? (Similar with autoplay videos vs click on play videos) Which one convinces the readers better to finish the story?

“Grab the audience’s attention visually.” – Does grabbing the attention visually truly work better than words? Or could it possibly frame the audience to only look at the visual contents of the website instead of the important wording?

I’m assuming you already know about the Snowden leak going into this reading. How does that prior knowledge change your experience with this particular piece, as opposed to Snowfall?

I still find it interesting how some of these websites launch content or play a video automatically, especially in the case of ’NSA Files’. It truly ropes viewers into a set experience, which can often be time-consuming. How much do we know about the demographic that tends to engage with this multimedia storytelling? Is this a specific intended audience? What are the expectations of viewers who peruse a website like this one? Does this take the place of a newspaper article or a documentary or a website (or some combination)?

The NSA Files website maintained some newspaper elements with the black & white color scheme, consistent centered column of text. What does a journalist consider when determining text position like this? Is the model of ‘text in the middle, blank columns on each side’ somehow shown to be more visually compelling?

How did web designers make it so people can interact with the globe and move it around in chapter 3?


Student questions about multimedia storytelling

This term in Journalism 341: Multimedia Storytelling Design, we’re asking students to submit two questions for discussion prior to each class in which we will analyze a specific website. This task counts as part of the class participation grade. From the syllabus:

The questions should be thoughtful and demonstrate familiarity with the site and any related required reading. Your questions should avoid easy and obvious answers. Instead, you should aim your questions to provoke discussion and even debate among your classmates.

These questions will form the basis for our class discussions. For our second class of the term, we’ll be analyzing the now classic piece from the New York Times: Snowfall, The Avalanche at Tunnel Creek.


  • How many multimedia elements in a journalistic piece is too many elements? When do these elements begin to detract from the story?
  • In your opinion, do you believe that the Snowfall article should use the same, less, or more multimedia elements, and why?
  • What do the multimedia elements (slide shows, Youtube clips, graphics, gifs) add to this story? Can you tell the same story without these elements?
  • Would you have picked this format to tell this story? Why or why not?
  • How does the video of Elyse Saugstad help add to this website, and what other visual elements could potentially be added to this website in addition to the use of video, photos, storm graphics, and maps?
  • How does the website’s use of personal narratives, like those of Chris Rudolph and Elyse Saugstad, add to the website’s impact on the viewer?
  • The Snowfall story reads more like a narrative than a traditional inverted-pyramid journalism story. When telling a journalistic story, how can the writer strike that sweet spot between telling a story and communicating cold, hard news? Is it appropriate to have a lede? Does this story have a lede?
  • I found the use of video to tell the story engaging. However, the story lacked transitions into the videos. Is it appropriate to transition to or reference videos in the story? What is the best way to incorporate video material in a multimedia story?
  • Why did the writer and editor choose to include the specific details that they did about the deaths of the skiers? Who was the expected audience of the story?
  • Many times the volume is turned down on mobile devices. How did the creators of the piece promote the use of sound and incorporate it into the piece?
  • How did the designers create the piece of the website where when you clicked on certain words, the video began to play, or where it would link to a photo gallery? Is that a difficult feature to create?
  • The map of the direction of the buried skiers quickly shows both the location of the avalanche and the locations of each skiier beneath the avalanche. How did the designers make it so it was not in a traditional video format size, and played automatically when the viewer scrolled down?
  • The website represents a tremendous amount of scholarship, especially in terms of historical research surrounding the Wellington Avalanche of 1910 avalanche. How can journalists or storytellers in general fairly credit their sources without interrupting a powerful aesthetic like Snow Fall?
  • In today’s fast-paced digital culture, viewers often lack the patience necessary to follow a story arc with patience and attention. Snow Fall represents a clear narrative that calls on its audience to follow a set path through text, video, images, etc. How can multimedia storytellers stay true to their narrative while remaining mindful of their audience’s priorities (namely, viewers who do not have the patience to work through each section in turn)?
  • How can the marketing benefit or hurt the overall outcome of an article such as Times’ preview release of Snow Fall on Twitter? How can journalists maximize its benefits?
  • What should the main objective of a journalist be when creating and evaluating a new story (#s of viewers, excitement of viewers and colleagues, importance of content, use of technology, etc)?
  • Personal profiles: At the end of the “Tunnel Creek” chapter and the beginning of the “To the Peak” chapter, there are personal profiles of people experienced the avalanche on the right side of the paragraphs. When clicking on the profiles, the slideshows with photos about more aspects of each person appear in the middle of the window. However, some of the profiles do not appear at the first time when the names are mentioned. Is that a better idea to show the profile and slideshow of each person at the first time he or she appears in the text to help readers know more about the person in the first place? Moreover, for those people with video interviews, is that a better idea to put their interviews and personal profiles together to help readers remember each person better? Instead of showing the slideshow in the middle of the page, is that possible to show them on the side of the page so that readers can continue reading the interview of each person while viewing the daily life of him or her? In addition, is that a better idea to show the brief introduction of each person when clicking on the photo shown at the beginning of the “The Descent Begins” chapter like the Third-year housing project did?
  • Color tones: The background color tone of the story is basically a black and white tone, which is very suitable for the theme. When rolling down the page, the previous texts’ backgrounds change to grey on some occasions. Is that a better idea to adjust the background color tones and the entry of the text or multimedia source to convey a more intensive or distressed mood when the texts are related to the avalanche and death? For example, when writing about the death of Jim Jack with the source of the phone call with 911, is that possible to slowly show each sentence rather than showing them together in order to highlight the sense of sadness? Furthermore, is that a better idea to change the photo of deceased people to black and white ones to help readers tell the survivors and deceased people in the avalanche?



Another year of teaching multimedia storytelling design

For the third year in a row, I’m co-teaching Journalism 341: Multimedia Storytelling Design with Professor Toni Locy, a highly experienced journalist. The course is an intensive introduction to the foundations of Web design/development through the lens of long-form journalistic digital storytelling. The first half of the term involves analyzing the structure of many stories published as multimedia journalism, starting with the now classic Snowfall piece by the New York Times, NSA Files Decoded and Firestorm by The Guardian, and a large range of other stories. The Online Journalism Awards provide a good resource for updating the course contents every year.

Also during the first half of the term (our terms are 12 weeks), students will conduct an investigate report as a group project. This year’s topic is Race at Washington and Lee University. The second half of the term is implementing their reporting as a journalistic multimedia story on a website that will be made publicly available. It’s going to be very interesting to see in which directions the students take this story. Once that site is live in April, I’ll be posting the link.


Readings on electronic literature, or conversations on digital narrative

I initially prepared the following list in preparation to guest lecture in an upcoming creative writing (fiction) course that will introduce students to ways of telling a story in digital media that takes forms other than linear prose.

First, why the term electronic literature (e-lit)? That’s a stiff sounding term that is a throwback to an earlier time before digital became commonplace. But e-lit is the term that seemingly has gained the most traction to refer to narratives that make innovative use of digital media. I have a slight discomfort with the term electronic literature (and also with digital literature) but my unease with the terminology is a topic for another post.

Any discussion of e-lit must involve the Electronic Literature Organization (ELO) at That website is quickly overwhelming but the summary page What is E-Lit? is a good place to start.

The foundations of e-lit

An essay by Katherine Hayles offers a broad survey of e-lit (up to 2007). Hayles is an important figure in media studies and this essay is a good opportunity to introduce students to her works. Hayles includes references to landmark writers such as Kittler and Manovich and positions e-lit in a larger framework of the modern digital society.

This essay by Hayles is the first chapter in the book Electronic Literature: New Horizons for the Literary, which includes a companion website. The book attempts to establish a canon of early e-lit. But Janet Murray, another key scholar in the field of media studies, points out that these early works “are useful experiments, necessary failures, and limited successes, full of interesting mistakes that if appropriately acknowledged can push practice forward.” (Murray, Janet H. Hayles, N. Katherine. Electronic literature: new horizons for the literary. Modern fiction studies 55.2 01 Jan 2009: 407. Johns Hopkins University Press.)

A good summary of Hayles book on e-lit is provided on The Quarterly Conversation site in an article subtitled How Electronic Literature Makes Printed Literature Richer. Anyone who finds Hayles even slightly interesting should read her book How We Became Posthuman: Virtual Bodies in Cybernetics, Literature, and Informatics.

Pathfinders: Documenting the Experience of Early Digital Literature is the best source for understanding where e-lit comes from through an examination of pre-web hypertext literature in the years between 1986 and 1995. The scholarly literature on e-lit often refers to seminal works such as Shelley Jackson’s Patchwork Girl (1995) and other hypermedia texts created through tools developed by Eastgate System. However, the technology to actually read those works of e-lit today are inaccessible to most people. While Pathfinders does not provide a simulation of Patchwork Girl, it offers an intriguing methodology of showcasing how Shelley Jackson and readers interact with Patchwork Girl.

The present state of e-lit

There’s something odd about e-lit: it appears to be mostly discussed within academia and it’s difficult to find good examples on the web of what is called e-lit. How could that be?

Writer Paul La Farge provides a great comment:

“I actually don’t think digital literature is suffering from a lack of theory at this point; if anything, it suffers from a lack of practice. We need more writers! And a more diverse and robust way of getting their work into the world: not just more competent critics (we have some), but more kinds of competent critics, and more places where conversations about digital literature can happen, and more avenues by which digital lit can reach readers. All of this will surely happen in time. What I think the medium needs now is encouragement, and perhaps rescue from the forbiddingly technical language in which it has been theorized. It depresses me to think of digital literature as being exclusively an academic specialty: it’s as if Film Studies departments had sprung into existence all over the world, before anyone had made any movies.”

This quote is from an excellent series of posts by author Illya Szilak that appeared on the Huffington Post.

Note: I will be updating this post with new readings.



E-lit postings by Illya Szilak

Over the course of a year (late 2012 – late 2013) author Illya Szilak wrote a series of articles on Huffington Post about electronic literature that are worth reading for anyone interested in the topic. Szilak is the author of Queerskins – A Novel and Reconstructing Mayakovsky – A Novel of the Future.

Unlike most people who write about e-lit, Szilak is a physician and not an academic. As a creator of contemporary e-lit she brings a perspective that is often absent from the conversation on this topic.

Due to the navigational features of the Huffington Post it isn’t easy to read her articles in the order they were written. So, I arranged the following links to each article in chronological order.

The Death of the Novel: How E-Lit Revolutionizes Fiction 11/08/2012

Video in the House of the Word: How e-Lit Intersects With Cinema 11/20/2012

What Does a Polar Bear Do in a Jungle? How E-Lit Expands the Habitat of Literature 12/11/2012

The Death of the Author: E-lit and Collective Creativity 12/27/2012

It’s Got a Good Beat and You Can Dance to It: E-lit Plays With Time 1/17/2013

New Wor(l)d Order: E-lit Plays With Language 2/7/2013

It’s All Fun Until Someone Loses: E-lit Plays Games 3/7/2013

Just Playing Around: Why E-lit Matters 3/15/2013

Killing the Literary: The Death of E-lit 3/19/2013

Books That Nobody Reads: E-lit at the Library of Congress 4/24/2013

Fleshly Data: E-lit and the Post-Human 5/10/2013

Remembering the Human: E-lit and the Art of Memory 5/15/2013

Reorienting Narrative: E-lit as Pyschogeography 6/11/2013

The Silent History: E-lit Looks to the Future 7/1/2013

A Book Itself Is a Little Machine: Emily Short’s Interactive Fiction 10/30/2013

A Book Itself Is a Little Machine: Emily Short’s Interactive Fiction, pt 2 11/4/2013


Electronic Literature, Digital Humanities, & Creative Writing

This morning we met with a professor teaching Fiction Writing who wanted to incorporate a DH assignment into the course that required the students to tell a story through a new technology of their choice.

The students will start by completing a 3-page writing assignment with pen and paper. Then they will be asked to translate that story into a digital medium. The keyword here is translate. Is chopping a thousand words of prose into 50 tweets a translation of prose into digital medium? I would say not. As with any translation, how does the language of the digital medium impact the text? How does the language of the digital medium provide different capabilities (or affordances) that inspires new forms of creativity?

As an assignment, students will have to grapple with the technological platform (the language) that they have chosen for their translation. Students must learn that every platform choice comes with limitations and constraints that have significant impacts on determining the structure of their narrative. While these restrictions appear to be determined by the technology, students should grasp that the limitations are the functions of the underlying software. The code behind the platform reflects the dictates of software developers.

Many examples of electronic literature try to work within or around those constraints. That likely is a simple reflection of the coding limitations of the authors.

I would prefer that students start their translation process not with the choice of platform. But start with creativity. And again with pen and paper. Approach the digital with a blank slate and not with the limitations of an imposed piece of software. Sketch out in pencil what would be ways of representing this narrative if the choice of digital medium was wide open. Have the students describe the capabilities that the software would provide to tell the story. Have the students create a storyboard, a flow of the narrative, with the technologies of their imagination. These tools may not yet even exist. But if they can be imagined, then the algorithms  can be created.

What’s important is not that the students learn to tell a story in prezi or twitter, but that they learn that digital media is software that has capabilities and limitations defined by its creator. The process of software development is a creative act. While students in a fiction writing course will not become coders overnight, this exercise could inspire them to see the linkage between the creative process and the process of developing the tools that we all use to tell the stories in digital media.


Creativity and Code

The third class of multimedia storytelling design is focused on what I call creativity and code. Continuing the focus on Snow Fall, the class reading for today is How We Made Snow Fall. That last link is a really good article, worth reading closely.

Creative thoughts from the how Snow Fall is made article:

  • Making a single story out of the digital assets….”to weave things together so that text, video, photography and graphics could all be consumed in a way that was similar to reading–a different kind of reading.” Talk about the origin of the word text…Latin…to weave (see Latin dictonary)
  • The design process: initial prototyping, collaboration, integration of graphics and video into “the narrative experience”
  • “a lot of trial and error and experimenting”
  • “design revisions and tweaks”
  • filmmaking techniques, but reading centric
  • “We focused on the pacing, narrative tension, and story arc–all while ensuring that each element gave the user a different experience of the story.”
  • moving images…pauses at “critical moments in the text”
  • “Having a tight edit that slowly built the tension of the narrative was the overall goal.”
  • Color palettes
  • Biggest challenge: “managing the path we wanted the reader to follow”


Much of this class period will be getting students to do HTML hands-on. We’ve talked a lot about HTML in the first class and looked at a lot of HTML code, but I want to get a sense as to how far the students are coming along with actually doing something with HTML. I suspect not far.

Some thoughts on topics to cover in today’s class:

  • Have the students open up the W3schools site. A good reference source for tags. But, also, for those new to HTML: the try it yourself  online editor is an extremely simple way for seeing how tags work.
  • Tell students about Not required for this class but a great resource for learning on your own. In future versions of this course, I might think about requiring access rather than a book.
  • What is a plain text file? Contrast with binary files using machine code and with WYSIWYG document editors. What’s a text editor? A code editor? Try opening a binary file in a text editor.
  • File extensions. Nice to show those extensions in Mac OS X (Finder>Preferences>Advanced>Show all filename extensions.

I had a student email me with a problem in getting an HTML document display in the browser as a Web page. Instead, the page simply showed the HTML code. The problem was that the student followed the instructions in the Duckett book and used TextEdit on the Mac to create the page. TextEdit, being a rather confusing software program for writing HTML, saved the document as RTF (even though the student had correctly added the .html extension). There’s a non-intuitive option within TextEdit for saving as plain text.

For this class I’m recommending the use of Atom, which is already installed on the iMacs in the journalism lab. But make sure that students know how to install this on their own laptops.

  • Do students understand that a website is a directory (i.e., folder) on a server?
  • Create a basic web page in HTML. Perhaps by just copying over what they had done in the w3schools try it editor.
  • Save the page as index.html…as a way of introducing the importance of index.html as a filename in web site directories. Stress, though, that not any directory can serve web pages. You need a directory that is associated with web server software. In the next class we will look at actually uploading the pages to a server.
  • Play around with HTML. Go over again the head and body. Title. H# tags.
  • Introduce lists and links.
  • Relative and absolute URLs.
  • Talk about text formatting (non-CSS).
  • Take questions.



The simplicity of the web

The second class of multimedia storytelling design is focused on what I call the simplicity of the web. My advancing age, almost 50, gives me the advantage of having witnessed the evolution of the web from a text-based browser to the apparent complexity of modern web sites. I encourage those learning the web to break down the complexity and focus first on the simple, foundational aspects.

For our text in this course we’re using Jon Duckett’s HTML & CSS: design and build websites. Written for beginners, this book presents the basics in an engaging manner (with beautiful page layouts). I did choose, however, not to assign all the chapters in the same order as in the book. For the first class, we’re focusing on chapters 1, 2, & 5. Throughout this class we’ll be using the example of NY Times Snow Fall. It’s a complex piece but useful for these (mostly) journalism students to know how it was constructed.

Here are some of the questions (and occasional commentary) guiding discussion in this two-hour class:


  • What do we mean by structure?
  • Why are we talking about documents?
  • What are the structural elements on Snow Fall?
  • How can you see those HTML elements in the browser? How do you turn off the styles?
    • View Source
    • Unusually, the view source for Snow Fall is the whole article and not just what is visible.
    • What’s happening in the head and body?
    • Chrome needs the web developer plugin to disable all styles. (What’s an extension for a browser?)
    • In Firefox, it’s easier to view a page without styles
      • Firefox – View – Page Style – No Style.
    • A page without style: THAT is the simplicity of the web.
      •  In Firefox, show how you can hover over element with mouse and see the code view.
    • Chrome – Inspect element. I prefer how Chrome hover highlights the full element.
  • Do you see a hierarchy of information? Start with the <html> tag.
  • What’s a title in HTML?
  • What’s a header?
  • What’s the body?

In the view source of Snow Fall, (finally) around line 827, you’ll find:

<h1>Snow <span>F</span>all</h1>
<h2>The Avalanche at Tunnel Creek</h2>

Let’s look at that first paragraph.

  • What’s a heading?
  • What’s an element? What are tags? Any difference between an element and a tag?
  • What is markup and why is it used? What’s the purpose of elements and tags? Why is it necessary?
    • The machine reads character by character. A simple concept. Maybe so obvious that it’s not clearly grasped. Very important to slow down and read a page as the machine, the software, reads the page. The angle brackets are signifiers to the machine. Literally, signs that give directions to the browser about what to do.
  • What is plain text? What’s the difference between a plain text file and, say, a Microsoft Word file? Are there other types of markup languages?
    • Mention the Scholarly Text Encoding course
  • What are attributes of an elements?
  • Can I just use any tag? What tags are possible and how do I know?
  • Key HTML elements for beginners:
    • <body>
    • <head>
      • What’s the difference between the <head> element and a heading?
    • <title>


Think about the separation of content from markup. Then think about the separation of content/markup from style/presentation.

Structural markup: show  examples of each in Snow Fall.

Semantic markup: examples of each in Snow Fall.

Heading tags: choose based on structure and not appearance.

The all important paragraph <p> tag.

Why is Duckett even mentioning <b> and <i> and not <strong> and <em>?

White space collapses on a web page.

Line breaks <br/>, horizontal rules <hr/> and empty elements


Many semantic elements are not used very often

Editors: time to fire up Atom?


Keeping your images in a folder. Remember that a web site is simply a folder, right?


Image formats


Raster & vector images

Animated GIFs



When examining Snow Fall, take a moment and talk about not over linking. What’s the difference between this article and a Wikipedia page filled with links? What impact does that have on readability? On keeping you engaged with the story? Or, possibly more importantly, on the site?

With Snow Fall, what’s the difference between reading just the text and viewing the site? Do you wonder how many people actually read the whole article? Would another format actually have done more justice to the writing? (That’s a strange phrase…”done more justice”….privileging the written word over other forms of storytelling?)