ETUsing z-index and Fixed Positioning to Create a Scrolling Experience
Greetings #emailgeeks!
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:
https://www.youtube.com/watch?v=AXd1-LNXUVE&feature=youtu.be
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!
Friends forever,
The eROI Team
Very cool email - thanks for sharing the code.
Interested to find out how long this took to develop and how the email performed. Did the time spent developing prove to be worthwhile?
Thanks Jaina!
When we pitch a "new" technology in an email we always create a prototype first to show the client as proof of concept, so the Dev time wasn't actually too bad initially. However once we were in our QA phase we did have some hiccups with getting the z-index to display the correct order in each version of iPhone. The trick is to create all layers as the same height and width. Crazy right?
We did see higher engagement from our subscribers (over 20 seconds!) and higher CTR, helping support our strategy of innovating in email while still having a graceful fallback. Props to the Litmus Tracking Pixel! 🙌
Email dev quirks - they're the best! ;)
Awesome to hear that this campaign paid off for you, for a very unique looking and functioning campaign. Very cool to hear that CTRs were up too, as well as engagement. Sounds like the subscribers had fun with the email, and enough fun that they wanted to click through. Great job.
Very interesting, Thank you for sharing the knowledge. What is the actual list of supported email clients for this technique?
This is very cool. I like how using the z-index with position absolute/fixed created a more interactive and personal experience.
I will definitely share this around and use it as inspiration when designing future kinetic emails.
Thank you! We appreciate the love :)
Hi, great work. I don't find the code in your post. Could you post it again ? Thanks
Awesome!