How to Create an Awesome Interactive Email

In this digital world, interactivity has emerged as one of the most engaging elements for enhancing user experience.

You might already be familiar with interactivity on the Mercedes or BMW website - where visitors can visualize a car in different colors and patterns just by shifting a few sliders and clicking a few buttons.

What if you could do the same thing in an email?

By scrolling down on this email on the right, you can see a bus steering through a meadow, with different locations shown as milestones.

While websites adapted interactivity over a decade ago, email going interactive is a much applaudable feat considering interactive email is purely powered by CSS animation.

Most brands now include some or other form of interactivity in their emails to improve the user experience.

This article will introduce you to interactive email design and how to add interactivity to your emails.

Being Hands-on with Interactive emails

Ever since CSS was adopted to style plain looking HTML code of an email in late 2014 (and also modern email client getting CSS3 support), interactive emails have become all the rage amongst the big, corporate email marketers to provide a unique experience to their subscribers.

They believe that the number one email marketing tip is that more time an subscriber spends on their email, the more are their chances of being converted. It might not be as elaborate as the interactivity that you see in websites since Javascript and Flash are disabled in emails owing to security concerns.

Thankfully, with the help of CSS animations, you can experience interactivity ranging from as simple as a tabbed content with Accordion effect…

…to as complex as having a game right in your inbox.

Creating an email such as Super Mail Quest (shown above) requires a lot of time (almost a year with numerous changes) and sometimes you do need to learn to walk before you can fly and so we shall look into adding an image slider in this tutorial article.

A guide to creating an interactive image slider in your email

Even though a picture conveys a thousand words, adding more than two images in your email eats up precious real estate which increases the length of your email.

This is a serious challenge especially for eCommerce and online retailers who rely on images of their products to sell.

An interactive image slider can stack multiple images, which reduces the length of the email facilitating users browsing through them on interaction.

Interactivity in emails is like ingredients in a recipe, don’t add it for the sake of it. It needs to increase the existing flavor. This means that planning for an interactive email begins with the design phase.

Let’s assume that you have 6 images to display in the first fold of the email followed by some textual description of your products.

What needs to be kept in mind is that if your email width is 600px, you need to design the image slider of 500-550 width to avoid horizontal scrolling:

Certain interactive email elements such as accordion effect are created for mobile devices specifically.

In such cases, you also need to create a separate mobile layout.

An image slider is currently supported on iOS mail, Apple Mail, Thunderbird, Android Native and Samsung Mail. For those who are using any other non-compliant email clients, you need to create a fallback design in order to avoid sending a broken email.

In case of an image slider, you can either display all the images that are stacked together as a fallback...

Or only show a primary image and hide others...

In case you are displaying all images in the fallback, take a note that your fallback email in the mobile layout will be extra-long.

Tips to remember:

  • Always use retina images. If your image slider is 550px, your images need to be of 1100px.
  • Have two set of the same image. One for the thumbnail and other one is your actual image.

Coding the Image Slider – Made Simple!

As stated earlier, interactivity is possible using CSS animation wrapped around an HTML code. The CSS class is specified in the tag of an email and it is referenced in the tag of the HTML.

For your ease, we have created the CSS code for an interactive image slider with 6 images:

Check it out by clicking on this text, then just copy and paste!

