Author Archives: jakegodin

JavaScript Critique: The Washington Post

site: http://www.niemanlab.org/2013/07/arguing-for-a-new-genre-javascript-journalism/

Screen Shot 2013-12-09 at 4.45.29 PM

While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

function embedWPAudioPlayer(opts) {
 var id = opts.container,
 url = opts.url,
 width = opts.width,
 filetype = url.substr(url.length-3);
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin || !Modernizr.audio) { //if it has the plugin OR it doesn't support HTML5
 var so = new SWFObject("http://media.washingtonpost.com/wp-srv/graphics/assets/swf/soundplayer_stretch.swf", id, width, "30", "9", "#ffffff");
 so.addParam("id", id);
 so.addParam("name", id);
 so.addParam("allowScriptAccess", "always");
 so.addParam("wMode", "transparent");
 so.addParam("swfliveconnect", true);
 so.addVariable("soundurl", url);
 so.write(id);
 } else if (Modernizr.audio) {
 $('#'+id).html('<audio controls style="width:' + width + 'px;"><source src="'+ url +'" /></audio>');
 }

}

It’s a little hard to understand, but knowing where to find it is pretty useful in case one would want to use it later.

It really adds to the piece since you can actually hear the words being spoken. Without the audio, this story would lose a lot of its value.

Advertisements

Helpful Design: The New York Times

Site link: http://www.nytimes.com/interactive/2013/04/14/nyregion/mayoral-candidates.html

For my first webpage, I utilized the style of a New York Times article that was doing something similar. Instead of profiling a Task Force, this article was profiling the mayoral candidates of the election in the city. Here’s the main page:

Screen Shot 2013-12-09 at 4.23.38 PM

Now my original plan was to emulate the entire style of the site, character profiles and all. Instead I ended up emulating the design, making my site include mugshots with white backgrounds (we worked with the resources we had) and keeping things minimalistic. 

Another design choice I picked up was this:

Screen Shot 2013-12-09 at 4.23.53 PM

 

It may be hard to tell from the screenshot, but the site is essentially as long as there are candidates. So you don’t actually navigate to different pages when looking through the page. I did the same with mine, though I believe that the way the NYT did theirs was a little more effective having code that made the page-loading much more efficient than mine. 

I didn’t include maps on my site either, which is a shame but I don’t think we had access to regional information for each candidate. It would have been interesting to show where each Task Force member lived or knew within Columbia.

Still, emulating the NYT’s style left me with a site I was happy with. 

CSS Technique: Sticky Nav

I like sticky navbars. I think they work. And they’re an elegant solution to ensuring the user always has a way to hit other pages on your site. Turns out, sticky navbars can be pretty easily coded through CSS, which is great because that means it’s not too convoluted.

I found a pretty nifty tutorial at a site that goes by the name of “AvexDesigns“. And hey, what do you know, he has a sticky navbar! A pretty nice one at that…

Screen Shot 2013-12-09 at 3.34.40 PM

The tutorial he has up makes creating a sticky navbar sound pretty darn simple. Essentially you tag a navbar with an ID and give it a couple attributes while making sure your header ID has the appropriate attribute.

Are you ready for it?

#navigation {
position: fixed;
z-index: 10;
}

#header {
margin-top: 50px;
}

And that’s it! Pretty easy, right?

Looking at the code on Avex Designs shows that he follows his own tips…mostly. It’s odd, but he put the z-index: 10 bit under the header ID instead of his nav ID. Going into Google Chrome’s “Inspect Element” and disabling the z-index shows that it’s working as intended though, since items will scroll on top of the navbar with it disabled.

Screen Shot 2013-12-09 at 3.42.15 PM

 

The navbar is tagged with the “fix position” attribute though, which, when disabled, does make it not-sticky. So that’s nice to know. I think the reason this designer put the z-index attribute under header instead of nav is that he has some other stuff up there at the top that he wants to keep above everything else as well (like the Avex image).

News Site Critique: The Verge

I’ve been a fan of The Verge for a while now. I hear a lot of folks say that they’re pretty far ahead of other sites in terms of delivering news and web design, and I’d say that those people are mostly right (though I’m not a big fan of them tooting their own horns a whole bunch, Polygon).

Here’s the homepage:

Screen Shot 2013-12-09 at 3.52.08 PM

 

Underneath that is a long collection of blocks for other stories. The design at The Verge is pretty good when it comes to what you see first. The important stories are at the top and are inundated with color. The less-important stories are located lower. The navigation is at the top and is a sticky nav, which is useful. It’s clear what each area is for, though I’d think that there could be more differentiation for the different types of stories. Maybe color-coding.

Going to another page:

Screen Shot 2013-12-09 at 3.52.23 PM

 

And you get this side bar which is pretty darn useful. Each story contributes to a “storystream” that includes other stories of a similar nature. The headlines (the stories in the colored area on the front page) are also included.

