Article

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:

 

 

Article

Interlitq: from custom PHP to WordPress

Earlier in the year I described the essential elements in redesigning a literary magazine with Interlitq as our case study. The Interlitq redesign continues. The current timeframe is a June completion date, which is delayed from my original intention of April. The delay is largely due to my teaching schedule. I completed the multimedia storytelling course, which had a complex web project, in April. And barely more than a week later started teaching an innovations in publishing course during our mini-spring term, which is just 4 weeks. Once spring term is over, I’ll have more time to wrap up the Interlitq project. Also, I have a graduate student from the University of Tennessee School of Information Sciences collaborating with me over the summer on literary magazine redesign and library publishing.

Quantity

Let’s review the quantity of material that has been published in Interlitq since its origin in November 2007: 26 issues + 6 ongoing series. That represents over 500 contributors in a variety of genres (essays, interviews, poetry, fiction) as well as more than 20 artists contributing nearly 200 works of art for illustrating the publication.

Content Management

That amount of material requires a content management system (CMS). Since its beginnings in 2007, Interlitq has existed in a set of custom PHP files where each work (essay, interview, poem, story, etc.) was stored in a separate PHP file. Each contributor biography also existed in a separate file. While static sites offer significant advantages, the integration of content and code and style in this fashion is a nightmarish scenario for migrating to a new design and more efficient form of publishing. The Interlitq site consists of over 4,000 files that need migrating to a new system.

For the redesign, I chose WordPress for the CMS because of its broad level of support and customization. While a tool like Grav presented a lot of interesting possibilities, I simply wasn’t ready to jump into developing a Grav-based site considering the limited time availability I have for working on this project.

Blog

The Interlitq blog has existed separately on wordpress.com since the blog started. With this redesign we will be bringing the blog into same new design as the overall site. The blogging component gives WordPress another advantage since WP is a premier platform for blogging. And, honestly, another reason for choosing WP is that I’ve worked with it since 2004. So I’m very comfortable with the WordPress way.

New Design Aspects

Let’s look at a few new design aspects that will be appearing in Interlitq.

Archives

The previous design had a listing of past issues as show below.

The new design is a grid layout of issues and series represented by its distinctive artwork.

The CMS allows the grid to be automatically generated when a new issue or series is added.

Contributors

One of the more problematic aspects of the old design is that the contributor list simply existed alongside the left column of the page. That worked fine for the first few issues but now with hundreds of contributors, the list scrolls far beyond the footer of the page:

A database-drive site allows for the contributor listings to be presented in a dynamic manner that features the author photo with the author’s name (which is actually a link to the author’s full bio on the site). This approach also allows optional text to exist below each author photo. For the prototype below, I simply added some placeholder text but this text could be a quote from the author’s work on Interlitq:

Obviously, this represents a small sample of the hundreds of authors that appear in Interlitq. The alphabetical row above the author photos allow for the contributor list to be segmented into smaller group for displaying on the page rather than loading the giant list all at once.

 

Article

Interlitq: identifying essential elements in redesigning a literary magazine

The redesign of Interlitq is going extremely well. We’re on a timeline to have the redesign completed this spring, and aiming for an early April release if at all possible. A literary magazine is one of the more complex types of sites to redesign. On the surface it looks quite simple: modify the header, adjust the color palette, update the typography and call it done. But there’s much more once you dig into all the elements that make a literary magazine on the web.

Branding

In continuous publication now for over a decade, Interlitq has retained the same design since it began in 2007. Yes, that now looks very dated but there are aspects of that design that form Interlitq’s visual identity. And we don’t want to do away with that entirely. Rather, we want to strengthen certain aspects and create a fresher set of visual elements through typography and judicious use of white space.

My opening step in any redesign is to pull out some graph paper and a pencil. Then I start sketching ideas that seek to uncover the overall structure of the site. Some of the graph paper ends up crumbled and tossed to the corner of the desk. Eventually, I find some drafts that capture the essence of each page of a site.

The first element a person encounters upon entering the website is the header. Here’s the (almost) original header from 2007:

I say almost the original header since the site did not originally include a blog. The blog tab was added a couple of years after Interlitq started. But the coding for the blog tab in the header was programmed so that it also appeared in the header of earlier issues as well. One thing to note that is now a historical artifact of web design is that this header image actually consisted of 10 individual images, plus 14 spacer gifs, all set within an HTML table. Actually, it’s an HTML table within a table. That was the complexity of web design in the early 2000s! But it looked good for the time, and it worked. Yet, there was something about the branding that wasn’t clear, e.g., was the site named Interlitq (or interLitQ) or was it The International Literary Quarterly? Or was The International Literary Quarterly a subtitle or simply a description of the interlitq.org site?

In 2010 a new header was designed for the site that solidified the branding on Interlitq as an original and memorable brand for the site. And the new header retained the thematic color scheme of the original.

The result was a slimmer header with a clearer emphasis on the Interlitq brand. This header still had the same problem, though, of being built out of multiple images. In the code the images have unwieldy filenames like menu_r1_c2a.gif.  Here are examples of a couple of individual images that comprise the header:

Dealing with multiple images in a header menu is a technique of the past thanks to advances in CSS, the coding language used to style web pages.

I knew that any redesign needed to start with figuring out how to design the menu in CSS without using any images. Only the web tech readers of this post will realize how exciting that is! And, also, how important. Through using only text-based CSS in styling the header, then we can create a site that works well on all types of screens, including cell phones.

