Harmonic Northwest

One of my early development projects working with Red Lemon Creative was a feature-rich site for infotainment guru Brian Walter. Brian puts on highly entertaining educational shows for clients like PepsiCo, Starbucks and Microsoft using a mix of humor, video, music and showmanship. Genevieve at Red Lemon put together a quirky, engaging site design and Harmonic Northwest did the development work.

http://www.brianwalter.com

The site includes a lot of features that I tend to use in my other WordPress sites: blog, contact forms, RSS feed, multiple page templates, basic SEO tag editing, analytics tracking and the ability for the client to easily add/edit pages. But the real standout features of the site are a couple of special additions that helped emphasize Brian’s creativity and talent: a custom video player and a sophisticated header animation sequence.

The Video Player

We needed to implement a feature-rich video player to show off Brian’s work. Player features needed to include:

• playlist support
• custom theming
• iOS compatibility
• video thumbnails
• allow client to easily manage videos, playlists and thumbnails

I ended up going with JW Player, a player I had used before while working with CMD. I knew that JW Player had a good javascript API, HTML5 and flash support, iOS support and also had a WordPress plugin for managing videos. Turns out it was a great choice: it delivered on all counts, including being super convenient to manage videos and video thumbnails through the WordPress admin panel. The video player also had YouTube-y display features like maximize screen, control volume, scrub through timeline bar, etc.

We also implemented a iOS swipe feature for the video playlists in the JW Player.. so when a user browses the videos on his iPhone, he gets a nice iOS-y user experience. I used the iScroll javascript plugin to make that work.

The Animation

Initially I put together the quirky home page animation in Flash, but later we decided that we needed the animation to be iOS compatible, too.. which meant we needed to put together a non-flash version.

So I put a Flash detect and then if Flash wasn’t detected, we would use a HTML/jQuery-driven version of the animation. And that turned out pretty well. The jQuery animation doesn’t quite do everything the Flash animation does, but it is about 80% the same and super smooth. And the overall effect of being to see a Flash-like animation on the iPhone and iPad is definitely really cool.

To put that together I used the jQuery 2d translate plugin (which I believe was free when I downloaded it) and this Penner easing plugin.

Filed under:
Portfolio, Web Development, WordPress by Gage

The Harmonic Northwest $houtout is an effort to give some money and recognition to those selfless developers who offer up their expertise to help the development community in exchange for a voluntary donation.

I have to give credit to Noel Javier for helping me find this well put-together WordPress plugin that handles contact forms. It’s highly configurable, super versatile and straightforward enough to allow clients to make edits. In short, I really like it and deem it worthy of a $houtout.

http://contactform7.com/

For my situation, I did have to make some special adjustments using jQuery. The form plugin expects that there is a label associated with each input and where there isn’t, some weird things can happen around required fields and submitting. The code below fixes some of those issues and sets/resets default text input values to their descriptive text on focus and blur.

$(document).ready( function() {
	// contact form dynamic values
	var formValues = [];
	var formTextFields = $(".wpcf7-form").find(".wpcf7-text, textarea");

	// clear text fields on focus, return to default val on blur
	formTextFields.each( function() {
		var defaultValue = $(this).val();

		formValues.push( defaultValue );

		$(this).blur( function() {
			if ( $(this).val() == "" ) {
				$(this).val( defaultValue );
			}
		});
		$(this).focus( function() {
			if ( $(this).val() == defaultValue ) {
				$(this).val( "" );
			}
		});
	});

	// form submit actions
	$(".wpcf7-form").submit( function() {
		// on submit, if field has default value change it to blank for req'd fields to work properly
		formTextFields.each( function(i) {
			if ( $(this).val() == formValues[i] ) {
				$(this).val( "" );
			}
		});	

		// after submit, return blank fields to default values
		// we have to run replacement twice because when form is submitted and
		// data is valid, it replaced fields value right way and then a second
		// time when the AJAX response resolves.
		var howManyTimesReplaced = 0;
		var intCount = 0;	// number of times interval was run

		var to = setInterval( function() {
			var emptyFieldsReplaced = false;
			formTextFields.each( function() {
				if ( $(this).val() == "" && !$(this).is(":focus") ) {
					$(this).trigger("blur");
					emptyFieldsReplaced = true;
					console.log("fields replaced");
				}
			});

			if (emptyFieldsReplaced) {
				howManyTimesReplaced++;
				emptyFieldsReplaced = false;
			}
			if ( howManyTimesReplaced > 1 || intCount > 20 ) {
				howManyTimesReplaced = 0;
				intCount = 0;
				clearInterval(to);
			} else {
				intCount++;
			}
			//console.log("interval run");
		}, 500);
	});
});

Filed under:
$houtouts, Web Development, WordPress by Gage

Over the past couple of years Harmonic Northwest has partnered with Red Lemon Creative to develop several really nice looking WordPress sites. The latest of these was for the law office of William Goldstein.

http://www.willgoldsteinlaw.com

Once again Genevieve put together a great design and Harmonic Northwest took care of the development. This site was pretty straightforward in terms of functionality: two page templates for home page and inside pages, a few different sidebars, a contact form, obfuscated emails and about a dozen pages all in all. The WordPress setup is rigged so that the client can add subpages to certain sections but not to others.

The site has a few SEO-friendly features as well. I implemented my usual SEO metadata editor to the WordPress installation and then also allowed for the client to adjust URL titles to sync up with keyword campaigns.

Filed under:
Portfolio, Web Development, WordPress by Gage