Google GlassLaunch Site
Another B-Reel project that I co-developed with Francis Villanueva in collaboration with Google Creative Labs. From the outset of the project, we decided it would be best to take a responsive approach to building the site. There wasn’t a ton of content to wraggle and we thought it would prove to be helpful when came time for code review and ultimately working with Google’s (sometimes difficult) CMS.
One of the imperatives of the project was to have it load extremely fast on all devices. If you breakdown our hours by task, I wouldn’t be surprised if more were dedicated to testing then to actual development time. The client wanted large, hi-res images on the desktop experience but also have the site load quickly on mobile devices so we used media queries to serve the appropriately sized images. This reduced a lot of the load time/network traffic since images are more data intensive.
In one of the earlier designs, we were creating a parallax effect with the Glass’s UI and the imagery that is used as a back drop in the What It Does section. We did extensive performance testing and a multitude of executions to determine first, if using parallax was a viable approach within the design constraints and second, how to build an experience where it would be silky smooth across all browsers. In the end, we didn’t implement parallax scrolling but we did find a couple executions that worked well.
- Google Closure
- poor framerates when you force the browser to render image sizes on the fly
- explored several effective ways to impliment parallax scrolling
- hammer.js does not play nicely with CSS calc