monkeydummy

Last weekend I finished designing and building a new website (and logo) for Ward White and Joe McGinty – mcgintyandwhite.com. Joe and Ward are New York/Brooklyn based songwriters who perform regularly around New York and the East Coast. They’ll be doing a show at Joe’s Pub, NYC on March 10, 2012 covering a catalog of songs written by Jimmy Webb. Previously they released an album, McGinty & White Sing Songs from the McGinty & White Songbook, featuring one of Webb’s better known songs – Wichita Lineman. Both are longtime admirers of Jimmy Webb’s songwriting.

For the site, I used a modified version of Twitter’s Bootstrap for the page structure, jquery for page animation and jplayer, an open source, HTML5 and jquery media library which falls back to Flash for IE 6 &7. Below are some key snippets used in the site’s design:

Fonts

Font Squirrel has a fairly nice selection of free fonts along with an @font-face generator. The generator will prepare the fonts in formats suitable for hosting, then accessed by the @font-face CSS rule. I chose Bree Serif for the site. There are other options, including Google, for using fonts a visitor to the site may not have installed on their computer.

@font-face {
    font-family: 'BreeSerifRegular';
    src: url('BreeSerif-Regular-webfont.eot');
    src: url('BreeSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('BreeSerif-Regular-webfont.woff') format('woff'),
         url('BreeSerif-Regular-webfont.ttf') format('truetype'),
         url('BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Background Images

After doing a quick survey, it looks like IE9, FF 3.0 ↑, Saf 4.0 ↑, Chrome 4 ↑ and Opera 10.10 ↑ all support multiple background images. McGinty & White’s website users, for the most part, were using browsers that could display all the images.

	background:url("img/right-vig.png") no-repeat top right,
	           url("img/left-vig.png") no-repeat top left,
	           url("img/hero-bg3.jpg") repeat top left;

Page Animation
Jquery is responsible for the page animation (“smooth scrolling” when a navigation button is clicked). To make it work, the div the page animates over needs to be fixed and the z-index set to a lower value than the div animating over it, Jquery handles the rest by scrolling to anchor points on the page.

CSS

z-index: 0;
position: fixed;

Javascript

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
  		$(document).ready(function() { 			$('a[href^="#"]').click(function(event) { 				var id = $(this).attr("href"); 				var offset = 60; 				var target = $(id).offset().top - offset; 				$('html, body').animate({scrollTop:target}, 500); 				event.preventDefault(); 			}); 		});
// ]]></script>

Music Player
Jplayer is easy to use and supports audio as well as video. Below is not the full code for implementing Jplayer, just the portion for linking to songs and displaying the playlist. This is all the code that needs to be altered (as I remember). It can be styled for individual sites by changing the linked css file and supports both mp3 and ogg files for use in all browsers. IE8 and below use a linked Flash file hosted on the server (swfPath near the end of the snippet), yet the look of the player does not change when Flash is employed.

var audioPlaylist = new Playlist("2", [
				{
					name:"Everything Is Fine",
					mp3:"PATH TO/everything-is-fine.mp3",
					oga:"PATH TO/everything-is-fine.ogg"
				},
				{
					name:"I'm So Tired",
					mp3:"PATH TO/im-so-tired.mp3",
					oga:"PATH TO/im-so-tired.ogg"
				},
				{
					name:"Knees",
					mp3:"PATH TO/knees.mp3",
					oga:"PATH TO/knees.ogg"
				},
				{
					name:"Big Baby",
					mp3:"PATH TO/mw/big-baby.mp3",
					oga:"PATH TO/big-baby.ogg"
				},
				{
					name:"Wichita Lineman",
					mp3:"PATH TO/wichita-lineman.mp3",
					oga:"PATH TO/wichita-lineman.ogg"
				}
			], {
				ready: function() {
					audioPlaylist.displayPlaylist();
					audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
				},
				ended: function() {
					audioPlaylist.playlistNext();
				},
				play: function() {
					$(this).jPlayer("pauseOthers");
				},
				swfPath: "PATH TO/js",
				supplied: "oga, mp3"
			});

That just about covers it. Go see McGinty & White live at Joe’s Pub on March 10.