Using Interactive Email to Highlight Content

Interactive email is a topic hot on everybody’s lips; it’s what everyone wants to be sending out. Day by day we see new clever examples popping up, but to quote Elliot Ross, “Flashy design for no reason is confusing and awkward.” In this post, I’ll show you how I used interactive elements to highlight areas of our product in a recent email, and how good content can go hand-in-hand with interactive email.

The Goal

My goal with this email was to split it into clear content blocks, each block highlighting a different part of Email on Acid in a way that adds a bit of interactivity. In each section, I’ll explain how and why it was coded in the way it was, how we dealt with fallbacks, and the end product.

Take a look at the full email here. Make sure to use a webkit browser (like Chrome of Safari) so you can enjoy all the interactive goodness!

Forums – Hover Animation

The first area of Email on Acid I wanted to highlight was our forums. For this section, I decided to add three icons showing the benefits of joining and posting on our forums, as can be seen below;

Forums static

To add an element of interactivity to this section, I wanted to add a clever hover effect. When you hover over an icon, it gives the impression that the icon is reversing.

Forums animated

Although this may look a complicated piece of code the implementation is fairly simple. Let’s break it down.

All three icons are coded in the same way. We have a table and a cell to contain the image. You’ll notice that the cell has a class of iconArea1BG and the image itself has an id of iconArea1.

The next step is to add the CSS to the located in the . We’ll need to reference both the class and id seen above.

#iconArea1:hover {
	opacity: 0;
	transition:  all 0.3s linear;
}

This section is handling the id of iconArea1 we placed on the image. This piece of code is simply saying that when we hover over the image we want it to switch from full opacity, to zero opacity.

#iconArea1BG {
	background-image: url(images/icon1-1.jpg);
	background-repeat: no-repeat;
	
}

This piece of code is handling the class of iconArea1BG. With this snippet, we’re simply adding a background to the cell with the icon in it.

So, to recap, by adding these two pieces of CSS to the email we’re saying that when we hover over the image it will become transparent, enabling us to see the background hidden behind it.

In terms of fallbacks, this piece of code works itself out. For any clients that don’t support the :hover functionality, they’ll simply see the standard icons.

Email Templates – Side-Scrolling Image

The next thing I wanted to highlight was our free email templates. We have a fantastic selection of bullet-proof email templates that are completely free with a community account. It was important to me to show the wide variety of different templates we have.

Template infinite scroller

To achieve this, I created a wide image which consisted of multiple preview images of our templates. I then set it as the background image of the section and had it scroll infinitely. Unfortunately, it’s always trickier to code than to explain. So, let me show you how I coded this section!

First off, we have to deal with Android 5.1 and Gmail App with Non Google Accounts (GANGA) which will not display background images.

We simply contain a table inside a div with the class of fallback.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .fallback {
        display:none;
        display:none!important;
        max-height:0;
        overflow:hidden;
    }
    .interactive{
        display:block!important;
        max-height:none!important;
    }
}

By adding the above snippet of CSS to the head, we will ensure that any clients that will render our interactive section will hide the fallback div. By using a combination of all these hiding techniques, we can ensure a bulletproof hidden section.

So, now for the main section.

There’s a lot going on here, but we’ll break it down bit by bit! Let’s start with the div containing all of the content. This div is set to hide by default, which we reverse in the embedded CSS snippet above on clients that will render it.

Next up, we have some VML to ensure our background image renders on Microsoft Outlook clients. We also have to include a transparent PNG with the width and height of the whole area, to ensure that when we’re scaling the size of the email we can see the entire background image.

We also have an id set on the table cell of “animate-area2”. This is how we handle the animation of the section, as seen in the CSS below.

#animate-area2   { 
    width:650px;
    background-image: url(images/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; }
}

We’re simply saying here that our animation, named animatedBackground, we want it to move from its original position along the x axis by 2400 pixels, which is the width of the image. This is what creates the scrolling effect. We also set the animation to be infinite.

The final piece of interaction I added was to let the user be able to pause the animation on hover. This was done simply so they could read the information on the images, as it can be tricky to read as they scroll past. This was done by adding a :hover style as seen below.

#animate-area2:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}

Events – Image Carousel

Another element of our Email on Acid offering I wanted to promote was our recent dive into hosting events for the email community. For this section I wanted to show speakers from our first meetup, along with their names and presentation title. I decided to do this by adding a carousel in the email.

Events image carousel

To create a fully working bulletproof carousel I used the guide provided our email expert Justin Khoo. You can read how to achieve this over on his blog.

One thing to note is that with the recent Gmail changes they have dropped support for attribute selectors which, unfortunately, means this carousel won’t work within Gmail. However, that’s a fair price to pay for mobile responsiveness in Gmail, right?

Editor – Animated GIF

Our final section to highlight in the email was our awesome email editor.

Email Editor

I chose to use an animated GIF here. Animated GIFs have long been a staple of the email marketing industry. Not only are they incredibly robust, they boast exceptional support in most email clients. We still need to ensure the first frame of the GIF has the right content in it, as Outlook 2007, 2010, 2013 and 2016 will only render the first frame.

Final thoughts

I loved building this email. From the first concept the finalised piece, my goal was to create an email that used interactive features to highlight different areas of our product. I like to think I achieved this goal, but I’d love to hear your thoughts. Do you have examples of interactive email that highlights content well? Got a personal idea you want to show off? Let me know in the comment section.

With any email campaign, interactive or not, one of the most important parts of the process is testing. A broken email campaign can cost you in ROI and brand image. We offer email testing in over 55 different email clients, so try us free for 7 days!

Leave a Reply