Three Twenty One

Experiencing Longforms

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,
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; hat tip to IR for the link
[3-7] Screen captures from New York Times website
[8] Illustration by Natalie Andrewson

4 comments on “Experiencing Longforms

  1. Jessica
    December 15, 2013

    This was a great read, as you know, I love reading magazines…so now I will be more on the lookout for visual essays online!


    • Shirley
      December 15, 2013

      If you see any good longforms, let me know! 🙂


  2. isabel
    December 26, 2013

    Great post, Shirley! I agree that mental (textual) information can be exponentially enriched by coupling it with visual information. I love a balance of the two. Having the two components, along with the extra attention involved in a longform, feels like a stimulating conversation with a really engaging friend.

    I did notice that I found the visual information more powerful than the text (probably because of my being a visual person innately). I realized that I skimmed the text but paid close attention to the visuals. I had to ponder this reaction. One aspect I became aware of was that the lengthy text added a feeling of “gravitas” to the pieces, even if I didn’t read all the words, which ended up being added in to my overall experience of the essay.

    I would disagree with Allen Tan on a couple points. I think immersive does mean getting lost in a world. That is what I am seeking… not just the ability to focus. Focusing seems just like one aspect of being immersed in an experience. I want the whole emotional, sensorial, & psychic engagement if I am going to take the time to become involved with a piece. I would also disagree with his interpretation of Tom Hooper’s directorial choices. I think his description is accurate, that the close ups are used extensively, and that they break the fourth wall, but I would wager that Hooper made those choices purposefully. (I guess Tan isn’t necessarily saying that Hooper didn’t do it intentionally, he may just be arguing that it was ineffective). I would propose that Hooper wanted to create an emotionally engaging experience with an entirely different approach than the traditional sweeping, panning shots. He, of course, had the advantage of working with a story that was very well known (so he could take some liberties knowing the audience already probably had a sense of the “grand and dramatic” emotion in the tale), but I still think he created his own version of grand and dramatic emotion by having the audience feel like the actors were right in our faces, and talking to us.

    I would also use a word like flow rather than intuitive in Tan’s definition and breakdown of that aspect of designing. To me, intuitive has more to do with a wholistic, right brained, active approach to an experience, that moves back and forth, up and around. Tan’s 3 elements could apply to a linear arrangement of text and visuals as well as a more wholistic, jumping around approach to designing, while still considering his 3 ladder aspects of legibility, metaphor, and skills (which I agree are very important considerations). Since one of his bones to pick seems to be with definitions, I just thought I’d enter the fray 🙂

    Lastly, I love the scrolling technique of the visuals in the Girls Not Allowed piece. That may be a well known use of scrolling, but it was new to me and I found it very engaging.


    • Shirley
      January 19, 2014

      I love how you described longforms as “a stimulating conversation with a really engaging friend.” You can’t get a higher compliment than that!

      It’s interesting that you mention skimming the words – as I did more research on “Snowfall”, I found there was some backlash to the piece precisely for this reason. The enhancements caused many to skip reading it. Apparently a new interactive piece from NPR about t-shirts found a better balance between text and visuals.

      I agree with you on immersive – if Tan is not satisfied with it, then I would rather he find a different word rather than change the meaning.

      I haven’t seen Les Miz yet, but I will definitely keep in mind both of your arguments!

      I liked your picking at the bones! I would agree that the distinction between flow and intuitive would be appropriate here… I can see both of your arguments. I feel like his use of intuitive comes from the focus on it in his work as opposed to our traditional use of it in everyday life. Nothing good or bad about it, just that it is what it is.

      The scrolling technique in Girls Not Allowed was new to me too, and I’m happy to hear the opinion from you as a first-time experience as well.

      Thanks for the supremely engaging comments!!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Stuff I said before

%d bloggers like this: