Instrument recently redesigned and redeveloped the website for Google’s Nexus devices – Google’s flagship Android line and the first to run Lollipop, the newest version of Android. We have a pretty unique stack for developing these sorts of sites, so here’s what we used to build this particular project.
During the early project stages leading up to actual dev, we used Framer JS in conjunction with Sketch to prototype several possible interactions/animations in the site. This allowed us to work closely with designers to experiment with different UI approaches, and although not all of the prototyped UI made it into the final site, it’s useful to start trying out ideas early to see whether they feel right or not.
Once proper dev kicked off, we began by creating a new Middleman project. We use Middleman as our local dev/build tool on many of our projects for Google, as it elegantly handles static page creation, automatic sprite sheet generation, HAML markup, SASS compilation (with CSS auto-prefixing), JS minification, and simple local server setup. There are a ton of templates that can help you get started with Middleman if you’re interested in learning more.
For JS development, we utilize Google’s own Closure Library and Compiler, which have a number of benefits: simple dependency management, a module-based organizational structure, and a compiler that outperforms many other JS compilers while checking your code for validity at the same time. Middleman’s build process can be seamlessly integrated with the Closure Compiler, which makes it quick and easy for us to create builds that are linted and ready for Google’s production environment.
In order to responsively load the big, beautiful product photography at various breakpoints, we’re using Morlock.js. We’re also using Morlock’s ScrollController to trigger animations and state changes when your scroll position reaches certain elements in the viewport. For tap and gesture events there’s Hammer JS, and for feature detection, Modernizr is a standard part of every site we build here at Instrument.
While we often use simple CSS transitions to toggle between visual states (opacity! visibility! color!), we also use the Greensock library to implement more complex JS-driven animations when we need them. Greensock is performant, hardware-accelerated, and makes that "silky-smooth" 60fps an achievable target.
So, what's performance like, since this codebase may seem like a big JS payload and the site has large, retina-friendly product photography? Well, thanks to the Closure Compiler, the concatenated and minified site.js file (which includes Closure Library dependencies) is just 31kb after gzipping. And we're using Morlock to load smaller images on devices with smaller viewports. The initial homepage load is 706kb on mobile, which is less than half the weight of the average web page 1.6mb as of July, 2014. Page performance – especially on mobile – is important to us.
The designers on the project used Sketch, which really helped the process along in terms of creating vector assets and also being able to see multiple artboards at the same time – quite useful in helping devs understand sometimes complicated responsive layouts at a glance, or quickly export an icon as a SVG.
We were super excited to work with Google to bring these new devices to life on the web, and we’re proud of the site we created to showcase the products. Enjoy your new Nexus 6 with Lollipop.