Myer AW14 Designer Campaign Site

I just finished working on Myer's 2014 Autumn Winter Designer Collection campaign site.  Not since my Flash days have I worked on a campaign microsite, and I had a great time working on this one. It was also a great opportunity to deep dive into Grunt and experiment with various grunt plugins.

 

Brief

• Campaign microsite with a homepage and 19 designer pages - each with custom content, embedded youtube video and 360 degree outfit view
• Campaign to sit within Myer's website, and deployed via Myer's CMS
• A slick user experience with seamless transitions and interactions

Dev Environment & Tech Stack

I wanted the project to be easy to setup and built for anyone with limited technical experience. GIT, NodeJS, and Grunt are the only requirements that needed to be manually installed. With all other plugins and dependencies managed via NodeJS's package manager with npm install, getting a build up and running could not be any easier.

GIT with Bitbucket & Sourcetree

• Few people on the project had experience with GIT, and it took a bit of time to get everyone up and running. I always had trouble with setting SSH keys up, and Bitbucket's guide saved me a world of SSH pain.
• We used Bitbucket for online repository as it is free for private project & includes a handy wiki and bug-tracker for our repository. 
• SourceTree is a GIT client with an intuitive UI and integrates well with Bitbucket.

NodeJS

NodeJS is an environment to run our local server and build tool, Grunt.

Grunt

Grunt is used to compile separate builds - one for previewing in development and one for Myer's CMS, where most assets need to sit on a separate content server.

• assemble is used extensively for building HTML pages by inject JSON data into Handlebar templates. I also used assemble to compile JSON data into the Javascript file.
• grunt.file is handy for creating seed files, and for converting a large amount of spreadsheet data into JSON files.
• tasks for building: set environment configurations > clean > copy > assemble > uglify > less
• tasks for previewing: express server > open > watch (watches JS, LESS and Handlebar template files and recompiles on change)

LessCSS

• I chose Less over SASS as SASS would have required Ruby and SASS to be installed - whereas Less could be used with just its Grunt plugin. Syntax-wise Less & Sass are very similar, though I missed the convenience of SASS's Compass mixins.

Javascript

• Backbone - lightweight MVC framework
• PreloadJS - used for assets loading

Optimisations

Preloading Queue - I used grunt.file.expand to automatically generate a list of project assets. This list is then injected it into the app's javascript in the build process. This data allows the app to create a loading queue that preloads assets in the background. After a page is transitioned in, the loading queue attempts to load the assets required for the next page, and all subsequent pages after that. The preloading queue then resets whenever the user goes to another page, and restarts after the new page has transitioned in with a rearrange queue.

Transitions - A new page request is ajax loaded and slide-transitions in while the old page fades and slides out. Each page has a youtube video iframe embed, which noticeably degraded the performance of the transition animation. Even when the embed tag is set to display:none, the transition was still bumpy. I removed these tags from the markup, and inject them to the DOM only after the page transition animation completes -  the animation performance is improved and is noticeably smoother.