Interactive email blog

Our Experiment with an Interactive Email Design

2

By Paul Kirby and Ed Ball

When you send an interactive email, it’s important to consider not just what code tricks you’re going to use, but also what you’re using interactivity for. Without a strategic goal, interactivity is just a way to get attention, and doesn’t offer much more than a traditional email would. With a clear purpose, you can use interactive techniques to provide additional value to readers. In the end, you’ll deliver an experience that a static email can’t match. Our interactive email example aimed to achieve just that.

With the interactive email we sent last month, our goal was to illustrate how quickly and easily our Campaign Precheck workflow finds and resolves content issues. The first step was creating both before and after versions of an email with a handful of problems. Our brilliant designer Rachel gave us that, with a short email sitting inside the image of a phone.

Here’s a slightly modified version of the original send:

Our interactive email around Campaign Precheck

Check out the interactive version

But we also needed a way for you to interact with the email and fix the issues. That’s where our developer Ed came in.

Coding Rollover Affect

Creating a responsive rollover technique in an email is a fun way to take some simple functionality and make an interesting interactive email. Email on Acid’s email is interactive in some clients and requires a fallback in others so it renders well for every subscriber. Let’s see how it works.

The CSS

Here is the CSS code for our interactive email. Hyperlinks can have four states: a:link, a:visited, a:hover, and a:active.

  • a:link is a selector that selects unvisited links.
  • a:visited selects visited links.
  • a:hover will select elements when someone hovers over them.
  • a:active selects an active link.

This example uses the a:hover selector to parse an event to switch out the top image with the bottom image.

<style type=”text/css”>
.rollover:hover .rollover-main {
max-height: 0px !important;
}
.rollover:hover div img {
max-height: none !important;
}
</style>

The HTML

Because some email clients don’t respect the interactivity of this email, specifically Outlook, we have to wrap the interactive section in Microsoft Outlook (MSO) conditional statements.

Here’s an example of how the email renders in Outlook 2010 without the MSO conditional statement hiding the interactivity. You can see how the client is rendering both images. Ultimately this is happening because the render engine doesn’t respect the <div> tag the second image is in, and therefore you see this.

How an interactive email renders when fallbacks aren't supported

These two images are basically stacked, wrapped in an anchor tag, with one image inside the <td> tag on top of the other inside a <div> tag having a class that parses an event when it gets hovered over. The classes attached to the image the <td> tag make the top image disappear on a hover event and display the other image in the <div> tag.

<!-- START INTERACTIVE SECTION -->

<!--[if !mso]><!-->
<span style="padding:0px 0px 0px 0px;"><a class="rollover" href="#"><img class="rollover-main" src="https://marketing.emailonacid.com/hubfs/2019EmailImages/InteractiveCPKmail/red_01.jpg" width="600" alt="" border="0" style="display:block;width:100%;max-width:600px;" /></a></span>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap">
<tr>
<td align="center" valign="top" bgcolor="#FFFFFF"><table role="presentation"  align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;" bgcolor="#FFFFFF">
<tr>
<td valign="top" align="center" bgcolor="#FFFFFF" style="padding:0px 0px 0px 0px;"><table role="presentation"  width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td valign="middle" align="center" bgcolor="#FFFFFF" style="padding:0px 0px 0px 0px;"><a class="rollover" href="#">
<div> <img src="https://marketing.emailonacid.com/hubfs/2019EmailImages/InteractiveCPKEmail/green_01.jpg"  width="600" alt="" border="0" style="max-height:0px;display:block;width:100%;max-width:600px;"></div>
</a></td>
</tr>
</tbody>
</table></td>
</tr>
</table></td>
</tr>
</table>
<!--<![endif]-->

<!-- END INTERACTIVE SECTION -->

The Fallback

The fallback is needed for email clients that don’t respect interactivity, like what happened with the email in Outlook 2010. An opening and closing MSO statement wraps the fallback and ensures it only renders on Outlook versions that require it.

<!-- START FALLBACK SECTION -->

<!--[if gte mso 9]>
<center>
<table class="fallback" border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table class="fallback" border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="padding:20px 0px 20px 0px; width:600px;">
<tr>
<td align="center" valign="top"><img src="https://marketing.emailonacid.com/hubfs/2019%20Email%20Images/Interactive%20CPK%20Email/Interactive_FALLBACK.jpg" width="600" style="width:600px;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<![endif]-->

<!-- END FALLBACK SECTION -->

The trick with interactive emails is targeting specific clients the interactivity will work on. Plus, you want to make sure the email has no other rendering issues for the clients that don’t support interactivity.

Push the Email Envelope

Did we succeed in both delivering an engaging interactive experience and illustrating some of Campaign Precheck’s capabilities? Let us know in the comments. We hope this experiment motivates you to take a chance with an interactive email that provides value to readers too.

Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Email on Acid offers unlimited email testing on more than 90 clients and devices, so you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today

Author: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

Author: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

2 thoughts on “Our Experiment with an Interactive Email Design”

  1. Love this, but unfortunately, our ESP Emma can’t handle a simple rollover which is pretty ridiculous in 2019…half the time their platform is full of “bugs” on top of not having the ability to handle simple HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies