Author Archives: Multimediyum

Washington Post: Heisman Trophy Tales

WP_above the fold

 

With the college football season winding down, the Washington Post created this cool interactive filter to track the Heisman trophy over the years. The script of note is to the left of the page and it employs a cool accordion affect when selecting different states. They utilized a jQuery plugin pasted below.

/**

* Accordion, jQuery Plugin
*
* This plugin provides an accordion with cookie support.
*
* Copyright (c) 2011 John Snyder (snyderplace.com)
* @license http://www.snyderplace.com/accordion/license.txt New BSD
* @version 1.1
*/
(function($) {
$.fn.accordion = function(options) {

//firewalling
if (!this || this.length < 1) {
return this;
}

initialize(this, options);

};

//create the initial accordion
function initialize(obj, options) {

//build main options before element iteration
var opts = $.extend({}, $.fn.accordion.defaults, options);

//store any opened default values to set cookie later
var opened = ”;

//iterate each matched object, bind, and open/close
obj.each(function() {
var $this = $(this);
saveOpts($this, opts);

//bind it to the event
if (opts.bind == ‘mouseenter’) {
$this.bind(‘mouseenter’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘mouseover’) {
$this.bind(‘mouseover’,function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘click’) {
$this.bind(‘click’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘dblclick’) {
$this.bind(‘dblclick’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//initialize the panels
//get the id for this element
id = $this.attr(‘id’);

//if not using cookies, open defaults
if (!useCookies(opts)) {
//close it if not defaulted to open
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //can use cookies, use them now
//has a cookie been set, this overrides default open
if (issetCookie(opts)) {
if (inCookie(id, opts) === false) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else {
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //a cookie hasn’t been set open defaults
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
}
}
});

//now that the loop is done, set the cookie
if (opened.length > 0 && useCookies(opts)) {
setCookie(opened, opts);
} else { //there are none open, set cookie
setCookie(”, opts);
}

return obj;
};

//load opts from object
function loadOpts($this) {
return $this.data(‘accordion-opts’);
}

//save opts into object
function saveOpts($this, opts) {
return $this.data(‘accordion-opts’, opts);
}

//hides a accordion panel
function close(opts) {
opened = $(document).find(‘.’ + opts.cssOpen);
$.each(opened, function() {
//give the proper class to the linked element
$(this).addClass(opts.cssClose).removeClass(opts.cssOpen);
opts.animateClose($(this), opts);
});
}

//opens a accordion panel
function open($this, opts) {
close(opts);
//give the proper class to the linked element
$this.removeClass(opts.cssClose).addClass(opts.cssOpen);

//open the element
opts.animateOpen($this, opts);

//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by “,”
id = $this.attr(‘id’);
setCookie(id, opts);
}
}

//toggle a accordion on an event
function toggle($this, opts) {
// close the only open item
if ($this.hasClass(opts.cssOpen))
{
close(opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by “,”
setCookie(”, opts);
}
return false;
}
close(opts);
//open a closed element
open($this, opts);
return false;
}

//use cookies?
function useCookies(opts) {
//return false if cookie plugin not present or if a cookie name is not provided
if (!$.cookie || opts.cookieName == ”) {
return false;
}

//we can use cookies
return true;
}

//set a cookie
function setCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}

//cookie plugin is available, lets set the cookie
$.cookie(opts.cookieName, value, opts.cookieOptions);
}

//check if a accordion is in the cookie
function inCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) {
return false;
}

//if its not there we don’t need to remove from it
if (!issetCookie(opts)) { //quit here, don’t have a cookie
return false;
}

//unescape it
cookie = unescape($.cookie(opts.cookieName));

//is this value in the cookie arrray
if (cookie != value) { //no, quit here
return false;
}

return true;
}

//check if a cookie is set
function issetCookie(opts)
{
//can we use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}

//is the cookie set
if ($.cookie(opts.cookieName) == null) { //no, quit here
return false;
}

return true;
}

// settings
$.fn.accordion.defaults = {
cssClose: ‘accordion-close’, //class you want to assign to a closed accordion header
cssOpen: ‘accordion-open’, //class you want to assign an opened accordion header
cookieName: ‘accordion’, //name of the cookie you want to set for this accordion
cookieOptions: { //cookie options, see cookie plugin for details
path: ‘/’,
expires: 7,
domain: ”,
secure: ”
},
defaultOpen: ”, //id that you want opened by default
speed: ‘slow’, //speed of the slide effect
bind: ‘click’, //event to bind to, supports click, dblclick, mouseover and mouseenter
animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
elem.next().stop(true, true).slideDown(opts.speed);
},
animateClose: function (elem, opts) { //replace the standard slideUp with custom function
elem.next().stop(true, true).slideUp(opts.speed);
},
loadOpen: function (elem, opts) { //replace the default open state with custom function
elem.next().show();
},
loadClose: function (elem, opts) { //replace the default close state with custom function
elem.next().hide();
}
};
})(jQuery)

