Content Marketing: Now Powered By Technology

It’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.

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.

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.

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.

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.

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.

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?

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:

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.

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.

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.

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.

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.

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.

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”!

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!

@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

“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.

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

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

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.

What do you think?

BrightonSEO Roundup: Take your Site Speed Optimisation to the Next Level

Michael Lam @Mikelam129

4th Oct 2018 News

Digital Ideas Monthly

Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?

Name*

FirstLast

Email*

Website

Event

Phone

Comments

Marketing Preferences

We’ve got some really cool stuff we want to share with you. So you don’t miss out, let us know which of the following you want us to email you about going forward:

Unlike 08 numbers, 03 numbers cost the same to call as geographic landline numbers (starting 01 and 02), even from a mobile phone. They are also normally included in your inclusive call minutes. Please note we may record some calls.