Mad Men

Google

In commemoration of Mad Men's series finale, we collaborated with Google to build a huge archive of the show's history.

See the project

We worked with Google and Lions Gate to create an enormous interactive archive of Mad Men’s history. Boasting over 300 pieces of content such as key scenes, stills, storyboards, artwork, cast commentaries and never before seen extras courtesy of Matthew Weiner himself, the site acts both as a primer for the uninitiated as well as a trip down memory lane for diehard fans.

Even though time was tight, our technical scaffolding for this site was a small story in itself. Every single page here is pre-rendered, which makes the site totally accessible and SEO friendly even without Javascript, and much faster on initial load. We also used isomorphic Javascript, meaning we loaded the exact same templates on the front end as on the back end. Rather than building a CMS, we populated content on the site using JSON files, and built logic into the server side so that we could facilitate the generation of 'subcontent' based on the user's context.

On the animation side, we leveraged Pixi.js v3 for the cityscape and timeline pieces to ensure that all animations worked every bit as seamlessly on mobile and tablet. Icons were handled via an iconfont created through a gulp task, another optimization that improved the site's overall speed. Finally, we also utilized the .webp format where possible for even more speed improvements.

Awards

  • FWA

    Site Of The Day
  • FWA

    Mobile Of The Day

Credits

Google Zoo

  • Client

Lions Gate

  • Client