ReverbNation: hovering media player

RN_homepage

One of my favorite music for finding featured free music is ReverbNation.com. It’s got a very clean design with plenty of white space and I love the greyscale color with the red-orange highlights. When it comes to CSS techniques, the media player at the bottom of the page is a really clever element. It allows the user to start a song then scroll elsewhere on the page while keeping that song playing. If they want to stop the song, skip ahead or back, all the controls are right there at the bottom of the page.

RN_below the fold

 

The user can even navigate to a new page in the reverbnation.com domain and keep the song playing, giving the user a lot of freedom. But all of that is way over my head. When it comes to the simpler CSS implementation, I like that they tacked it at the bottom of the page instead of the top. The top of your browser window is already dominated by your browser navigation, URL, your tabs, and ReverbNation’s own page header.

RN_media player

By thinking to put the media player at the bottom, it’s still in the familiar horizontal layout like we expect from iTunes et al., but it stays out of the way so the user can focus on material on the page. It’s a really clever design principle to consider when working on future designs.

Site critique: The Guardian – US spying in the Pacific

This piece by The Guardian explains that the US has been caught spying on their allies in New Zealand, and what the diplomatic implications are surrounding the Trans-Pacific Partnership Agreement.

Screen Shot 2013-10-09 at 9.58.23 AM

The top of the page here is way too busy for my liking. We have a navbar to choose your edition, a button for connecting to Facebook surrounded by wasted whitespace and a banner ad all before reaching their header. The headline of the piece is more than halfway down the page. Continue reading

Transform:rotate method: CHVRCHES – The Bones of What We Believe

CHVRCHES_full site

I found this site doing work for my personal blog doing music reviews. This group, CHVRCHES, uses a stylized V in the spelling of their name – pronounced “churches” – and wanted to incorporate it in the design of their site. The V is a part of the design of the audio player that looks vaguely like a vinyl album.

CHVRCHES_detail

The different rings of the circle spin when you mouse over them, or when you click the arrows on either side to play a different song from the album. Digging through the code I found the transform: rotate method, which adjusts the orientation of an object designed in CSS. What’s especially interesting is that the code changes in front of you as you mouse over the objects, the degree value changing rapidly as the circle rotates on its axis.

CHVRCHES_code

I’m still not sure how it is that the objects respond automatically to mouseovers, but it’s a really cool effect and I enjoyed its use on this album’s promo page. It was a little touch of engagement that made me more interested in the group and their work.

Kourant.com

This is a site that I stumbled upon during by freshman year at Mizzou and later found out that it was run by a graduate from my high school. I stopped following it when Kourant 1.0 was taken down to be reworked. It was relaunched this August, and we got this…

Kourant_top of page

Continue reading

Life with the Lancers

I stumbled across an older piece done by BBC News back in 2010. “Life with the Lancers” follows four soldiers from the Queen’s Royal Lancers through basic training, to Afghanistan and back to the UK. These 15 videos are packaged in a little multimedia project for efficiency’s sake.

Life w/ Lancers layout

 

All the media is contained in this tidy layout. The navigation bar categorizes content with a subhead like “Life in camp” or “Coming home” to give an idea of the chronological progression of the videos. The video editing is top notch, and the material is very compelling, with a lot of soldier head-cam footage.

The layout of each page is a little different to make room for different elements, like the map and two videos shown below.

Life w/ Lancers_Going to war

 

This page covers basic training in the UK and shows the locations of the different training sites. When the videos are set in a smaller frame, like the two above, a pop-up media player hovers over the layout.

Life w/ Lancers_pop-up

 

The navigation in the back fades and the video takes center stage to really command your attention. It troubles me, though, that with some of the videos that play without a pop-up, you’re able to watch the video while reading the chatter or viewing the infographics, but when you get a pop-up player, you are unable to view the other content. I don’t think the producers put any thought into which videos would allow that and which would not.

The layout is very neat and tidy, and is easily navigable, but by and large it’s a little bland. The use of shades of gray throughout the layout is pretty dull, and doesn’t do anything to complement the content. All of the material by itself is well-produced storytelling, but the package it comes in is pretty boring. If I’m nitpicking, I would mention that the footer at the bottom of the screen on the BBC News site is also distracting.

Life w/ Lancers_footer

 

Beneath the nav. bar is the typical BBC footer, which I don’t want to see if I’m trying to be immersed in the story of these soldiers. What does help with engagement is the neat infographics they include throughout the piece.

Life w/ Lancers_transport

Life w/ Lancers

 

 

Infographics like these are a nice touch that provide additional information that you don’t need to hear coming from the mouth of a soldier. The subjects of this story create an ethos through the videos that is supplemented by the information provided in these graphics.

All-in-all, I like this piece, but I can imagine a more interesting way of presenting the information. The multimedia itself is great, but the design leaves something to be desired.