The Litmus Live 2018 ticket giveaway email featured an interactive journey for subscribers, where they could choose either an Email Marketer or Email Developer path. You can see the full email and its code here.

We have previously blogged in depth about how to build an interactive quiz an email. The functionality used in this email is outlined in that blog post and the same methods were used: a mix of checkboxes and radio buttons to create click events using HTML and CSS.

For this email, the separate paths of Email Marketer and Email Developer are each their own checkbox. Within each path, there are a series of 4 questions, which are a group of radio buttons controlling the question display. Correct answers lead to the next radio button in the group being checked which housed the next question. Incorrect answers triggered a separate checkbox for an error state modal, forcing users to go back to re-answer the question they got wrong.

If a subscriber successfully answers the final question of the journey, a success state triggers its own separate checkbox presenting users with a link to enter the giveaway and tweet about completing their journey. So, overall, this journey featured 2 main checkbox paths (marketer/developer), each of which consisted of 4 nested radio buttons, and an additional 2 checkboxes (success/error)

The “Email Superhero” interactive journey works in the following email clients:

  • Apple Mail
  • Outlook for Mac
  • iOS 10+ Mail

These three client groups account for ~40% of Litmus' audience.

All other email clients receive a static fallback version with a CTA to take the quiz via an online version.

The quiz CTA for non-WebKit email clients

Since this interactivity could be used for iOS Mail on mobile but not for other mobile apps like Outlook, we doubled up CSS targeting between two queries: 1) WebKit and min-width media query for desktop and 2) @supports iOS 10+ Mail targeting.

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-width: 480px) {
  /* CSS for WebKit clients (Apple Mail + Outlook for Mac) on desktop (wider than 480px) */
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff)
  /* CSS for iOS 10+ Mail */
}

Given how media and supports queries function and that we needed to distinguish between the two scenarios, this unfortunately meant we had to duplicate the exact same CSS for both queries. Luckily, we didn’t run into any file size issues and did not have to do any minification beyond our standard CSS inlining.

You can learn more about WebKit targeting and progressive enhancement in this blog post.

We’re happy to answer any questions you have about the email!

How did you enjoy the journey?