Flashy, eye-catching graphics – social media has educated us to have a brief consideration span, however how will you capitalize on this in your electronic mail campaigns? In spite of everything, as a marketer, you’re all the time searching for a greater technique to spotlight electronic mail content material and interact your readers. Nicely, we’ve received two phrases for you: interactive emails.
By utilizing interactive photographs with hover and scrolling results or by including animated GIFs, accordions, countdown timers, and carousels, you may design content material to snag your readers’ consideration to extend engagement and increase conversion charges and click-through charges.
Unsure the place to get began? We’ve received you. We’ll clarify why it’s best to use interactive photographs and methods to code interactive components in emails.
Why use interactive photographs in electronic mail?
If a picture is price a thousand phrases, how a lot is an interactive picture price? Whereas this isn’t precisely quantifiable, listed here are some causes to incorporate interactive electronic mail content material in your subsequent electronic mail advertising marketing campaign:
- Enhance engagement. Use interactive components to allow readers to enter info into types, scroll, and browse with out leaving their inbox. By lowering friction within the consumer expertise, you encourage your subscribers to interact extra together with your content material.
- Enhance conversions. By growing engagement, you’ll improve your conversion price. Readers usually tend to click on via to your touchdown web page in the event that they discover your electronic mail partaking.
- Stand out from the gang. Everyone knows inboxes are crowded, and simply because your topic line satisfied readers to open your electronic mail doesn’t imply they’re going to click on via to your web site. Interactive photographs catch and maintain your reader’s consideration, encouraging engagement and click-throughs.
4 methods to code interactive photographs in your electronic mail designs
Now that we’ve coated “why,” let’s get cracking on the “how.” This part particulars 4 other ways to code interactive content material into your emails, together with:
- Including hover animations
- Creating side-scrolling photographs
- Designing picture carousels
- Embedding animated GIFs
You’ll want a working data of Hypertext Markup Language (HTML) and Cascading Type Sheets (CSS) for the next subsections. Want a refresher? Take a look at our article on the fundamentals of electronic mail growth.
With out additional ado, let’s dive in!
1. Add hover animations
Let’s learn to add a hover impact to a picture in your electronic mail. Let’s begin with this graphic:
It appears to be like good. However we will do higher. With a bit coding, we will make it interactive. We would like our icons to invert colours when subscribers hover over them, like this:
Though this will look difficult, the implementation is pretty easy. Take a look at the next code snippet:
<desk width="100" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="iconArea1BG">
<img src="https://www.emailonacid.com/weblog/article/email-development/using-interactive-email-to-highlight-content/photographs/icon1-2.jpg" width="100" model="border-width:0;width:100%;max-width:100px;peak:auto;" id="iconArea1">
</td>
</tr>
</desk>All three icons are coded in the identical method. We use a desk <desk> and a cell <td> to include the picture. You’ll discover the cell has a class of iconArea1BG and the picture itself has an id of iconArea1.
The following step is including some CSS to the <model> part within the <head> to deal with the hover impact. We’ll have to reference each the class and id talked about. The next code switches a picture from full opacity to zero opacity when your reader hovers over it:
#iconArea1:hover {
opacity: 0;
transition: all 0.3s linear;
}Subsequent, we need to add the next code to the CSS within the <model> part that handles the class of iconArea1BG. With this snippet, we’ll add a background picture to the cell with the icon in it:
#iconArea1BG {
background-image: url(photographs/icon1-1.jpg);
background-repeat: no-repeat;
}By including these two items of CSS to the e-mail, we stipulate when somebody hovers over our picture, it’ll develop into clear. And when our picture turns into clear, the background picture hidden behind it turns into seen.
Everytime you use photographs in emails, it’s vital to set fallbacks in case sure electronic mail shoppers don’t render your photographs. When it comes to fallbacks, this piece of code works itself out. For any electronic mail shoppers that don’t help the :hover performance, they’ll merely see the usual icons. One technique to keep away from photographs being rendered incorrectly (or under no circumstances) is including a “view in browser” choice to make sure your electronic mail seems precisely the way you supposed.
2. Create side-scrolling photographs
You probably have many photographs or merchandise you need to showcase, a side-scrolling picture is likely to be simply the kind of interactive content material you want. This part, will cowl methods to code a side-scrolling picture like this into your HTML electronic mail template.
To attain this, we’ll create a large picture consisting of all the pictures we need to show, stitched collectively horizontally. (On this instance, we’ve stitched collectively a preview photographs of a number of Electronic mail on Acid’s templates.) Then, set this facet picture because the background picture and set it to scroll sideways.
First off, let’s create a fallback choice in case a selected electronic mail shopper doesn’t render background photographs. In different phrases, we’ll create a desk containing a picture inside a <div> with the class of fallback. Test it out:
<div class="fallback">
<desk width="100%" class="max-width:600px !vital;" border="0" cellspacing="0" cellpadding="0" class="100p">
<tr>
<td><img src="https://www.emailonacid.com/weblog/article/email-development/using-interactive-email-to-highlight-content/photographs/fallback.jpg" border="0" model="show:block;max-width:600px;" width="100%">
</td>
</tr>
</desk>
</div>Subsequent, add a CSS snippet to the <model> part of the <head> to outline when to indicate or conceal the fallback div. Particularly, we need to conceal this part if an electronic mail shopper renders the interactive side-scrolling picture. Right here’s what to do:
@media display and (-webkit-min-device-pixel-ratio: 0) {
.fallback {
show:none;
show:none!vital;
max-height:0;
overflow:hidden;
}
.interactive{
show:block!vital;
max-height:none!vital;
}
}Now we’ve created an energetic fallback, so let’s code our side-scrolling picture:
<div class="interactive" model="show:none;max-height:0;overflow:hidden;">
<desk width="100%" class="max-width:600px !vital;" border="0" cellspacing="0" cellpadding="0" class="100p">
<tr>
<td id="animate-area2" background="https://www.emailonacid.com/weblog/article/email-development/using-interactive-email-to-highlight-content/photographs/scroller.jpg" model="font-size: 0px; line-height: 0px; background:url(photographs/scroller.jpg) 0% 0% / cowl; background-size: cowl;" bgcolor="#7ac142" width="100%" valign="prime">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" model="width:120px;peak:300px;">
<v:fill kind="tile" src="https://www.emailonacid.com/weblog/article/email-development/using-interactive-email-to-highlight-content/photographs/scroller.jpg" shade="#7ac142" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="photographs/trans.png" width="100%" model="max-width:600px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</desk>
</div>There’s so much happening right here, however we’ll break it down little by little! We’ll begin with the div containing all the content material. This div is about to conceal by default, however we’ve reversed it within the embedded CSS snippet for electronic mail shoppers that may render it.
Subsequent, we’ll use Visible Markup Language (VML) to make sure our background picture renders on Microsoft Outlook.We even have to incorporate a clear PNG with the width and peak of the entire space to make sure we will nonetheless see all the background picture once we’re scaling the scale of the e-mail.
We even have an id set on the desk cell of animate-area2. That is how we deal with the animation of the part. We’ll add this CSS to the <head> part as nicely:
#animate-area2 {
width:650px;
background-image: url(photographs/scroller.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 45s linear infinite;
-moz-animation: animatedBackground 45s linear infinite;
-webkit-animation: animatedBackground 45s linear infinite;
}
@keyframes animatedBackground {
0% { background-position: 2400px 0; }
100% { background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 2400px 0; }
100% { background-position: 0 0; }
}
@-webkit-keyframes animatedBackground {
0% { background-position: 2400px 0; }
100% { background-position: 0 0; }
}With this code, our animation, animatedBackground, will transfer from its authentic place alongside the x-axis 2400 pixels to a brand new place. For the reason that picture’s width is 2400 px, this creates a scrolling impact. Set the animation to infinite to create a steady scrolling impact.
And we’re nearly accomplished! We’ll add a closing piece of interplay to let our reader pause the animation via hovering. This manner, it’s simple to learn the textual content contained in our photographs. Do that by including a :hover model like this:
#animate-area2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}3. Design picture carousels
In search of a unique technique to showcase many photographs? Strive utilizing a picture carousel. On this part, we’ve used a sequence of photographs of audio system from an Electronic mail on Acid meetup to create a picture carousel. We additionally added captions to show the speaker’s title and their presentation title:
Take a look at the code for this sort of picture carousel in a tutorial from electronic mail developer, Justin Khoo.
One factor to notice is Gmail doesn’t help attribute selectors. Sadly, picture carousels don’t work inside Gmail.
4. Embed animated GIFs
Animated GIFs have lengthy been a staple of the e-mail advertising trade. They’re extremely strong and have strong help in most electronic mail shoppers. They’re additionally a fast method so as to add interactive content material to your electronic mail design.
Take a look at our different article to be taught extra about utilizing GIFs in your emails.
Wrapping up
And that’s it. Do you could have examples of interactive electronic mail that highlights content material nicely? Tell us within the remark part under. Or, should you’re all for different methods so as to add interactivity to your emails, take a look at our article on AMP for electronic mail.
With any electronic mail marketing campaign, interactive or not, probably the most vital components of the method is testing. A damaged electronic mail marketing campaign will value you in ROI and model picture. We’ve received you coated with our electronic mail testing in over 55 totally different electronic mail shoppers. Strive Electronic mail on Acid free for seven days.
This text was up to date on October 24, 2022. It was first printed in November of 2016.
Creator: The Electronic mail on Acid Group
The Electronic mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.
Creator: The Electronic mail on Acid Group
The Electronic mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.
