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.