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.
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.
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.
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:
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.
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?
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.
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 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.
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:
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.
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.
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.