New Harmonic Northwest Website!
October 11th, 2013 by Gage Pacifera
I’ve been tweaking on it for way longer than I would like to admit, but as of today I am declaring the new version of harmonicnw.com officially launched.
Yippee!
The Goal
I had a laundry list of requirements for this site: I wanted it to look modern and elegant. I wanted it to look great across screens of all shapes and sizes. I wanted it to be touch-friendly. I wanted dynamic interactions. I wanted color. I wanted the information to be presented simply and to be easy to read. And after a lot of work, I think the site ended up doing pretty well on all of those counts.
I have a lot of talented people to thank and made use of a number of super helpful tools.. so let us begin with the acknowledgements.
Design Maestro Michael Fofrich
All of the visual elements on the site are owed to the ridiculous talent of the inimitable Mr. Michael Fofrich. He came up with not one, but several awesome options for site layouts and for the new logo. His eye for the interactive elements in particular was pretty amazing. I have a blurb of text on the site somewhere saying that Harmonic Northwest is a design-driven company. I think this site is a pretty darn good example of the great work a studio can do when making design a priority.
Photos by Sarah Giffrow Creative
I was recommended Sarah by a colleague and ended up enlisting her help for the head shots of Mike and I. The session was super efficient and the photos turned out great. Sarah is a total pro, I’ll hit her up again next time a need for photos arises. Sarah heads up Sarah Giffrow Creative which I understand is soon to be replaced by Upswept Creative.
Isotope Is Pretty Awesome
Did you notice the super cool filtering effects on the blog page? That’s Metafizzy’s isotope in action. This plugin was brought to my attention by Mr. Dan Manchester (aka Elseloop) and I was stoked to have an opportunity to use it on harmonicnw.com. It was super easy to implement. I was worried about whether it would work well with a responsive layout and as it turns out, it sure does.
JQuery UI + Touch-Punch
It took me a little while to figure out the best way to do the swipe-through interaction on the portfolio page, but I ended up going with with a combo of jQuery UI and Touch-Punch. Initially I was having problems with the swipable area overriding the ability to scroll vertically through the page. I solved that issue by creating an invisible draggable element that fits over the device images and then having that element update position of the portfolio item container on the drag event.
CSS Animation Magic
I made use of some very fancy CSS transitions to create the interactive Methods piece on the home page. The CSS transitions make the animation move more smoothly than using jQuery animate. That was my first time making extensive use of CSS transitions for animation and I was a little surprised at how easy it was and at the overall effect I was able to achieve.
Makin’ it SASS-y
A few of my developer colleagues had been recommending I give SASS (Syntactically Awesome StyleSheets) a try to make my CSS development more efficient. I was curious, so I decided to convert harmonicnw.com’s stylesheets to SASS. The setup was pretty easy using Compass App, though admittedly it took me a little while to figure out how Compass integrated into the whole SCSS rendering process (turns out it pretty much takes care of everything). I love the use of variables, object-oriented code formatting, mixins and shortcodes that automatically enter browser prefixes where needed. I will definitely start using it on other projects to make the coding process more efficient.
A Need For Speed
I took a few different steps to make the JavaScript-heavy site run a little faster. I made use of Yahoo’s Smushit WordPress plugin to losslessly reduce the size of site images (this is done partially by removing image metadata, but doesn’t affect actual image display). I’m running the W3 Total Cache plugin which minifies CSS and JavaScript, implements browser caching and database caching. I’m also trying out Cloudflare, a CDN-style service that helps speed up sites by delivering content from its geographically diverse bank of servers. They actually have a pretty nice free plan to get you started.
Local, Sustainable Hosting
The site is hosted by locally owned CanvasDreams. I have a VPS setup, but I also have a lot of clients on their shared servers and both work great. I’ve been happy with their setup and customer service for the last three years that I’ve been using them. The big selling point for me was that these guys are totally dedicated to sustainability, which separated them from the other local options I was looking at.