The Guardian’s “NSA Files Decoded.”

Link to the site: http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded#section/1

The Guardian took an in-depth look at what Edward Snowden’s leaks means to the viewers. The site is composed with plenty of quality videos of experts explaining the issue within a long, vertical reading page.

There are multiple features I like about this site, including the clean design and layout, as well as multiple multimedia elements used to present the story and data. But the most interesting one is the videos that automatically plays when you scrolled to it.

Screen Shot 2013-11-13 at 2.13.54 PM

Screen Shot 2013-11-13 at 2.14.18 PM

I found the related javascript in the site’s code:

<script type=”text/javascript” src=”http://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video-js/video.js&#8221; id=”js-gia”></script>

And the matching HTML begins from something like this:

Screen Shot 2013-11-13 at 2.39.51 PM

I think this java technique is really useful to learn. Although not everybody likes auto-play videos, but such feature sometimes makes the site more alive.

 

Advertisements

One response to “The Guardian’s “NSA Files Decoded.”

  1. I like the simplicity of this page. Although it is simple, there were a lot of subtle additions that really made the page feel very interactive. For example when you scroll down past the title, a top menu bar fades in at the top of the page, which would help a lot with simple navigation. I like the parallax scrolling here, which I think is important code to know since so many journalism sites are beginning to utilize that in their multimedia stories. In this instance I agree that the auto play videos work — especially because they are short, integrated within the story, and stop playing as soon as you scroll past them.

    Great site choice!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s