Lesson 3.1: Bend The Rules
“I don’t want to sound like a hater, but here’s a hard truth I’ve discovered working with both editorial and marketing content creators: Hacking longform content into interactive experiences doesn’t end well.
The problem is that when you start with an existing longform piece, it’s hard to let go of all those words. They cling to you, begging to be spared the heavy wrath of the delete key. These projects tend to be too text-heavy, which makes for a much weaker user experience. You layer on some bells and whistles on top of a traditional narrative. It’s long and clunky and awkward. It just doesn’t work.
Try starting from scratch with a story you want to tell before determining the best way to tell it, then think about all of the tools at your disposal — text, yes, but also images, videos, audio, animations, and pop-ups.”
Let’s challenge this theory. Here’s the asterisk I’m adding. Longform articles don’t work as interactive content *unless you choose the right platform.
First, lets define what I’m interpreting “traditional long-form content” to be. In the B2B world, we publish a lot of white papers, survey reports, eBooks, etc. These are all pretty wordy, have multiple pages, high word counts and some design elements throughout. Despite their traditional print platform, these long-form pieces do have a place in the digital world, they have to.
Lesson 3.1 Choose The Right Platform
The original lesson 3 mentions that long-form articles are “too text heavy”, making them a weaker experience for the user. Yet people read long-form content digitally all the time. When was the last time you read a book on your tablet? Read a news article off a website? Caught up on your favorite blog? Ok, maybe the blog isn’t technically “traditional” but books and news articles are. They’ve adapted and so can your content.
Choosing the right platform is the key here. We need to be careful not to try and squeeze a true long form piece into a place it doesn’t fit. For example, if it’s a white paper originally, it’s not going to work as an interactive infographic. In my experience, white papers can’t even be translated into more visual e-Books. The copy and content is important, so lets keep it all.
What I’ve found work best are custom HTML5 articles. They’re actually quite popular if you know what you’re looking for. These pieces are built using a combination of HTML5, CSS3 and JS. Images, GIFs, videos, SVG paths and more are used to accent the content.
The Verge articles were a huge inspiration for me when I started looking into this a few years ago. In fact, they’ve got a whole section dedicated to long-form articles. These article are long and creative. Including some interactive touches, like imagery and videos, make the read that much more interesting. By the looks of it, The Verge isn’t cutting their word count, they’re just designing the content accordingly.
Check out this Polygon example. To enhance the content, Polygon includes imagery, videos and SVG paths. Polygon has given users a nav bar (or a table of contents, if you will) too. I can skip around to different places in the article if I so choose. It’s a great example of what can be done with long form content on the web.
So, what are some important thing to think about when creating traditional long form B2B content on the web? Lesson 3.2 everyone.
Lesson 3.2 Content Comes First, Design Accordingly
Content comes first. In the B2B world that’s something designers have to live by (hard as it may be!). Is it a huge plus if the design fits seamlessly with the content? Of course, but what I’ve learned is that the content is the main objective here. We need our audience to actually read whatever content our team is producing and that means we’ve got to designing accordingly.
Here are some tips:
When working on these projects there are designers, developers, marketers and editors all touching the same piece. I’ve found it extremely helpful to kick off the project with a 30-minute brainstorming meeting. I ask the editors to provide a short outline prior to the meeting and I come with a project timeline. From there we discuss the topic and dream up creative/interactive things to include based on the content. In the end, the whole team is moving forward with 1 design concept.
Take the table of contents into the 21st century with you. We know that, by nature, these articles are long. Give the user a way to skip around as they would in a printed piece. In the web world, this is usually referred to as a navigation bar. Only here, it’s purpose is a bit different. The links pull the user to the correct place on the page. It’s all easily accomplished using anchor links.
When dealing with long-form content, your content needs to be readable and breathable. Design your paragraph tags to be at least 1em (16px). Another thing that helps out, don’t use true black on white. Try a dark gray instead for less contrast. (Something like #474747)
Tip: Don’t be afraid to use letter-spacing. You’d be surprised what .5px can do for the eyes!
Background images are great but we have to remember what they are.. Background images. The images should be relevant to the content but they also need to blend into background. When you’re overlaying chunks of copy you want these to be more like an accent than a focal point.
Animation is a great thing to use on the web (and in emails!). The problem is sometimes we overuse this technique and things get messy and your page article overwhelming. Keep your animations subtle in long-form content. Use them when you want to call attention to a specific call out or a stat. In this case, less is more.
Check out this example from Retail TouchPoints, Innovation Labs Help Retailers Keep Pace With Industry Shifts. They’re using subtle animations within the white board elements. (And it includes a TOC!)
Something as simple as changing a bulleted list into a series of images/copy can really liven up and break apart your copy. Doing this will also call attention to these snippets when users are scanning the content.
There are other ways to lay out content than just flowing copy straight down. Demand Gen Report published a State Of Marketing Automation Outlook Guide every year, traditionally as a PDF. This year, they did an HTML5 article instead. Take a look at the layout. Instead of having a super long page, there’s a expand/collapse element to each person. This makes the content much easier for users to get through.