wanted

Lincoln, or How We Learned To Stop Worrying And Love The Superbowl

The Lincoln Now/Hello Again project started for us in November. In January, we were asked to prep it completely for 2 major events, The Superbowl and The Grammys. Needless to say, we... were... excited! In this post, we want to share some of the moments from start to finish, that were special, and made us kiss our both 'pollekes' for working the way we work.

oh yeah

First, a big thanks to Hugo & Marie, for the opportunity to get nitty gritty on a project like this, our continuous collaborations are truely a joy for us :) The people at Lincoln (hi Lisa!), everybody at Akamai and the wizz's at Keynote, there were a lot of people working on this. Which brings us seamlessly to the first topic.

Working Together

It's a good sensation when you feel that everybody in the team knows their stuff. When the Super Bowl deadline neared, we optimised the hell out of our original setup (more on that below) which wouldn't have been possible without the excellent feedback from Akamai & Keynote, both major players in their field.

"We're seeing a massive improvement on the loading time, impressive on such a short timeframe" - Akamai

The ship was steadily steered by Hugo & Marie, who pushed design and functionality in accordance with the really tight deadline. The first version (Lincoln Now) of the project was launched in December, and mainly focussed on the new Lincoln branding, and how each story could be told, design wise.

 

Working together locally is key. Period. We are grateful that our workflow is awe to the some. We are longtime GIT-people, we deploy our projects using CI for many years now, and it pays off in the way that we could focus our all on the project itself, providing responsive layouts, build on a custom WordPress. 

 

What exactly? Some Numbers

Crunching the numbers

Brad Pitt(fall's)

Looking good comes at a cost (when you want to be up during Super Bowl). In January, we started working on both a major update (the Hello Again section, that pushed visualisations with video, animations, slideshows, random templates etc...) whilst also getting asked to perform drastical optimisations to get better pageLoads (on both mobile and desktop).

Requirements

In the following table, we compared two POV's on the website, one of the design & content team, and the other of the caching & speed team.

 

design & content caching & speed
more visual layouts faster pageloads
add semi-screen filling video's fewer DNS requests
add randomisation on all page elements

lower filesizes

social media integrations fewer DNS requests
previewing unpublished content having a solid, long-life cache
... ...

 

You'll probably see some contradictions here :) 

Plan of action

CompressionSo comparing these lists, defining a plan of action and making a clear priority list, we went in with everybody, and worked our specific skills. This is where Version Control and CI come in handy. Here's a little list of what we (among others) did:

  • shaving off unused letters in the @font-face
  • include post-commit hooks where we'd gzip all our static assets automagically
  • refactoring entire fields of code to optimise loading speed
  • rethink how and when assets are loaded, much more asynchronously
  • constantly balance between cool features and necessary requests
    (left VS right)

I cannot, cannot thank you enough for your time, expertise and commitment last night. I don't know where we'd be without your team. - Lisa @ Lincoln

Agility!

There was a specific timing, where we would deploy every 3 days, and have Keynote run their extensive testing on our updates. After a day, there would be an updated report, on where there was still room for improvement. This agile approach is what made the meetups very specific, detailed and quick. There was maximum output of all parties involved. 

 

This also enabled us to do both updates and optimizations at the same time, with our entire team. Everybody working their specific skill set!

Our setup

For all the techies, here's how we did it:

  • we configured our CI to automagically deploy to our staging environment
  • we run 1 repository which houses all of our wordpresses in branches per version
  • we've written a completely from the ground up custom theme
  • no hacking, only intense use of Wordpress actions, filters & hooks
  • SASS & Compass
  • Sublime Text 2 helpers to spitfire media-queries
  • jQuery & Common JS philosophy
  • readability over code coolness
  • ...

All the pieces falling in place

So yeah, the Superbowl happenend, and the website stayed online with Tyrannosaurus-like visitor stats! The site and content looks great, everything loads fast like an arrow, and everybody lived happily ever after. We learned a LOT from this project, from technical things, to understanding more aspects of the project cycle of something so major as this. 

 

When we look back on everything, we are glad that all the things on our bucket list were met;

  • happy client(s)
  • great user experience
  • technical gem, without people noticing it
  • had fun building it
  • being proud of the final result
  • champagne afterwards!

 

If you have any questions you want to ask, please shoot us an e-mail!

 

Thanks for reading.

This article was written on Mar 28, 2013 (Spring is here, bars are putting their chairs outside). This post describes all the feelings that arise when working on worldwide, ginormous projects

 

00:06:53 1361

Related to this #work