The technologies behind modern i-docs | Guest post from Michael Geraci

In the two decades that I’ve worked as a multimedia professional and educator, I have experienced the constantly shifting sands of digital platforms used for interactive media. I’ve developed multimedia projects in HyperCard, Director, Flash, and all versions of HTML. A recent deep dive into the current state of the i-doc has not only renewed my passion for the digital medium’s capacity to connect storytellers, subjects, and users in compelling ways, it has elicited in me a belief that we are in the midst of a period of growing stability in the fundamental technologies that sustain the creation of i-docs, and it is this stability that will serve as fertile ground for the continued evolution of the form.

A decade ago, I might have been bold enough to make a similar statement about Adobe’s Flash platform. Flash’s comprehensive toolset, robust programing language, and simple web publishing controls made it a powerful tool for creating engaging experiences on the web for those with little to no experience in web development. Flash certainly played a key role in the growth of i-docs in the first decade of the 21st Century. Many of the most successful interactive documentaries at that time were developed in the Flash format, including Alma: A Tale of Violence, Bear 71, and Prison Valley.


Flash’s dominance was officially put on notice in 2010 when Chris Milk’s The Wilderness Downtown signalled that native technologies on the web were poised to challenge third-party, commercial development platforms, like Flash, in the production of interactive narratives online. Since then, developments in web browser capabilities and the evolution of the underlying triad of HTML, CSS, and JavaScript have opened new and exciting possibilities for online storytelling.


I have completed a thorough analysis of 22 contemporary HTML-based i-docs in pursuit of discovering how open-source and native toolsets on the web are being used in the creation of interactive narratives that won’t fall prey to the gradual obsolescence associated with being tied to commercial development platforms. The projects were carefully selected for this review based on their appearance in a number of major festivals, mentions in the scholarly literature – selection for one or more of the curated playlists in the MIT Docubase, and inclusion in the IDFA’s interactive canon. My goal in the selection process was to find a set of subjects that best represented benchmark projects that were built for the modern web.

My selection included: 

While all of these projects feature HTML5 markup and CSS3 styling, my analysis revealed that an interesting mix of JavaScript libraries and frameworks are being used to create the types of dynamic experiences that best support user engagement via the control of rich media assets, enhanced interactive features, and immersive navigational design within stories. All of the major software libraries used in the projects are freely available online and have detailed instructions on how to implement them.

Since every web browser gives the user the ability to see all the code operating behind the scenes, it’s relatively easy to discover how all the component technologies fit together. I used the technology sniffing browser extension Wappalyzer to expedite this process, and I manually sifted through all client-side source code to compile a complete listing.


I found almost 50 different JavaScript libraries in use across the 22 projects I reviewed. My analysis showed that the jQuery library is a dominant standard in modern i-docs. It was used in 20 of the 22 projects. The underscore.js library was used in eight projects, and Google’s Angular.js  framework supplies key functionality to six of the docs in the study. Other notable JavaScript sources found in multiple projects include Backbone, Three, Popcorn, Timeline, and MediaElement. The Modernizr library, which helps developers overcome differences among browsers and devices, also appears in seven of the 22 projects. The open-source content management systems WordPress and Drupal each supply the foundation for one of the projects in the study: Sandy Storyline and Quipu, respectively.


While a description of all the technologies I found in my analysis is beyond the scope of this post, these results provide filmmakers, scholars, developers and fans with a foundation for understanding which technologies are driving i-doc creation in the post-Flash era. And even if you are the type that feels coding should be left to the coders, knowing the ways in which i-docs are being developed allows one to engage more deeply in conversations about the medium and its future.

The technologies mentioned here all point to a trend in the use of free and native toolsets in the creation of i-docs. As Katarina Cizek says in the ‘Open Technology’ vignette in Highrise: One Millionth Tower, ‘Our choice to use open-source technology is our firm belief that life and art is a lot more exciting, a lot more fun, when we share, and we build, and we collaborate with each other’s ideas.’ This philosophy of sharing knowledge and technology is truly only possible when creators choose to work with the tools and platforms that are accessible to widest possible audience.


There is still some way to go, however, before one can proclaim that technological stability has finally been reached in the i-docs universe. Mobile devices will continue to erode the long-established foothold of desktop computers. This will cause producers to develop stories that still deliver powerful user experiences, but on smaller screens that rely on gestural input rather than the traditional mouse pointer-based interactions that have shaped the last 30 years of human-computer interaction. The fact remains that using open standards on the web will lead to similarly free solutions to today’s technical challenges further evolving the platforms available to i-doc creators. After all, ‘stability’ is not the same as ‘stagnant’.

About the author

Michael Geraci is an associate professor of Media Arts at Pacific University in Oregon, USA. His areas of specialisation include web design and development, digital photography, and graphic design. Mike leads the Integrated Media degree program at Pacific, which guides students in the effective use of design and technology as a means of social engagement, creative expression, and digital storytelling. Mike’s previous research includes inquiries into the use of digital tools in the classroom and best practices in the design of web-based instruction.