In the late 1990s the Philadelphia Inquirer published a series on “the dramatic raid of Mogadishu”. It evolved into a book and a movie called, as you may have already guessed, ‘Black Hawk Down’.
The initial extended feature first made its debut in print, and was then pushed onto the website, where video, audio, maps, photos and related links helped bring the story to life. The site, which is still available online, looks like this:
This was one of the first mainstream media attempts to use the web to enhance long form content, and while the page might not look terribly pretty, all of the right kind of functionality is there.
Since then things have moved on considerably, and in an age of HTML5 I have seen some stunning examples of what can be achieved with online storytelling. Here are a few that are well worth checking out.
Let's start with the obvious...
The New York Times’ ‘Snowfall’
This one, which is all about an epic sled dog race, ticks lots of boxes. It makes use of image galleries, maps that auto-adjust as you progress through the article, full-width pictures, has excellent typography, and contains interesting background content in the sidebar. A truly fantastic effort.
Polygon’s PS4 overview
What a wonderful way to display a comprehensive analysis of the PS4. The page loads as you scroll down, rather than all at once, which avoids delays and makes for a pleasant experience.
Pitchfork's Bat For Lashes feature
This feels like a print magazine, rendered online, with big images, pull-out quotes, and so on. In truth it could have been executed a bit better (for example, narrow the page and watch the text shrink to microscopic proportions), but the idea is good.
Smithsonian’s ‘Oral History of The March On Washington’
Includes plenty of ‘talking head’ videos, prominent quotes and full-screen archive pictures.
The Verge’s NSA feature
I especially like its ‘wiggly margin’ approach (for I think that wiggly margins on long posts are a very good idea), with content extending left and right into sidebar / gutter space. It helps to keep the reader interested. This example also includes huge images / header imagery.
Chicago Tribune’s ‘His Saving Grace’
Kevin Pang’s feature received the right kind of treatment on this non-standard page layout. Very pleasing to the eye, with some lightweight animation.
The Guardian’s ‘Firestorm’
An image-focused scrolling site with permanent jump links in the sidebar, some lovely animation, and ambient background noise. Low on text, but an e-book download with more detail is available.
Tomato Can Blues
Here’s another, more recent example from the New York Times, which is part story, part web comic.
SB Nation’s Rashede Hageman profile
This isn’t interactive, and it’s very text-heavy, but the page layout works well for me.
Fliptop’s ‘Social Score’
Finally, here’s an example of how non-publishers can embrace long form content. I’ve never been a huge fan of microsites, and this approach might be a better way of telling stories, extending campaigns, and creating compelling landing pages.
The best long form experiences on the web blend quality content, eye-catching design and useful functionality.
Common elements found in the above examples include:
- Beautiful, non-standard page layouts
- Rich content
- Decluttering the page
- Use of sidebars for content
- Massive pictures
- Wiggly margins
- Removal of ads
- Non-standard typography
- Animation (or the feeling of movement)
If you’re in search of further inspiration then check out my article on scrolling websites that tell a story.
Otherwise, do let me know what you think, and by all means point to other quality examples of long form content on the web.