Google×
Lions Gate

Mad Men

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

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.

  • Site Of The Day
  • Mobile Of The Day