We love digital

Call 0845 485 1219

We love digital - Call and say hello - Mon - Fri, 9am - 5pm

Content Marketing: Now Powered By Technology

Mike Essex

by Mike Essex on 26th July 2013

Yay lovely codeIt’s been a long time since Content Marketing was just about the words. Images, audio and video have been transforming static content into beautiful works for years, but over the last 12 months that has been taken to another level with interactive content pieces that could change how we use the web forever. But, just how are these works made?

Content pieces like Snowfall beautifully combine video, imagery and a strong narrative to bring together the best web technologies and deliver a strong story. It also took months to create with a team of people, which presents a problem.

Snowfall

If Snowfall is the new defacto standard for content marketing that we are all striving towards, how on earth can the same results be achieved without a massive budget?

Well thankfully the technology behind Snowfall isn’t some big secret, you can view all of the source code by going to the page and clicking around (In Chrome, right clicking and choosing inspect element on the bit you want to check, is your friend for this). Through a combination of text, images, MP4 videos, CSS styling and some clever code they achieved amazing results.

It’s no magic trick how it was made. Usvsth3m were able to quickly create a great parody and ScrollKit created a complete replica in an hour. The fantastic thing is that the technology to do this exists now and is readily available.

Whilst I’m no expert coder, I think it’s important that anyone working in Content Marketing at the very least understand the technology behind these projects so they can manage the creation of similar things for their own clients. So let’s take a look at some recent clever examples of Content Marketing and the technology behind them, in a way that anyone can understand.

Scrolling Images

Let’s look at a simple example. Concert Hotels created a piece to visualise the iPod capacity in vinyl. You click a downward arrow and it loads a stack of records that imitates the capacity. It’s pretty cool and gets the point across well, plus with over 26,000 social shares it hasn’t done too badly.

Concert Hotels

From a tech point of view it actually couldn’t be simpler. Hannah Smith, one of the creators has even noted that she agonised over whether it was too simple. Essentially the stack of records is comprised of a single image that repeats itself over and over until the capacity is reached.

In essence, the value is set for the number of images that should be shown (the number of vinyl records an iPod classic could store) and then a loop is triggered that keeps repeating the image until that value is reached.

The script can be found in the source code and it’s simple enough that it makes a great lesson if you want to dissect the code and see how it works.

Want to Build Your Own? You’ll need to learn JavaScript and jQuery specifically.

Calculations

A recent trend in Content Marketing is to make a piece that is unique to every visitor. This can be done with mathematical calculations happening behind the scenes, and with a bit of coding wizardry you can do the same.

Let’s take a look at See Your Folks.

See your folks

The creators made it in 24 hours and it’s a really effective reminder of the importance of family. It’s also a fairly clever use of maths to create content. You enter where you live, how old your parents are and how many times you see them in a year. The site then figures out how many more times you’ll see them.

It does this by:

  • When you enter your country they have allocated a value to each one that is based on the average life expectancy
  • Taking the age of your Mum and Dad and dividing it by 2 to find an average
  • Taking that average away from the average life expectancy
  • Multiplying that number by the number of times you see them a year
  • Rounding up the number

There’s also some other code to run if you only enter one parent’s age, as well as a trigger that fires if their age is above the national expected age. You can view the entire code here and it’s really nicely marked up so you can learn what it all means.

Want to Build Your Own? Read up on how to do calculations with JavaScript.

Interactive Infographics

If ‘Infographics are dead’ then no one told some of the great interactive infographics that are now being produced. This site rounds up some of the best and for this example we will look at this one. What’s different about this, compared to our earlier examples, is that the JavaScript queries the page on the website itself to generate the results and then dynamically changes the page content.

Car parks

So depending on the options you select, the content of the page changes reflecting your choice. Give it a go, change the drink type and then watch the results change. Then check out the source code and you’ll see that has changed as well. The important lesson here is that your content doesn’t have to be static and can vary to reflect the choices your audience make. Why write a 2,000 page article covering all the different outcomes, when you could make something like this which only displays the bit that is relevant to the reader?

Want to Build Your Own? Look at using JavaScript to query the page (or DOM as it’s commonly referred to in this context).

Scrolling Pages

Now we’re starting to get into Snowfall territory, where events on the page are triggered by the position you have reached. The best way to explore how this works is by breaking apart the elements used in The Future of Car Sharing.

Although there is JavaScript on play here, a lot of the clever elements of design are actually just CSS. For example, look at this image below:

Loads of hills

Would you believe that all of those hills are just CSS elements positioned on top of each other? Yep, you can see them all in the main CSS file. It’s also worth reading the file to appreciate how everything on the page is actually fixed in place. Whilst it may seem like everything is moving. In actual fact most of the background is fixed in place and it is only the car and a few interactive bits that move.

