Stop Writing Blog Posts: Ideas for Interactive Content

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:

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:

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.