<!--[if !mso]><!-->  
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">  
<!--<![endif]-->  
<style type="text/css" id="hs-inline-css">body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }  
img { border: 0 !important; outline: none !important; }  
p { Margin: 0px !important; Padding: 0px !important; }  
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }  
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }  
img td, div { line-height: normal; }  
.ExternalClass * { line-height: 100%; }
.em_black a { color: #000000; text-decoration: none; }
.em_yellow a { color: #e6b705; text-decoration: underline; }
.em_btn a { color: #f0c61a; text-decoration: none; }
input { display: none !important; }

@media screen and (max-width:9999px) {
.cboxcheck:checked + .thumb-carousel, * [summary=cboxcheck]:checked + [summary^=thumb-carousel] { height: auto !important; max-height: none !important; line-height: 0; }
.thumb-carousel span, * [summary^=thumb-carousel] span { font-size: 0; line-height: 0; }
.cboxcheck:checked + .thumb-carousel .tab-content, * [summary=cboxcheck]:checked + [summary^=thumb-carousel] [summary^=content] { display: none; max-height: 0px; overflow: hidden; }
.thumb-carousel .cbox1:checked + span .content-1, .thumb-carousel .cbox2:checked + span .content-2, .thumb-carousel .cbox3:checked + span .content-3, .thumb-carousel .cbox4:checked + span .content-4, .thumb-carousel .cbox5:checked + span .content-5, .thumb-carousel .cbox6:checked + span .content-6, * [summary^=thumb-carousel] [summary=cbox1]:checked + span [summary=content-1], * [summary^=thumb-carousel] [summary=cbox2]:checked + span [summary=content-2], * [summary^=thumb-carousel] [summary=cbox3]:checked + span [summary=content-3], * [summary^=thumb-carousel] [summary=cbox4]:checked + span [summary=content-4], * [summary^=thumb-carousel] [summary=cbox5]:checked + span [summary=content-5], * [summary^=thumb-carousel] [summary=cbox6]:checked + span [summary=content-6] { display: block !important; max-height: none !important; overflow: visible !important; }
.thumb-carousel .thumb, * [summary^=thumb-carousel] [summary=thumb] { cursor: pointer; display: inline-block; width: 45px; height: 55px; margin-top: 25px; background-position: center; }
.thumb-carousel .thumb:hover, * [summary^=thumb-carousel] [summary=thumb]:hover { }
.thumb-carousel input:checked + span > span.thumb, * [summary^=thumb-carousel] [summary^=cbox]:checked + span > span.thumb { }
.thumb-carousel img, * [summary^=thumb-carousel] img { max-height: none !important; }
.cboxcheck:checked + .fallback { display: none !important; display: none; max-height: 0px; height: 0px; overflow: hidden; }
* [lang="x-cboxcheck"]:checked + [lang="x-fallback"] { max-height: 0px; height: 0px; overflow: hidden; }
}

@media screen and (max-width:599px) {
.car-table.responsive:not(.inset), .car-table.responsive .thumb-carousel:not(.inset), .car-table.responsive .thumb-carousel:not(.inset) .tab-content img, .car-table.responsive .fallback:not(.inset) .tab-content img { width: 100% !important; height: auto; }
.thumb-carousel .thumb, * [summary^=thumb-carousel] [summary=thumb] { cursor: pointer; display: inline-block; width: 13%; margin: 15px 3px 0px 5px; height: auto; border-right: none; }
.thumb-carousel .thumb img, * [summary^=thumb-carousel] [summary=thumb] img { width: 20%; height: auto; }
}

@media only screen and (min-width:481px) and (max-width:699px) {
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_side { width: 12px !important; }
.em_height { height: 30px !important; }
.em_pt20 { padding-top: 20px !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.thumb-carousel { width: 100% !important;  height: auto !important; }
}

@media only screen and (max-width:480px) {
.em_wrapper { width: 100% !important; }
.em_wrapper1 { width: 100% !important; }
.em_hide { display: none !important; }
.em_side { width: 12px !important; }
.em_height { height: 30px !important; }
.em_pt20 { padding-top: 20px !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.thumb-carousel { width: 100% !important; height: auto !important; }
}
</style>  
<!--[if gte mso 9]>  
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]--></p>

And the HTML code is as follows:

Check it out by clicking on this text, then just copy and paste!

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">  
    <tbody><tr>
        <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="width:100%;" class="em_wrapper">
            <tbody><tr>
                <td valign="top">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="width:100%;" class="em_wrapper">
                <tbody><tr>
                <td width="75" style="width:75px;" class="em_side"> </td>
                <td valign="top" align="center"><table width="550" border="0" cellspacing="0" cellpadding="0" align="center" style="width:550px;margin:0 auto;" class="em_wrapper">
                    <tbody><tr>
                    <td><!--[if !mso]><!-- -->
                                                                 <input type="radio" class="cboxcheck" summary="cboxcheck" style="display:none !important;" checked="">
                                                                   <div class="thumb-carousel " summary="thumb-carousel" style="width:550px;height:0px;max-height:0px;overflow:hidden;text-align:center">
                                                                    <label>
                                                                     <span>
             <input type="radio" name="car-rd1" class="cbox6" summary="cbox6" style="display:none !important;">
                                                                         <span>
                                                                        <label>
                                                                        <span>
             <input type="radio" name="car-rd1" class="cbox5" summary="cbox5" style="display:none !important;">
    <span>
                                                                            <label>
             <input type="radio" name="car-rd1" class="cbox4" summary="cbox4" style="display:none !important;">
    <span>
        <label>
            <input type="radio" name="car-rd1" class="cbox3" summary="cbox3" style="display:none !important;">
    <span>
        <label>
            <input type="radio" name="car-rd1" class="cbox2" summary="cbox2" style="display:none !important;">
    <span>
        <label>
            <input type="radio" name="car-rd1" class="cbox1" summary="cbox1" style="display:none !important;" checked="">
    <span>
        <div class="content-1 tab-content" summary="content-1"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_a.png" class="em_full_img" width="550" height="" alt="Design & Coding" style="display:block;" border="0"></a></div>
        <div class="content-2 tab-content" summary="content-2"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_b.png" class="em_full_img" width="550" height="" alt="Custom Templates" style="display:block;" border="0"></a></div>
        <div class="content-3 tab-content" summary="content-3"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_c.png" class="em_full_img" width="550" height="" alt="Credentials" style="display:block;" border="0"></a></div>
        <div class="content-4 tab-content" summary="content-4"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_d.png" class="em_full_img" width="550" height="" alt="Interactive Addons" style="display:block;" border="0"></a></div>
        <div class="content-5 tab-content" summary="content-5"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_e.png" class="em_full_img" width="550" height="" alt="Interactive Addons" style="display:block;" border="0"></a></div>
        <div class="content-6 tab-content" summary="content-6"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_f.png" class="em_full_img" width="550" height="" alt="Interactive Addons" style="display:block;" border="0"></a></div>
          <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon1.png" alt="Design & Coding" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
        <img alt="" src="https://emailmonks.com/interactive/download_seq_menu.php?puid=721" width="1" height="1" border="0">
    </span>
        </label>
           <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon2.png" alt="Custom Templates" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
    </span>
        </label>
           <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon3.png" alt="Credentials" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
    </span>
        </label>
    <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon4.png" alt="Interactive Addons" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
    </span>
                                                                            </label>
                                                                            <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon5.png" alt="Interactive Addons" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
                                                                          </span>
                                                                            </span></label>
                                                                            <span class="thumb" summary="thumb"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/icon6.png" alt="Interactive Addons" width="35" height="45" class="em_full_img" style="display:inline; max-width:35px;" border="0"></span>
                                                                          </span>
                                                                            </span></label>
                                                                        </div>
                                                                        <input type="radio" class="cboxcheck" lang="x-cboxcheck" style="display:none !important;" checked="">
                                                                        <!-- <![endif]-->
                                                                       <div class="fallback" lang="x-fallback">
                                                    <div class="tab-content" summary="tab-content">
                                                        <table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
                                                            <tbody><tr>
                                                                <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                        <tbody><tr>
                                                                            <!--S1-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_a.png" class="em_full_img" width="270" height="" alt="Design & Coding" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E1-->
                                                                            <td width="10"> </td>
                                                                            <!--S2-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_b.png" class="em_full_img" width="270" height="" alt="Custom Templates" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E2-->
                                                                        </tr>
                                                                    </tbody></table></td>
                                                            </tr>
                                                            <tr>
                                                                <td height="10" style="line-height:0px; font-size:0px;"><img src="https://emailmonks.com/images/20150830spacer.gif" width="1" height="1" alt="s"></td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                        <tbody><tr>
                                                                            <!--S3-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_c.png" class="em_full_img" width="270" height="" alt="Credentials" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E3-->
                                                                            <td width="10"> </td>
                                                                            <!--S4-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_d.png" class="em_full_img" width="270" height="" alt="Custom Templates" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E4-->
                                                                        </tr>
                                                                    </tbody></table></td>
                                                            </tr>

                                                            <tr>
                                                                <td height="10" style="line-height:0px; font-size:0px;"><img src="https://emailmonks.com/images/20150830spacer.gif" width="1" height="1" alt="s"></td>
                                                            </tr>
                                                            <tr>
                                                                <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                        <tbody><tr>
                                                                            <!--S5-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_e.png" class="em_full_img" width="270" height="" alt="Credentials" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E5-->
                                                                            <td width="10"> </td>
                                                                            <!--S6-->
                                                                            <td valign="top"><a href="#" target="_blank"><img src="https://emailmonks.com/interactive/Slider_in_email_Sample/images/slider_f.png" class="em_full_img" width="270" height="" alt="Custom Templates" style="display:block; max-width:270px;" border="0"></a></td>
                                                                            <!--E6-->
                                                                        </tr>
                                                                    </tbody></table></td>
                                                            </tr>

                                                        </tbody></table>
                                                    </div>
                                                </div>

                                                </td>
                                        </tr>

                                    </tbody></table></td>
                                <td width="75" style="width:75px;" class="em_side"> </td>
                            </tr>
                        </tbody></table></td>
                </tr>
            </tbody></table></td>
    </tr>
</tbody></table>  

In the above code, edit the A tag (a href) to change the link where the subscriber shall be redirected when they click the image. And change the image tag (img src) to change the image that is displayed on the image slider.

Final Product

Congratulations! By adding both the codes to your existing email template, you have successfully added an image slider to your email. For those who wish to avoid the hassle of coding from scratch can try navigation Menu and image Slider using an interactive DIY tool.

Wrapping Up

The advantage of sending an interactive email is increased email engagement since the message of the email, is progressively shown to the subscribers only when they interact with the email helping boost curiosity.

You must be wondering, “if interactive emails can increase email engagement, why are there not many interactive emails”?

The prime reasons are...

  • The code is not reusable
  • It takes more time in development and even more time in testing the rendering across different email clients.
  • Certain ESP-specific restrictions strip away the code (e.g. MailChimp)
  • Certain interactive email elements need a fallback to avoid sending a subscriber a broken email, which means additional time in designing an email.

So, make sure that you allocate ample amount of time in developing an interactive email and use tools such as Email on Acid and Litmus to test the rendering across different email clients.

Author Bio:

Kevin George - the Head of Marketing at leading email design and coding brand, EmailMonks - specializes in crafting beautiful email templates, PSD to HTML email conversion and email templates HTML free. He loves gadgets, bikes, jazz, and breathes ‘email marketing.’ He enjoys sharing his insights and thoughts on email marketing tips and best practices at his email marketing blog.