So how do they move the plane at the start? Open the infographic in Chrome and right click on the plane, choosing inspect element, and you’ll see that the position on the plane changes like crazy. That’s JavaScript again, check out the code and search for the word ‘plane’. You’ll see that code exists that changes the bottom location of the plane which creates the illusion it is moving.

To see an even more impressive example check this out. Thanks to Kieran Flanagan for the tip.

So whilst there’s no denying these are complex content pieces they are not beyond the realms of being something that you could draw inspiration from by using a coder.

Want to Build Your Own? Learn CSS and JavaScript animation. Also check out HTML 5 to ensure your code is nicely formatted.

Snowfall Content

The industry has yet to come up with a term to describe pieces like Snowfall, although there are no shortage of examples starting to appear, so I’ll just call it ‘Snowfall content’ for now until we get a nice buzzword. When I first saw Snowfall I looked at it gobsmacked, knowing that I wanted us to create something of the same quality but not knowing how. Thankfully the more time I spent with the code the happier I felt that is was something that could be replicated without breaking the budget. At its heart Snowfall is just:

  • Well written content (hey you have that already)
  • MP4 videos – all of the moving images? They’re just videos really.
  • Great imagery
  • A great layout

So here’s the thing, Snowfall was a breath of fresh air because it combined those elements together in a way that really resonated with people but from a technical point of view it’s easy to break up the elements and see how they work. The imagery for example is triggered when you get to a certain point on the page which in this case was done using inview.

Another way of doing this is to use JavaScript to trigger images when you reach a certain point. For example in this article the images change as you scroll down.

Glitter in the dark

A look in the code reveals this is done by having a collection of images named (XXXX-1.jpg) and a script which tells the page to display XXXX-1( + 1).jpg every time you scroll down until they run out. So the script shows images XXXX-1.jpg then XXXX-2.jpg and so on until it runs out. Simple.

Going back to Snowfall the last piece of the puzzle is the layout, which is a another clever use of CSS to position the elements in a visual way. What’s nice is that they haven’t overdone it, you can still easily read the article and the extra bits add to the story. Although if you do want to see a more visual example check out Jess and Russ.

Want to Build Your Own? The New York Times even break down how it was made here.

Summary

The future of Content Marketing is going to be driven by technology, both old and new, being used in clever ways that complement the core story. Until a week ago I didn’t even know what jQuery was and had never written JavaScript but the more I read and the more I see the easier it is for me to grasp the tech behind these content pieces. Most important of all, it lets me understand how we can use the technology in what we do.

So whilst you don’t have to be a coder to understand what is happening, the important thing is that everyone in Content Marketing appreciates that this tech isn’t scary. It requires great developers and designers, that is certainly true, but anyone in a CM role should be able to grasp why these pages work the way they do, so it can inspire them in the future.  If I can do it, you can too.

So I hope the above has helped introduce you to some of these technologies, and if you can shed more light on how these projects work, or have other cool ones you have seen please leave them below.

Mike Essex

Mike Essex

Mike Essex specialises in digital marketing and everything search. A recent project of Mike’s was featured on BBC News, Radio 5Live and the Times here in the UK, whilst also featuring on USA Today and ABC News in the US. He will be writing throughout the month about digital marketing and much more...

down arrow

Your Free Whitepaper

The Complete Guide to Content Marketing

The Complete Guide to Content Marketing

Download this whitepaper now and get a new one every month!

