Stop Writing Blog Posts: Ideas for Interactive Content

iStock_000016093336Small Design & Development

Nick Bernard Aug 6 2013

iStock_000016093336Small

If you’re like me in the kitchen, sometimes you want to add a little North African flavor to dinner. After some light Googling the other night, I found plenty of couscous recipes, but I also found this culinary gem: “5 Couscous Cooking Mistakes to Avoid.”

Wait, what? “Cooking” couscous amounts to no more than adding semolina to boiling water. Do we really need a blog post to warn us of the dangers of forgetting to fluff our couscous with a fork before serving? A more interesting piece would have been, “5 Mistakes to Avoid When Opening a Car Door.”

Who is polluting our World Wide Web with this drivel? Well, it’s us, actually. SEOs. Content Marketers. “Inbound Strategists.” The above blog post is why, as Wil Reynolds described it at MozCon, the Internet hates us. We need to get better at creating and pitching our clients great content—not only because it’s our duty, but because our jobs and livelihoods depend on it.

If you’re writing a blog post, stop. Stay your hand. Abandon that list of infographic ideas. Relinquish your license for that stock photograph of a group of attractive people in business attire smiling and pointing at a monitor. I have alternatives.

Here are three simple ways to leverage JavaScript libraries to create meaningful, interactive content.

Make a Map

Embedding Google Maps into webpages is great and all, but the web offers a ton of other solutions for customizable, interactive maps. I’m neither a developer nor a designer, but even I can figure out Leaflet.js, Polymaps, and OpenLayers—all of which are free to use. Data-Driven Documents or D3.js can also be used to make some rad maps, like this example that shows how air traffic connects the country’s airports.

My personal favorite, though, and the best one for code-phobic folks, is MapBox. You can create and style your own maps with their design suite, TileMill, and the MapBox.js API makes adding maps to webpages blindingly simple.

Having just moved to the wilds of Helena, Montana, I’ve joined Portent’s elite group of remote employees. This map of our locations in relation to Portent’s Seattle office took about 15 minutes to create:

Truly great content, however, will leverage this technology to push beyond just creating maps. Young Hahn wrote a brilliant tutorial on how he used MapBox.js to visually illustrate a Sherlock Holmes mystery. This example also shows how we’re not limited to traditional maps. For an ecommerce client, I could show their suppliers around the globe, or I could use the floor plan of a house for my map tile images with markers highlighting how their products are used in different rooms. It’s easier than you think.

Make a Chart

One of the inspirations for this post was Justin Briggs’ SearchFest presentation and subsequent blog post on Technical Hacks for Content Marketing. He outlined the process for making interactive infographic with just a few lines of JavaScript for each chart.

He utilized NVD3 for making re-usable charts for D3.js. The relationship between the two seems like a business-in-the-front/party-in-the-back sort of situation, with NVD3 giving us nice, respectable stacked area charts while D3.js lets you get weird with things like magic waves.

Justin also highlights how OkCupid created graphs that change based on user interaction with a slider bar. These graphs use slider.js from Scriptaculous—a JavaScript library to help make anything from tabs to puzzles.

An even more creative use of the slider functionality I’ve found is from Bellroy, a leather wallet retailer—not exactly a sexy niche. They used an interactive graph to demonstrate how their wallets stay slimmer than the competitions with varying amounts of credit cards and cash:

bellroy

This is an excellent example of how content can be impactful and memorable without reinventing the wheel. The next time I need a wallet, you can bet I’ll remember them. I found this page, by the way, by clicking on a banner ad. A banner ad. Bellroy is killing it on the Internet.

There are many more libraries out there for data visualization, and Datavisualization.ch has curated a nice list. One of my favorites is arbor.js, which shows connections between data points. Here’s another way of visualizing Portent’s remote workforce:

arbor

Make a Timeline

Every company has a story, and many have pages dedicated to telling that story, but few present it in a compelling way. Libraries like Timeline and chronoline.js are good for showing data points at across a spectrum of time.

If you’re just looking to make something quick and dirty to show a client, I’d recommend TimelineJS. You can pull in all kinds of data from different sources like Twitter and Vine, and the tool spits out an iFrame embed code to display the timeline on webpages. Now, iFrame’s aren’t exactly ideal for SEO, but this is the easy solution, remember?

Here’s an example timeline on the history of user interfaces.

Beyond Blog Posts

This stuff isn’t new, and there are many more libraries, toolkits, and applications at our disposal. If you’re a designer or a developer, I’m sorry; you must be bored to tears by now. It’s marketers who need to stop writing top ten lists and start creating truly interesting, useful content.

What are your favorite examples of interactive content? How do you pitch content to clients that goes beyond a simple blog post? Share your examples in the comments.

tags : contentDevelopmentinteractive

10 Comments

  1. Nick

    Thanks for the post, most interesting and you’ve wrecked my morning (in the nicest possible way) with me off task checking out the map sites.

    Also a deserved thumbs up for linking over to Justin Brigg’s content (which a real help) and because of that I made an unexpected phone-call to a client.

    I mentioned the word “interactive map” and he jumped at the chance to show off all the postcodes his team had worked at in the city they operate.

    Taking that farther we’re going to then filter each project year by year and the type of product fitted to show potential customers where my client operates and the popular products being fitted.

    The client’s pumped and I’m stoked at what I might achieve from your post. Thanks!

    • Thanks, Darren! Justin definitely takes it a step further and shows exactly how to build a page from the ground up. All those things are already in every developer’s toolkit, but it seems like a new frontier for SEOs and marketers. I’m glad your client is on board. Let me know how the end result of your efforts turns out!

  2. Colin

    Great article. Have been thinking along the same lines, to take things to the next level somehow. The tough things as ever is coming up with an interesting angle…

    • Exactly. The temptation is to just make a graph for the sake of having a graph. There is so much data available for free out there, though, it seems much easier to think of a creative way to present it than thinking of “10 ways X is X.” Thanks, Colin.

  3. alex

    Great post. An interactive blog post is something everyone wants to achieve but the execution is challenging. Thanks for the ideas.

  4. Great article and great timing as I was just reviewing a new client’s website looking for ways to spruce it up and make it more interesting/interactive. Loved the interactive Bellroy slider and I’m anxious to check out some of the map tools. Thanks for sharing.

    • Thanks very much, Nina. Let me know what you end up creating for your client!

  5. Nick,

    I always perk up when someone writes an article about using diagrams as an option to jazz up content marketing. Lucidchart makes the diagram part pretty easy. You don’t have to know how to use a Javascript library and it exports in pretty much any format you want. We are always happy to take people’s money but there is a free option as well as long as there are less than 60 objects in the diagram.

    Thanks!

    • I’ll definitely check it out. Thanks!

  6. Anybody else think it’s funny that we’re reading about no more blog posts in a blog post? :)

    Kidding! It’s a great article, and I appreciate the tool suggestions.

Comments are closed.