Greg Gant
Front End Architect, UX Engineer

Mercedes-Benz Evolution Tour

Client: Mercedes-Benz & Razorfish

Website: mbevolutiontour.com

Position: Front End Developer

Tech stack: Python, Instagram, Grunt, Sass, Compass, Susy, jQuery, jQuery Validate, Modernizr.

Overview:

Mercedes-Benz is best known for high-end cars, but the brand needed to overcome an image created by its competitors as "old luxury". Following the momentum of the CLA-Class, Mercedes targeted a younger audience that previously would not have considered the luxury car brand. Emerge Interactive collaborated with Razorfish (New York) to create a ticket giveaway for its sponsored concert series, the Mercedes-Benz Evolution Tour, complete with Instagram integration.

Role:

Emerge interactive performed the role of developing the site from the Creative assets sent to us from Razorfish interactive. I performed the role of front end developer on both the 2014 & 2015 iterations of the website.

Pictured: 3rd iteration of the tour website

Unique Challenges:

Razorfish provided us with ultra high resolution assets, each PSD at weighing at a massive 2 GB. With an extremely adept eye for detail, Razorfish wanted the deliver the highest quality images with the lowest data hit. We ended up using lazyload, and made heavy usage of ImageAlpha to bring down 1 MB PNGs to 250 KB. The first iteration I built using Susy for Sass, which was successful but also forced a reliance on compass. In later iterations, we chose to move away from Susy in no small part due to Compass being incompatible with LibSass at the time.

See the Pen Susy: For-Loop Generated Responsive Grids by Greg Gant (@fuzzywalrus) on CodePen.

Creating my own grids allowed me to dial in my usage of more complex Sass functionality. I created a series of CodePens demonstrating how easily a grid system could be created in any number of grid columns by changing a single variable.

A full series of my Suzy grid experiences can be found here.