12 Comments

  • Gael 26th July 2013

    Good one, I for one made the decision of becoming a technical marketer because things like this are the ones that are really getting attention (although great blog posts like this one do good too ;)).

    If you want to pick up the skills of the trade I suggest Codecademy for the scripting and markup languages and a great slide deck made by Jamie Steven on being a technical marketer: http://www.slideshare.net/sirris101/technical-marketing

    hope that helps!

    Gael

    Reply to this comment

  • Paul Gailey 26th July 2013

    great examples Mike – it reiterates that contemporary “design” is as much how it works than how it looks. So often during the approval process of flat emailed mocks the attention strays to pixel pushing aesthetics. Agile prototyping from designers with vision and awareness of the techniques you outline is far preferable.

    One of my faves is bloomberg.com/about

    Reply to this comment

  • James Perrin

    James Perrin 26th July 2013

    Spot on Mike. In terms of coining a phrase, there are a few that I’ve heard of, data visualizations, digital journalism etc, but in any case, this is certainly the standard for future content marketing projects. I think the introduction of HTML 5 has massively changed the landscape – there’s a great Infographic detailing why it’s so important, and it’s already a year old! http://www.uberflip.com/blog/infographic-making-a-case-for-html5

    Reply to this comment

  • Jim Seward 26th July 2013

    Although these things are really cool and very good examples, and HTML5 has given us as marketers a whole new toolset, we need to remember that the idea is probably more important than then implementation.

    You could have something that’s beautifully executed, but poorly thought out.

    My worry is that as these types of post become more prevalent, it will become all about the technology rather than the content itself

    polishing a turd
    putting lipstick on a pig etc

    Reply to this comment

  • Lyndon Antcliff 26th July 2013

    I agree with this

    “I think it’s important that anyone working in Content Marketing at the very least understand the technology behind these projects so they can manage the creation of similar things for their own clients”

    Which I think is the main thrust of the article. And whilst we sometimes don’t actually have to do the coding, it is very useful to know what HTML 5 can and can’t do.

    Most of us are attracted to the technology and get a buzz from it, but some make the mistake of thinking the tech is the message or the story. The first time you saw for example a HTML 5 thingy, that was probably true, but it quickly develops a “megh” factor.

    Content creators must never forget the primacy of telling a story and that this is more important than any tech.

    Communication from one person to many is the point here and I constantly see people confuse that simple basic fact. Not here though.

    I like this article, although I would have taken it a tad more historical and include technology like the pen and paper, etc. But that’s just my style.

    Good stuff

    Reply to this comment

  • Sii Cockerill 26th July 2013

    @Jim – “the idea is probably more important than the implementation.” <– couldn't agree more.

    Web technology has always been accessible to everyone who was curious enough to go and look 'under the hood' and it's great to see folk taking a greater interest in 'how things work'.

    But having the knowledge or skills to able to replicate a great piece of technologically-interesting content is not a good enough reason to do it – afterall, no one wants to see version after version of the same snowfall 'effect'.

    The best and most exciting content will come from marketers who take note of great content – like the examples Mike has given us – but use the technology as a foundation on which to create their own ideas :-)

    Reply to this comment

  • Tidy Design 28th July 2013

    Nice post, was recently sent a link to this by a friend. Great content is a great ROI when it comes to search / business. We found giving away free stuff on our Tidy Blog increased unique visits by 100% for us in 2012! Result! :P

    Reply to this comment

  • Spook SEO 29th July 2013

    There’s no doubt that the idea is infact more important than the implementation itself. This is especially true when talking about contents.

    That said, I hope the readers of this article won’t take things the wrong way by focusing more on the implementation rather than what the actual content is. They don’t say content is king for nothing.

    Reply to this comment

  • reenu kamal 1st August 2013

    Ya i agree the content is most important for any website but i m still confused about link building and directory submission. Means how important are links and directories

    Reply to this comment

  • Robin Yearsley 2nd August 2013

    Great article Mike – you’ve covered a topic that hardly anyone else is covering… Technology AND content marketing.

    I believe for great designers NSD coders there’s a great future ahead in providing apps and tools to help ‘regular guys’ and typical digital marketers achieve awesome effects, without the hassle of having to go through a laborious project life cycle and hire specialists directly.

    Once such tools are available at the right price – the challenge really shifts to the creativity and ideation of HOW to leverage the output the tech produces – after all a “fool with a tool – is still a fool”!

    Kudos to you – for finding all the case studies too – nice one!!

    Reply to this comment

  • Web Find 4th November 2013

    Brilliant article Mike, great read on content marketing and technology and it’ll be interesting to see what happens in this digital age over the next 5 years! exciting times or maybe daunting for some.

    Reply to this comment

  • Andre Van Kets 15th October 2014

    Hey Mike, you mentioned that there isn’t really a name for these types of content projects/campaigns/assets yet.

    However we’ve been using @dr_pete’s moniker of “big content” for these types of assets. I’m sure you and your audience has read his article, but here it is anyway:

    http://moz.com/blog/why-big-content-is-worth-the-risk

    We used this concept and approach to develop our own “big content” piece called HerdTracker. It’s a tracking map that shows the location of the great wildebeest migration in (near) real time on a Google map embedded on our website. The map can be seen here http://www.discoverafrica.com/herdtracker and has a feed which includes stories, photos and videos from rangers, pilots and tourists in the Serengeti and Masai Mara.

    The biggest take-away I can share based on our experience building and publishing this “big content” piece, has been the value of including ACTUAL imagery and video. If this piece was purely map + text it wouldn’t have received of the attention it has.

    Thanks for various “big content” examples cited in this article. Some I’d seen. Many I hadn’t. Great work.

    Andre
    (Marketing geek aka technical marketer)

    Reply to this comment

Subscribe To The Koozai Blog