The new header uses no images and consists only of code. (Okay, for the simplicity of writing this post, I’m cheating a bit by using a screenshot of the new header but, believe me, it’s all code and looks very crisp and clear on the actual site.)

The entire header and menu is created through CSS, including the rounded corners on the lower edges and the slight shadow. The color palette has been updated and the type is all web-based.

One of the remarkable aspects of web development that enable non-image based design are web fonts. For Interlitq I chose two fonts from the freely available Google web fonts service: Cormorant Garamond and Lato. In the header, the word “Interlitq” is set in Cormorant Garamond and the text of the menu is set in Lato.

Home page and landing pages

The home page of a literary magazine, the web page you see when you enter the main address of the site, e.g., www.interlitq.org, often serves multiple functions. In the early years of Interlitq, the home page served as the introduction to each issue. At that time, Interlitq only published issues quarterly. Below is a screenshot of the very first home page for Interlitq, which also was Issue 1 in November 2007.

That page was really functional. The main text on the page was an introduction by the editor. A list of contributors appeared in the left side column and the masthead just underneath the contributor list. (Again, note that the header menu in the image above is the only part that differed slightly.) Though information about each author’s work is embedded in the editor’s introductory text, one essential element that is missing is a table of contents for the issue.

The home page for issues of Interlitq has been redesigned to the following layout:

Noticeable changes here is an emphasis on an actual table of contents that gives prominence to the work of each author. The titles are the works are displayed as hyperlinks next to the authors. The works also are grouped by genre.

The next post in discussing this redesign in progress will examine how to handle the home page when the literary magazine switches from issues to publishing individual works on an irregular basis. That presents some challenges but can be handled quite well.

 

Article

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?

 

Article

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?

Article

The landscape of academic-led publishing

Jisc has issued a new report on Changing Publishing Economies: A landscape study of new university presses and academic-led publishing (pdf). At least, I think it’s a new report; oddly, there’s no date of publication on the report. But it’s a very interesting overview of initiatives at least through 2016 when the study was commissioned.

A significant aspect of the report involves the increasing role of library as publisher.

it is important to note the difference between the library as publisher with regard to post production services and the library as university press, which implies an active role in the entire publishing process.

In the section on background, motivations and goals (p 43) the report identifies that many initiatives are “community based” and originate from existing research communities based around shared interests. The report also describes how academic-led publishing initiatives does not necessarily mean institutional-based initiatives.

Open Humanities Press argues that its independence means it is better able to respond to what scholars want “rather than to what their institutions, libraries and funders want”, which is similarly emphasised by Ubiquity Press and Language Science Press.

This section of the report summarizes insightful responses to a series of open-ended questions that are well worth reading. Several responses touch on topics I want to explore in future posts, such as publishing multimodal scholarship. Overall, it’s a very good report on non-commercial academic publishing.

Publishing initiatives covered in the report:

Counterpress
electric.press
Goldsmiths Press
Language Science Press
Mattering Press
MayFly Books
Media Commons Press
meson press
Open Book Publishers
Open Humanities Press
Open Library of Humanities
punctum books
Ubiquity Press

 

 

Article

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.

Questions

  • 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?

 

Article

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.

Article

Interlitq: technology for 2007

It’s November 2017 and Interlitq: The International Literary Quarterly is 10 years old. Now, we’re not only redesigning the site but reworking the technical architecture from the ground up. One key question: do we migrate all the content from the last 10 years into the new design and architecture, or do we just start fresh with new issues going forward? The latter is the easy choice but there’s so much value in the first decade of Interlitq that it all deserves to be in the new design and technical architecture. We know that’s the right thing to do, so we’re doing it even though it’s not the easiest approach.

Before we go further, a few words about how we got to this point. I first heard about Interlitq in mid-2017 while having lunch with Peter Robertson in a restaurant in downtown Buenos Aires. I had known Peter, a Scotsman, for about a year. We both lived as expats in Argentina and found a connection through our mutual interest in literature. He mentioned that he was starting a literary review, but I didn’t really get involved until issue 2.

The site was developed and designed by an Argentine that Peter knew. The site was not done in any type of content management system (CMS) but as custom PHP code. That worked fine for a few issues but scalability has become a major problem for Interlitq. The graphic design looked good for 2007. (Really, it did.)

 

Article

Interlitq: A Review in Progress

An activity I’ve undertaken this year is to modernize the design and digital strategy of Interlitq, The International Literary Quarterly. We’re approaching the 10th anniversary of Interlitq with the first issue appearing online in November 2007. A lot has changed on the web in the past decade, but the design and technical architecture of the site is showing its age. As I work on this project, I’ll be posting here updates that describe the redesign process. This is not simply a visual redesign but also a technical redesign of the underlying architecture.

Before embarking on the visual redesign, there are several technical steps to be taken:

  • Establish a working repository of text files. (All existing content are contained in individual PHP files.)
  • Convert files from existing php to a more manageable text file structure, e.g., Markdown.
  • Determine information architecture based on content types, desired functionality, and forward compatibility.
  • Examine other online literary journals for ideas about redesign, and identify key elements that are desired in the redesign.
  • Determine platform for the new site, most likely WordPress though that also requires determining if the platform should be multisite WordPress where each journal issue is a separate WP site. Some online journals have taken this approach.
  • Setup a test server.
  • Prototype design. Revise as needed.
  • Import content into test server.
  • Start implementation of new design in a restricted sandbox.
  • Fully test new design.
  • Import most recent content from current site into new system.
  • Migrate design and content from test server to product server.

A lot of steps with many details missing from the above list. Fortunately, I love working on this type of project.

css.php