Interactive E-mail Instance HTML and CSS with Outlook Fallbacks

By Paul Kirby and Ed Ball

If you ship an interactive e mail, it’s vital to contemplate not simply what code tips you’re going to make use of, but in addition what you’re utilizing interactivity for. With out a strategic aim, interactivity is only a method to get consideration, and doesn’t provide way more than a standard e mail would. With a transparent function, you should utilize interactive methods to supply extra worth to readers. Ultimately, you’ll ship an expertise {that a} static e mail can’t match. Our interactive e mail instance aimed to realize simply that.

With the interactive e mail we despatched final month, our aim was as an example how rapidly and simply our Marketing campaign Precheck workflow finds and resolves content material points. Step one was creating each earlier than and after variations of an e mail with a handful of issues. Our good designer Rachel gave us that, with a brief e mail sitting contained in the picture of a cellphone.

Right here’s a barely modified model of the unique ship:

Try the interactive model

However we additionally wanted a approach so that you can work together with the e-mail and repair the problems. That’s the place our developer Ed got here in.

Coding Rollover Have an effect on

Making a responsive rollover approach in an e mail is a enjoyable method to take some easy performance and make an fascinating interactive e mail. E-mail on Acid’s e mail is interactive in some purchasers and requires a fallback in others so it renders effectively for each subscriber. Let’s see the way it works.

The CSS

Right here is the CSS code for our interactive e mail. Hyperlinks can have 4 states: a:hyperlink, a:visited, a:hover, and a:lively.

• a:hyperlink is a selector that selects unvisited hyperlinks.
• a:visited selects visited hyperlinks.
• a:hover will choose parts when somebody hovers over them.
• a:lively selects an lively hyperlink.

This instance makes use of the a:hover selector to parse an occasion to change out the highest picture with the underside picture.

<model sort=”textual content/css”>
.rollover:hover .rollover-main {
max-height: 0px !vital;
}
.rollover:hover div img {
max-height: none !vital;
}
</model>

The HTML

As a result of some e mail purchasers don’t respect the interactivity of this e mail, particularly Outlook, now we have to wrap the interactive part in Microsoft Outlook (MSO) conditional statements.

Right here’s an instance of how the e-mail renders in Outlook 2010 with out the MSO conditional assertion hiding the interactivity. You may see how the consumer is rendering each pictures. In the end that is occurring as a result of the render engine doesn’t respect the <div> tag the second picture is in, and subsequently you see this.

These two pictures are principally stacked, wrapped in an anchor tag, with one picture contained in the <td> tag on prime of the opposite inside a <div> tag having a category that parses an occasion when it will get hovered over. The lessons hooked up to the picture the <td> tag make the highest picture disappear on a hover occasion and show the opposite picture within the <div> tag.

<!-- START INTERACTIVE SECTION -->

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

<!-- END INTERACTIVE SECTION -->

The Fallback

The fallback is required for e mail purchasers that don’t respect interactivity, like what occurred with the e-mail in Outlook 2010. A gap and shutting MSO assertion wraps the fallback and ensures it solely renders on Outlook variations that require it.

<!-- START FALLBACK SECTION -->

<!--[if gte mso 9]>
<middle>
<desk class="fallback" border="0" width="600" align="middle" valign="prime" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="middle" valign="prime">
<desk class="fallback" border="0" width="600" align="middle" valign="prime" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" model="padding:20px 0px 20px 0px; width:600px;">
<tr>
<td align="middle" valign="prime"><img src="https://advertising and marketing.emailonacid.com/hubfs/2019percent20Emailpercent20Images/Interactivepercent20CPKpercent20Email/Interactive_FALLBACK.jpg" width="600" model="width:600px;" /></td>
</tr>
</desk>
</td>
</tr>
</desk>
</middle>
<![endif]-->

<!-- END FALLBACK SECTION -->

The trick with interactive emails is focusing on particular purchasers the interactivity will work on. Plus, you wish to make sure that the e-mail has no different rendering points for the purchasers that don’t help interactivity.

Push the E-mail Envelope

Did we reach each delivering an enticing interactive expertise and illustrating a few of Marketing campaign Precheck’s capabilities? Tell us within the feedback. We hope this experiment motivates you to take an opportunity with an interactive e mail that gives worth to readers too.