The Content Revolution

For what seems like years now, it has been reported that the once mighty printed word has been overthrown by online content.

Despite being heavily involved in online content I have had trouble in understanding this point of view. I read the majority of my news online but that is really only for convenience sake, if there was a newsagent next door I would probably get most of my news from the newspaper. To me there was very little difference between a news article on a website to in a newspaper. The formula is very similar, they both have headlines, usually a photo or two and then content.

That was my thinking until a few days a go when my Dad shared a story with me from the New York Times. It was my “ah-ha” moment. The story outlines an Avalanche and how it effected the people caught up by it. Although the content is very interesting in itself, the way that the authors intertwined video, dynamic images and flyover maps made it fun to read and gave you a feeling of being on a journey of discovery. I felt like I was a small child again, discovering the wonders of pop-up books!

I was so inspired that I wanted to try out some of the techniques they used in the story in my own site. Most of my site is just text and about as close to a journey of discovery as a algebra textbook (apologies to the one person out there who enjoys algebra). I had to start somewhere and so I thought the “About Me” page was as good a place as any.

Unsurprisingly, pretty early on I realised that engaging the user in the way the Times article engaged me, was pretty tricky. I persevered and through the use of Google Earth, HTML5 charts and a JQuery plugin called “Parralax” I was able to hopefully bring the page if not to life, then at least to semi-consciousness by amongst other things, making my photos move around, video that fades in and automatically plays when you scroll to a certain point.

I do not pretend that I have got to the level of the Times article but it was a start and it will certainly inform my future work. From my own perspective, engaging the user is the key, making not just pretty design but new content reveal when a user interacts with a page by scrolling, hovering over a certain point, or even stayed on a certain point of a page for a long time is usually regarded as a bad thing from an accessibility stand-point but if the web is to truely cement the revolution from the printed word and achieve the holy-grail of getting users pay for content online, I believe that these tools must be fully embraced to give the user a unique experience that they could not get from picking up a newspaper.

Like all revolutions these new techniques cannot just need be embraced in one or two “cool” projects but need to proliferate throughout all content so that eventually articles will not just be read, they will be engaged with.

Vive le Revolution

Links

View the New York Times story

Other tools I used:

• imovie – I used some simple video editing to put together the map.
• Miro Video Converter – I used Miro to convert the video in to the various different video types that are needed for HTML5 Video – .mp4, .ogv, .webm. It is a free software that is very easy to use.
• MediaElement.js – Although HTML5 video is ok on its own, it does not have great styling at the moment, also it cannot deal with fallback if the video types are not supported. MediaElement helps with both of these.
• Scollspy Jquery plugin – A plugin that helps you tell where on the page a user is. I used this to hide and show the video depending on position of the page.