The footer at the bottom is also pretty inclusive for navigating to different parts of the site.

Screen Shot 2013-12-09 at 3.52.36 PMAlong with including all of the social media links, the footer includes a secondary search bar which is useful.

 

Site Critique: The Guardian – Syria Death Toll

A little dated, this 2012 article by the Guardian on death tolls in Syria is a good example of having good data visualization but poor implementation. Let’s take a look at the initial view on a Google Chrome browser.

Screen Shot 2013-10-09 at 2.51.40 PM

Right! So, not so bad. We have a nifty intro text by Mr. Rogers here along with a byline, some share buttons, an infographic and a sidebar. The byline is in an odd place, mainly because we have the multimedia element below it…so I don’t really understand why the byline wouldn’t be below that.

Everything else is on par with the Guardian’s usual setup. I feel like this could be improved. The share buttons are looking a bit antiquated and I think they could be modern/minimalistic-looking. The sidebar is a bit sparse too.

The infographic itself, which is actually a bit of a video, is very nice. It shows day-by-day deaths in Syria between 2011 and 2012 and is very telling.

Okay, so let’s move onto what’s next! Annnnnd…

Screen Shot 2013-10-09 at 2.52.04 PM

Nothing. (Besides a sidebar).

That’s not very good. Let’s look a little lower.

Screen Shot 2013-10-09 at 2.52.17 PM

Ah! There’re the comments. Okay, so that’s a bit of a stretch. There’s no reason for all of that white space. They should have either put some more text in there giving context to the infograph, orrrrr moved the comments up.

Other than that, we have normal footer-type-elements for any news site with important links and an ad at the bottom. Basic, and not very innovative, but it gets the job done.

Overall, I think the site did well in providing the information that they wanted to, but they could have formatted their site a bit better for its presentation.

The Cost of War: Traumatic Brain Injury – WaPo

Link: http://www.washingtonpost.com/wp-srv/special/metro/traumatic-brain-injury/index.html#/home/

So while looking for a nifty multimedia piece online, I came across this doozy by the Washington Post.

So...much...information

So…much…information

Just looking at the home page for this 2010 behemoth, it’s easy to make a few observations. Like, say, the plethora of links, stories and sub-articles. This is more of a hub I suppose. As you can see, there’s a menu bar at the top that’s spaced in somewhat of an odd manner. There’s HOME with a little house icon, INTRO, then SURVIVORS. For some reason, instead of making SURVIVORS a drop menu, it’s simply horizontally expanded into the links to various people in this story with Robert Warren being the focus. He even gets a video and photos.

After the SURVIVORS, you get a BRAIN link and, finally, a link to the article (with a little out-arrow icon thingy). The home page is littered with double links to what’s already in the menu, which is a good thing if you’re afraid people are going to miss the menu I guess. The video is autoplay which isn’t exactly desirable in web stories. You can also access videos on the other survivors from the home page in lieu of clicking on their links in the menu bar.

Let’s see what this intro is all about now…

Oh hai there video.

Oh hai there video.

Okay, so the intro is a video. All of the information that was below the home page remains, but I just cropped that out of this screenshot. Both the “View full menu” and “Skip intro buttons that flank the video lead back to the home page, which is somewhat of an interesting choice. The video autoplays and looks to be from an in-house Adobe video player developed by WaPo.

Onward to the SURVIVORS tab.

Following another video - a photo gallery.

Following another video – a photo gallery.

Clicking on the SURVIVORS tab brings the reader directly to another video. This one is on the first survivor – Mr. Warren. Skipping that, you can go to a photo gallery with some nice, large photos. There seems to be a bit of a hiccup with the side text there, as it sticks into the photos some. Clicking on the photos progresses the reader through the gallery. And apparently you can buy the photos.

Right, onto the BRAIN tab (the other survivors are all videos identical to the INTRO video and Warren’s).

An infographic appears!

An infographic appears!

Hey look at that, an infographic! This piece includes the ability to highlight different areas of the brain and to play audio clips of professionals speaking on each part. It’s pretty standard as far as infographics go, but I’d say it works with this piece. Lots of information for those who want to know what happens when you knock your noggin’. Hitting “Start” autoplays the audio clips on each subsequent brain area.

And then the ARTICLE link, of course, leads to the article on this story.

All in all, I think this multimedia piece is a little subpar. This could be due to the fact that it was done in 2010 and multimedia was still a budding practice at WaPo. Or it could be due to the fact that nobody really had the inspiration to create something truly immersive like the New York Time’s “Snow Fall” late in 2012.

My biggest take away from looking at this piece though, is that this is what we shouldn’t be doing in 2013. As informative as it is, I believe there are better ways to bring multimedia elements together to tell a story now and producing something like this is just lazy. I’m certainly not faulting the Washington Post for this piece though – they were probably working with what they had at the time. Just know that “The Cost of War” is totally a 2010 multimedia piece, not a 2013 multimedia piece.