A complaint we hear time and time again in this modern, digital age is that attention spans are obnoxiously short. Everything is consumed in bite-sized chunks and as quickly as possible; not enough people slow down or take the time to enjoy things. Well, worry no more, because longforms are here to save the day.
As described in Wikipedia:
Long-form journalism is a branch of journalism dedicated to longer articles with larger amounts of content. The length of long-form articles is between that of a traditional article and that of a novel. Long-form articles often take the form of creative nonfiction or narrative journalism.
Longform reads are the internet’s answer to magazine features – longer, involved stories with deeper, more complex analysis of the subject matter. They require more of the reader (in both time and energy) and they appear less frequently because of the amount of work involved (in both time and energy). They stand in contrast to the rest of a site’s content, which are mainly composed of short posts that explain a single idea or news item. Lately, longforms have really gained popularity, not only among readers, but also among web designers and developers who have been experimenting with longforms as a way to showcase incredible artistry and refined, unique mechanics. (Less impressive is the curious addition of noting the reading time on internet articles… the jury is still out on that one.)
This is the right place for that type of creativity and experimentation. If a reader is going to hunker down with their device for a little while to read a feature article, then let’s enhance that experience for them.
Because of the allowance for creativity in journalism, longforms are great examples of visual essays and, as seen earlier, Wikipedia explicitly states they are often categorized as creative nonfiction. How visual essays differentiate from regular written essays is by incorporating moving images: commonly a combination of animated gifs, video, scrolling animations, interactives, and other such devices that are only possible in internet-based articles. Let’s take a look at a few examples. All images are captured at full screen and including the browser to give a sense of scale.
Girls Not Allowed – by Tracey Lien, Polygon.com
Link to longform
In this thoughtfully written longform read about gender stereotypes and who plays videos games utilizes scrolling animation, color, and an alternating left-right column layout. The team that wrote, designed, and built it wisely avoided gifs or video, as the bright colors and illustrations are already enough. As you scroll down through the article, the pages exit the top of the screen to reveal the stationary illustrations. The text scrolls along with the colors. Polygon is a site about video games, and the subtly playful manner of the design matches the spirit of the site while respecting the potentially controversial subject matter. It works as a visual essay because the design and mechanics enhance the experience, despite being heavier on text than a typical visual essay.
Two Gunshots on a Summer Night – by Walt Bogdanich and Glenn Silber, New York Times & Frontline
Link to longform
This read from the New York Times is also heavy on text, but what is truly unique is that the online article extends to an episode of Frontline on PBS. The news organizations collaborated on a heartbreaking investigation into the death of a woman who was ruled to have committed suicide but others believe she was murdered by her boyfriend, a police officer whose own unit processed the scene of the crime. The longform incorporates live-action video that will play briefly when you scroll over it. Playing the entire video requires clicking the play button, but that bit of silent movement works successfully to direct your attention and add emotional impact to the story. Other elements include sound clips, still images, and click-to-expand documents.
Teaming with Frontline brings another layer to the experience. Both the article and the television episode cover the same information, but the experiences of reading a story and then watching a documentary about it (or vice versa) makes for an uncommon interplay between text and image. Visual essays, at their essence, are all about text and image and to tap into how the reader/viewer processes this experience is a potentially rich source of information.
Snowfall – by John Branch, New York Times
Link to longform
Another top-notch, media-rich, interactive longform from the New York Times, this time telling the tense story of a group of experienced backcountry skiers caught in a deadly avalanche in Washington state. Of the three longforms discussed, Snowfall is the most complex. This harrowing account opens with a haunting looping video of a desolate and snowy mountaintop, then the title fades in. Right away, the scene feels cinematically sweeping. Scrolling down reveals videos, animated maps, and slideshows. Along the top of the screen are chapter links, which also changes the way the reader experiences the read. This feature is the most direct reminder of a traditional book and its presence constantly reminds you that you are reading something that is like a book, but with so much more to see, hear, and do.
On the other hand, this is the only longform of the three to feature ads within the pages, as seen in the last image above. While the design and placement does its best to be the least invasive, it is also a reminder that you are reading an article online. It takes you out of the story for a moment, but… well, they gotta put food on the table, right?
To read a very well-written piece regarding the utilization of all of these techniques, both “conceptually and practically,” take a look at this traditional essay by Allen Tan, a designer at the New York Times. Whether he worked on Snowfall is not clarified, but he clearly has a stake in this type of work at the organization. Tan breaks down what the terms “immersive” and “intuitive” actually entail in terms of web design and development. He urges web teams to understand the techniques before mimicking them, understand their purposes before deploying them, and understand their proper placement or run the risk of abusing them. Everything on the web is still young, and we should look to the many times in the history of manmade communication when paradigm shifts occurred and how we handled it. That can guide us in the challenges we face today, as we shift from books and magazines to e-readers and smartphones.
A practice all three of the examples utilize is separating the longform from the rest of the website. Their layouts do not follow the same format as the daily updates. The articles are branded, certainly, but their placement as a singular element on the screen tells the reader that this requires their undivided attention; there will be no live feeds, no links to related stories. Even the comments section is separated in the Two Gunshots piece. They look and behave as their own websites. Magazine features also follow this philosophy, so the design precedence is easy to see.
Examining longforms is a useful way to expand the definition of visual essays. In its earliest iterations, the genre of visual essays were limited to just one medium: movies (any length, any distribution). Now, visual essays are making a natural and clear evolution to include interactive experiences, though not necessarily limited to the web. One can even argue that this might be the best medium for visual essays… something to contemplate!
Let’s conclude this discussion by giving praise to the real star of all of these longform reads: the writers. While this post concentrated mainly on the visual aspects of each article, it is necessary to remember that fantastic writing is what ultimately forms the heart and the soul of a work. The other elements support and enhance. No amount of flashy video, fancy design, or complicated builds would be successful without a foundation of good storytelling. Even if the story isn’t told through text, never forget that visual essays are always, at their core, essays.
[1-2] Screen captures from Polygon.com; hat tip to IR for the link
[3-7] Screen captures from New York Times website
 Illustration by Natalie Andrewson