Using z-index and Fixed Positioning to Create a Scrolling Experience
We here at eROI are really excited to share one of our latest emails for our partner, Taco Bell. In this email to celebrate Taco Bell’s 10 $1 breakfast items, we created vertical vignettes of three characters’ days centered around their breakfast decisions. The first character chooses Taco Bell (the right choice), the second no breakfast, and the last a competitor breakfast. The scrolling story depicts these three journeys simultaneously, providing the characters with surprising interactions throughout the day.
Here is the code so you can take a look under the hood:
tl;dr here is a video we created that shows the experience:
To make this work we leveraged the z-index CSS property and absolute/fixed positioning to mimic the characters weaving in and out of the illustration. Since those three properties only work seamlessly on iPhone’s native email client, we targeted the experience to only appear on that email client,suppressing the experience for other clients. The alternate experience displayed a CTA that encourages the user to view in browser.
When exploring new technologies in email, it’s important to identify the market share of devices used by your subscribers. Litmus Analytics allows us to quickly access this information to maximize the experience for the lion’s share of devices. For Taco Bell, Litmus Analytics has shown that the majority of subscribers are viewing Taco Bell emails on a mobile device and are more engaged than their desktop counterparts. We decided that providing a rich experience for mobile users while still providing a graceful fallback for everyone else was an intelligent approach, given the market share engagement data.
Learnings: In addition to using Litmus testing, we needed to test the experience on live devices to ensure it behaved as we intended it to. We learned that just because it works on iPhone 5, doesn’t mean it will work on iPhone 6, 6+, 6s or 6s+. Despite that there were no listed technical differences between some of the phones, and that they were on the same operating system version, we still encountered an array of bugs. We now have an internal spreadsheet outlining all our available devices, models and operating systems anytime we try a new technology. Highly recommended!
We would love to hear your feedback on this email and would be happy to answer any questions you might have regarding the strategy, design or code. We have a few tricks up our sleeves for future sends so we highly encourage signing up for Taco Bell emails.
See you all at #LitmusLive San Francisco!
The eROI Team