Know how it’s built: "cool" isn’t good enough

“This is cool” is not good enough

As part of our content research and development program, we now regularly reverse engineer content we think is technically impressive. That’s right, we assign developers to re-building web content we think is outstanding. It’s how we learn – take Polygon’s exceptional Xbox one review. We rebuilt that page, SVG and all, using our preferred framework MooTools.

That’s not how we started, though. We’ve had to learn that sharing content on the internal email list with “this is cool” was obviously not enough for us to learn as a group. Now, if you share content internally at SEOgadget, you’re likely able to provide a dissection of how it was built (or you know who to ask!). This works really, really well – it’s advanced the forensic examination of work we find to a new level.

The Internet is amazing

Well, OK the internet has always been amazing – but there are some seriously talented people out there, inventing new concepts with the latest in web development. These are just some of the things I’ve fetched from our [content] share list emails:

Created by by Chris Milk and Google,“3 Dreams of Black” is an interactive film that uses WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. It’s insane.

A tie-in with the August 2013 print magazine, this massive feature from The National Geographic re-purposes visual and audio assets already acquired by National Geographic’s filming team on location into a huge interactive journalism piece. The simple interaction and design allows the massive images and video to shine, whilst adding subtly to it with the audio tracks.

The New York Time’s outstanding “Snow Fall” – garnering 3.5 million views shortly after launch,  built with tools/libraries that include jQuery, underscore, jPlayer, HTML5 video, jQuery Reel, and jQuery address. Development and filming took a year, which is a point that, aside from the remarkable achievement that the content itself represents, really stands out to me.

Could you imagine convincing a client to allow you to embark on a 1 year project like this?

Greenland melting is a large feature piece from Rolling Stone, combining some beautiful imagery and video, with design that in turns contrasts and blends seamlessly with the other elements. Small features like drop caps, the large feature images and bold typography reflect a print aesthetic, whilst the inclusion of video and animations/transitions keeps the piece feeling modern and digital. Technologies include: BrightcoveVideo.js, HTML5 Video, CSS Fonts, Jquery and extensions such as Foundation.js, Reveal.js, picturefill.js, Matchmedia.js and WayPoint.js.

Just every now and again, you come across something that you think can’t be all that complex. I shared the above story internally, dismissing it as merely beautiful storytelling through excellent photography and typography. I was quite wrong; Pete intervened with:

Storehouse have basically written their own, very small JS library to do all this.

The advantages to them would be that they've traded off older browser support to get something that's beautifully built, and only includes the bare essentials they need to make the site work.

The downside is it's 2.4k lines of JS code. I suspect for production purposes, they're building each module separately and compiling them together.

The way it works is it's an iOS app on the user-side. So you write the content, upload media, drag and drop to play with layout etc on your iPad/iPhone, then publish and it goes to a repository on the web. It's a really interesting model of publishing. As far as I can tell, they don't have a web-based admin atm.

The JS front end is all pretty simple, when you get right down to what it's doing. There's nothing overly advanced in there, which is why I guess they were happy to go the self-build route.

The hardcore shit all happens on the iOS side. The video on their homepage gives an idea as to how the thing works from a UI perspective. Really neat stuff.

My bad.

Learn how or else

“But I don’t need to understand how something is made to get my content built?”, I hear you say.

A blind pig can sometimes find truffles, but it helps to know they grow in oak forests.

David Ogilvy

If you actually want to create (or pitch, scope, project manage) something as good as these examples, you’ve got to learn how it was done. Now, you don’t have to be able to build these things yourself, but having an understanding of the vocabulary you need to describe them, and therefore, describe your own projects, is damn near critical.

A gifted story teller understands the medium via which they tell their story.

That’s the bare minimum of what you need to know. You see, to structure and execute a genuinely innovative, successful content marketing campaign, you need to understand what’s possible, especially within the context your budget, available time and scope.

The best way to understand is dissect, reverse engineer, be very interested, learn how and when to ask, listen carefully and practice.

As Pete put it in his recent Mozinar:

If you can't speak my language, you can't get something built that will work (on every device).

If I can't speak your language, I'm going to build something incredible and you're not going to get any search benefit from it.