How to Create a “Scratch Off” Effect in Email HTML
The team at Email on Acid wanted to do something extra special to announce our Month of Giving holiday contest. So we came up with a fun design featuring “Email Gnomes” to give away gifts. At the centerpiece of this email, we designed a scratch-off ticket. Now, “scratch off” functionality doesn’t really exist in email—at least not yet. That’s where coding magic comes into play.
Table of content
Scratch-Off Email: Creating the Functionality
This interactive email renders in three stages. The interactivity is a "touch to unveil" function that reveals an animated GIF. This is what gives the illusion of a scratch off. Here are three scenarios how the "scratch off" will play out:Scenario 1
If the email client supports the interactivity, then the functionality will display the animated GIF.Scenario 2
If there isn’t support for interactivity, just the animated GIF will play.Scenario 3
The fallback will display if there's no support for the interactivity or GIF.The Process
There are three different types of email clients, mobile, desktop, and web. Before building the email, we created the interactivity, and tested it—ensuring it worked properly. We built it with no content, and used images from Placeholder.com. These placeholder images can be set to any size, and you can set custom text. Here’s an example of what was used: https://via.placeholder.com/500x500/?text=Touch To Unveil Image https://via.placeholder.com/500x500/?text=Main Offer Animated GIF http://via.placeholder.com/500x500/?text=FALLBACK Through this technique, and by running tests through Email on Acid, we were able to identify what scenario applied to the email (1,2, or 3). Here’s an example of the interactivity working. The touch to unveil image is what you tap to play the animated GIF.
Here’s an example of the fallback working. This will display in the email clients that don’t support the interactivity, or the animated GIF.
Here’s an example of the animated GIF working.
The CSS
Add this code below between the<head></head> tags of the email. Don’t add it to any media queries you have in place for responsive design.
Using this WebKit media query, you can target email clients that support the :checked selector. The two CSS classes are created, .touch and .unveil. Then they combine as an ID with the tilde ~ and asterisk * before the class .unveil to address all interactive elements.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.touch {
display: block !important;
mso-hide: all !important;
}
.unveil {
display: none
}
#touchunveil:checked ~ * .unveil {
display: block !important;
}
#touchunveil:checked ~ * .touch {
display: none !important;
}
}:checked selector is a pseudo-class that lets the user toggle content based on the state of a checkbox, all without using JavaScript. The selector represents any radio input using <input type=”radio”>. This applies the #touchunveil ID from the WebKit here. Below is the setup for the radio button that will unveil the animated GIF and let it play. The way the style tag is coded ensures it won’t show up in the scratch-off email.
<!--[if mso]><!-->
<input type="radio" name="touchunveil" id="touchunveil" style="mso-hide:all;display:none!important;height:0px;max-height:0px;overflow:hidden;font-size:0;margin-left:-10000px;">
<!--<![endif]-->:checked selector here.
The HTML
Wrapped in a Microsoft Outlook conditional statement, and referencing the WebKit classes in the CSS the table with the.touch class is displaying the first image. The table with the class of .unveil is not displaying, but will appear when the image with the.touch class is activated by being tapped. The image is wrapped in a label tag with name="touchunveil" id="touchunveil” and it activates the radio button input to switch out the image to the animated GIF of the scratch off.
<!--[if !mso]><!-->
<table width="600" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="width:100%; max-width:600px;">
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><!-- Touch to Unveil -->
<table role="presentation" width="600" style="width:100%; max-width:600px;" cellpadding="0" cellspacing="0" border="0" align="center" class="100w">
<tr>
<td align="center" valign="top"><!-- Main Offer Scratch Off -->
<table class="unveil 100w" width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:600px;mso-hide:all;">
<tr>
<td valign="middle" align="center" bgcolor="#FFFFFF"
style="color:#000001; font-family:serif; font-size:14px; mso-line-height-rule:exactly;line-height:22px; font-weight:400; padding:16px 0px 0px 0px;"
class="em_padnon"> </td>
</tr>
<tr>
<td align="center"><a href="https://marketing.emailonacid.com/month-of-giving"><img src="https://marketing.emailonacid.com/hs-fs/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-ScratchOff2.gif?upscale=true&name=2019Holiday-Email-ScratchOff2.gif" width="100%" height="auto" style="display:block;width:100%;max-width:600px;height:auto;" alt="Enter here for a chance to win one of our FREE EMAIL GIFTS! – LET’S GO" border="0" class="100w"></a></td>
</tr>
</table>
<table class="touch" width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-hide:all; display:none;">
<tr>
<td valign="middle" align="center" bgcolor="#FFFFFF"
style="color:#000001; font-family:serif; font-size:14px; mso-line-height-rule:exactly;line-height:22px; font-weight:400; padding:16px 0px 0px 0px;"
class="em_padnon"><i>Click the gift below to find out you can win yours:</i></td>
</tr>
<tr style="mso-hide:all">
<td align="center" style="mso-hide:all"><!-- Touch to Unveil Image -->
<label for="touchunveil"> <img class="100w" border="0" src="https://marketing.emailonacid.com/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-PreScratch.jpg" width="100%" style="width:100%;max-width:600px; display:block; mso-hide:all; height: auto;" alt=""> </label></td>
</tr>
</table></td>
</tr>
</table>
<!-- // End Touch to Unveil --></td>
</tr>
</table>
<!--<![endif]-->The Fallback
In the event you’re stuck with the third scenario (neither the functionality nor GIF rendering), you’re going to need a fallback of some sort—same as every other interactive email. Sometimes the fallback is just the interactivity not working, which actually makes developing a bit easier. In this example, the fallback is a static image that displays in clients that don’t support the interactivity or the GIF animation.<!--[if gte mso 9]>
<center>
<table border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
<tr>
<td align="center" valign="top">
<table border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4" style="padding:0px 0px 0px 0px; width:600px;">
<tr>
<td align="center" valign="top"><img src="https://marketing.emailonacid.com/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-FallbackImage.jpg" width="600" style="width:600px;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<![endif]-->Targeting Outlook.com and Office 365 via CSS
As we were close to completing the email, we noticed the GIF animation wasn’t playing in Outlook.com or Office 365 web clients. The interactivity wasn’t working, so the first image wasn’t disappearing. We needed to find a way to target these clients. By checking out How to Target Email Clients and some experimentation, we were able to target the web clients to render correctly and display the animated GIF upon the user opening the scratch-off email. Example:[class=“x_foo”] { }[class~="x_unveil"] {
display: block !important;
}
[class~="x_touch"] {
display: none !important;
}Seriously…Testing is Important
Above all, when creating any type of interactive functionality, it is crucial to QA and test it. We tested our email live in Samsung Mail, Apple Mail, Outlook 2019 Mac Desktop, Outlook.com web client, and Office 365 web clients. Using Email on Acid and the actual live email client previews to validate the syntax was parsing correctly, we were able to catch an issue with Outlook.com and Office 365. We were also able to render in 98 out of 99 email clients. And in some of the email web clients where we couldn’t do a live test, we could still see the Animated GIF working. Here’s the example…
The End Result
Pretty amazing huh! No marketing email ever comes easy. There were plenty of last-minute creative changes before we deployed. But through those changes, the core of the code remained the same—a combination of touch to unveil and animated GIF (with fallbacks, of course).
