A journey into digital longform
Digital longform is where design, technology and journalism come together to create rich stories. Paul Woods introduces the tools you need to get started
Digital longform. It’s a format that has exploded in popularity ever since The New York Times launched its now-famous ‘Snow Fall’ piece in 2012. Shortly afterwards came the Guardian’s equally renowned longform story ‘Firestorm’, and soon the format was being embraced by publishing houses, brands, ad agencies and designers alike.
But how does one go about creating a longform piece? What makes a good reading experience online? And crucially, how do you capture an audience in a world where people barely have an attention span of 140 characters, let alone 1400 words?
When I was at Edenspiekermann, we were lucky enough to work on quite a number of these types of projects in the past few years, for both publishing houses such as Zeit Magazin and brands such as Red Bull. So, without further ado, let’s take a step into the world of digital longform.
An integrated workflow
It goes without saying that whatever workflow you employ, an integrated approach to design, development and content creation from the start is crucial to the success of any digital project — not just digital longform. The problems with the traditional waterfall approach (designers handing PSD files to developers, and developers passing to content editors, with little or no interaction between the respective parties) are numerous and well documented.
Static mockups and pixel-perfect implementations are dead, and a close collaboration between design and development is key. At Edenspiekermann, we approached our digital editorial using a Scrum workflow, in which design and development take place simultaneously. With digital longform in particular, not only do design and development teams need to work together, but the writer or journalist also needs to be closely integrated right from the very start.
In 2014 we developed a series of longform pieces for the World of Red Bull campaign. For this project, we set out to create rich visual ‘worlds’ for each of the seven athlete’s stories that would feature on the campaign website. To write the stories, we worked with journalists from across the globe; a different one for each athlete. We went back and forth between content, design and development in a truly integrated workflow.
The writers were encouraged to think beyond the written word and include suggestions for infographics, video and other interactive elements. Likewise, design and development decisions — which happened in parallel to writing–fed back into the writing process.
A balancing act
Digital longform is a field of digital design that really benefits from pushing the envelope in terms of visual creativity. We found that the key to a successful piece is the right mix of readability, interactivity and creativity. It is a delicate balance.
On one hand you want to push the interactive possibilities of digital and the art-directed nature of longform. On the other, people need to feel focused on the words if they’re going to read anything of significant length. As we all know well, in our digital world attentions spans are short and distractions are many.
On the World of Red Bull campaign, we started out really trying to establish an individual look and feel for each athlete’s story. We developed the stories completely one at at time. By the time we got to the third story, we felt we’d got the balance between readability, interactivity and creativity just right.
We then worked the things we’d learnt back into the other stories. When people need to read, all other distractions need to instantly disappear. Lose the interactive maps, CSS animations and above all, parallax scrolling. White background, black text. Think of it as entering ‘focus mode’.
One of the way we achieved this was by using a modular, panelled approach, so that interactive elements were heavily separated from the reading sections. These ‘focused’ panels featured little other than a single block of text. Navigation can afford to disappear, only reappearing when absolutely necessary. It’s what books (you know, the things made with paper and ink) have been doing for a very long time. The message is simple: make it easy for your readers to read.
When people need to read, all distractions need to disappear. White background, black text
Think type
Arguably the most important decision you will make when it comes to digital editorial is type. From choosing the right font to testing it across multiple devices, the handling of typography makes or breaks an editorial design — after all, it is the base unit of this format.
It goes without saying that all typographic decisions should be made directly in the browser. Type rendering in Photoshop, Sketch, and so on differs drastically from how it appears in the browser on your shiny 27" iMac, let alone Windows machines, older Android devices and feature phones.
These days, designers barely even need to get their hands into code (although they probably should) to test out fonts in the browser. Tools such as Typecast and Fontshop’s Tryout make it easy to test how fonts actually render. Investing some time optimising text across multiple devices, browsers and platforms really pays off. Often a small change such as setting …
“-webkit-font-smoothing: antialiased” … makes a massive difference over long passages of text.
When setting type for digital editorial — or indeed any digital project — never underestimate the importance of selecting a digitally native font (one designed specifically for screen). These usually have less contrast in the strokes, meaning higher legibility, especially at smaller sizes. Choosing a contemporary digital font such as Klim Type Foundries’ Tiempos Text — used on What Screens Want amongst many others — instead of an older font like Garamond, which was never designed for screen, can make a huge difference.
It’s also important to choose a font that is hinted by hand (tweaking the rasterisation of a font so that the optimal outlines are mapped onto a screen’s pixels), so it displays far better across older browsers and devices.
All about performance
Given that digital longform content is often consumed on the go, in situations where internet coverage is poor (such as on the Tube), performance and page speed are a key considerations.
No discussion on the importance of performance in digital editorial would be complete without a mention of the Guardian’s approach to progressive enhancement based on the BBC’s ‘Cut The Mustard’ technique.
Like any progressive enhancement technique, the organisation’s website is designed mobile-first, with features loaded in progressively, based on browser capabilities. The Guardian’s site is a real benchmark for performance and is blisteringly fast, even on the worst of connections.
Web fonts can really rack up the kilobytes, so it is worthwhile paying close attention to subsetting possibilities. Ask yourself, “Do I need the full set glyphs for a font that I just use for infographic numbers?” Probably not. Optimise the hell out of your font by kicking the unnecessary glyphs. Tools like FF Subsetter are perfect for this.
One big mistake that a lot of big digital publications (and I mean a lot) are making is trying to avoid any flickers of un-styled system font. The problem? On slow connections, the web font loads after the images have loaded. We’ve all been there — on the train, staring at a blank screen waiting to read the latest tech article and frustrated that the images and CSS load before the web font.
Reality check: a flicker of un-styled system font on page load is harmless. No one cares if the text is in Times New Roman and not your awesome custom web font — they just want to get on and read the article. Use an asynchronous approach to loading your web fonts for reading on poor connections.
Manage that content
Although the idea of a completely customised and art directed story may seem fantastic to a designer, in reality this is may not feasible. Not only that, it’s often not even the best choice. Journalists and editors will probably need to be able to go in and edit the content, change images and perhaps even reuse the template for a new story (albeit with a different art direction).
Perhaps you need to translate the content into different languages? Or non-Latin charters? Maybe even right to left? On the World of Red Bull project we needed to adapt (and localise) the custom art directed to over 30 languages in more than 60 countries.
A best practice approach to content management and adaptation is to design and build longform stories in modules rather than pages. Modules are reusable, easily dragged-and-dropped around the page, can be added or removed as needed and are easily integrated with a CMS.
A best practice approach is to design and build longform stories in modules rather than pages
Recently we created our own custom Storybuilder tool for a project called Red Bull Amaphiko, a project working with social entrepreneurs in South Africa . Using the Storybuilder, the social entrepreneurs created their stories using pre-defined ‘building blocks’ (modules).
We created a set of basic module types, including ‘image’ , ‘text block’ , ‘video’ and so on that could be combined and reordered to create an elegant longform story. Think of it like a recipe — the building blocks are the ingredients that can be combined to create a story. As the stories grew, the users could also add additional chapters. The visual style of each story was chosen from a set of themes in the global setting.
Before diving into creating a custom CMS, bear in mind that there are also some great existing tools for managing editorial content — and these tools can often be combined. For example, in the past we have combined the highly customisable Rails-based Active Admin with the JavaScript drag-and-drop interface Sir Trevor.
We’ve also looked into API-based solutions, such as Contentful, for more complex editorial projects. Of course, sometimes a far simpler solution is all you need, and a file-based CMS like Get Kirby will do the job just perfectly.
Storytelling
Above all, be flexible and open minded, and chose the tools and processes that best meet the project’s needs. Inspect and adapt your approach and be honest about what works and what doesn’t.
Lastly, and probably most importantly, remember that the real ‘make or break’ of your digital longform will not be not be the technology, typeface or custom art direction — it will be the story.
A brief history of digital longform
Defined as “a branch of journalism dedicated to longer articles … often taking the form of creative nonfiction or narrative journalism”, longform journalism is certainly nothing new. However, it is only in recent years that the format has reached maturity in a digital context and been widely adapted by media outlets. Now, traditional print-based publications such as the Guardian and The New York Times have embraced the long-read format, and creating hugely popular feature articles that are brimming with interactivity.
The format draws its roots from early experiments in parallax-style HTML5 storytelling around 2011 (such as Nike Better World from Ian Coyle). Combining digital know-how with its rich heritage in printed longform journalism, The New York Times launched ‘Snow Fall’ in December 2012.
Arguably the piece that kicked off digital longform as we know it today, the piece centred around the story of a group of skiers buried in an avalanche and was told through the layering of words, video and graphics. The story brought in countless readers and a Pulitzer Prize, and, according to the Times, generated 3.5 million page views in one week.
About a year after ‘Snow Fall’, the Guardian released the almost-as-famous ‘Firestorm’. This took quite a different approach and was far richer in media and video, feeling much more like an app. Since these two pioneering benchmarks, the format has been widely adopted by media outlets and brands the world over.
Paul Woods is a creative director at Huge, where he works between digital and brand design. His work has won several awards and is regularly featured in international publications
This article originally appeared in issue 260 of net magazine.
