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.
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.
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
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).
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||
|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
So 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
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!
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.