A Quick Guide to Long-Form Content Online: Designing Longer Posts

One of the things I find incredible about long-form is how the story emerges as you scroll down the page. Whether it’s a photo gallery, or a long essay, you’re showing new information as you move down the page, and as the story progresses. 

I came up with a few basic guidelines for designers of long-form content:

  • Focus on the story – not navigation. This means there should be a distraction-free reading experience. Things like links and ads at the margins take away from the content experience.
  • Focus on readability. So, we do things like make fonts bigger, and add space between lines of text.
  • Flow of information. For instance, you’re shown a chart or graphic when it makes most sense in an article. This is often linear, meaning that one text or visual element should follow one another in a way that seems logical to the reader.

Just as I recommended ensuring each narrative element is carefully chosen, designers need to make sure that elements such as pull-quotes, parallax sections, interactive maps, and videos. In order to ensure that certain elements don’t distract from the flow of the main narrative, the designer can even place elements in the margins.

For instance, to make sure the flow of a story isn’t broken up with extraneous explanations or definitions, explanatory text can be put in a sidebar. This helps provide some background to readers who are new to a subject without slowing things down for your more adept readers who might not need these explanations.

a-quick-guide-to-longform-content-wordcamp-toronto-2014-10-638

So, it’s very hard to illustrate the design of long-form sites on still slides without actually visiting the websites.

That’s because long-form is all about scrolling.

We used to design websites around the idea that people can’t be bothered to scroll – so we prioritize the first 600 pixels going down the page, because otherwise the content won’t be seen. We call this “Above the Fold.”

But long-form actually expects the user to scroll down the page – and to keep scrolling. I like to think this has to do with higher engagement – the user is physically engaged and mentally engaged, and there’s something satisfying about progressing down the page.

For designers, this might be really counter-intuitive, and it takes restraint, but you have to have faith that people will scroll.

Take a look at long-form pieces from the New York Times, Pitchfork and VICE.

Notice that the fonts are larger. The lines are spaced further apart. The pictures fill an entire screen.

You need to scroll in order to get anywhere.

In keeping with the idea that scrolling is extremely important, I should point out that one of the common characteristics of long-form is a title screen showing an image and the title – nothing more. This forces you to go down the page.

Even the story navigation on many of these websites requires scrolling.

Long-form Navigation


In the above examples, it’s clear that the news site, Techmeme, is really busy. It’s suitable for short-form but not long-form.

The navigation for the long-form site Medium only shows a two or three article links at a time, forcing the user to scroll down in order to find links they might want to click. This encourages the reader not just to read the headline or look at the image.

By forcing the reader to go more slowly, they’re more likely to read the article description and put more thought into actually attempting a topic that might be new to them.

Overall, great long-form design draws attention to the actual content. The designer doesn’t try to overwhelm them with links and information, but rather carefully direct them to the elements that tell a story effectively. Articles and navigation design is built around providing an ideal experience for deeply engaging with content.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>