The New York Times’ ‘Snowfall’

The chap who put this together won a Pulitzer for feature writing, and Snowfall has inspired a New York Times redesign (here’s a preview). 

ESPN’s Grantland

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. 

Conclusion

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
  • Scrolling
  • 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.