This is the US site for Hennessy cognac. Odopod has been Hennessy’s digital partner since 2012 and it is one of the few sites Odopod has maintained over the years, allowing us to iterate and improve it over time.
More than 70% of traffic is from mobile devices, making performance and load times even more important.
Modernizing the stack
In 2016, Hennessy went through a design “revamp” and we started to move away from RequireJS with a small webpack build and ES6. We still had a single bundle and many scripts with RequireJS’
define pattern, but we started to manage our dependencies with npm. We also started writing our CSS with SCSS instead of Sass.
During early 2017, I started work on modernizing the build system:
- Code-splitting creates a JS bundle per page, reducing the initial code the browser needed to download and parse.
- All dependencies are managed through npm.
- Everything is SCSS.
- Asynchronously load common and page-level CSS to avoid render-blocking.
- Dynamic imports (
import()) for code not needed immediately on page load, like modals.
requestIdleCallbackto initialize sections of the page “below the fold” when the browser has a moment, preventing main thread unresponsiveness on page load.
I’ve worked quite a bit on Hennessy. Most of it is still there, but some of the experience pages are gone. Here are some things that are still live:
Using Google Maps and the addresses of locations which sell Hennessy, the user can find stores closest to them and all over the US. Click “Find a Store” to explore it.
A scroll-jacked experience page for one of Hennessy’s marks. It uses CSS 3D transforms to rotate slices of an image, kind of like a Rubix Cube.
This section of the campaign features some parallax scrolling and temporary fixed positioning. CMS users add a header and then as many chapters and sections within those chapters as they want and an optional footer.
The Hennessy Essentials quiz is a Preact app and the other quizzes reuse some of the Preact components from the Essentials quiz. As simple as it is, I really like the Preact component I made for the sticky navigation which animates the titles as the user scrolls through sections of the page.
The cocktail quiz touched many parts of Hennessy, including the user accounts and lead to some good refactoring of cocktail product tiles. The quiz is also built with Preact.