Interactive Email for Beginners: 6 Interactive Elements You Can Add to Your Emails Today

In the beginning of 2017, we asked over 1,200 email marketers about what they think will be the biggest email trend of the year. Interactive email lead the list, with 27% of marketers saying that 2017 would be the year of interactive email. And indeed, we did see some truly inspiring interactive emails, including these masterpieces from Nest, B&Q, and Burberry. (We also sent an interactive newsletter in November! Check it out here.)

However, interactivity in email is far from becoming mainstream. According to our State of Email Creative research, 85% of all email respondents have not experimented with interactive email yet. So far, interactivity seems to be the playing field of big-name brands with email teams that have truly mastered the art of advanced email. For small email teams or email beginners, interactivity still seems out of reach.

Getting started with interactive email

The secret is to start small. Adding simple interactive elements to your email designs can have a major impact, make your emails more engaging, and uplevel your subscribers’ experience.

At Litmus Live Boston 2017, Alice Li, Email and Web Developer at Shutterstock, shared her tricks for getting started with interactive email design, making her talk one of the most popular sessions of 2017’s conference.

We’re all used to experiencing interactivity and kinetic feedback when navigating the web and mobile apps. Why does that have to end at email? The more we add interactivity to our emails, the more it becomes expected rather than a novelty, ESPs will be compelled to expand their support for more advanced code, and we’ll be ever closer to providing a more seamless experience between web and email.
Alice Li, Shutterstock

Didn’t have the chance to attend Litmus Live in person? Today we’re bringing you the highlights of Alice’s session, with simple interactive elements that are ready for you to copy and customize for your campaigns.

 

Hover Effects: The first step to interactive email

Adding a hover effect is one of the simplest ways to introduce interactivity to your emails. Hover effects are most popular when it comes to highlighting text—for example, highlighting a text link in your email copy. They can also be a simple but powerful tool to make other elements—including images, background images, or calls-to-action—interactive and thus more engaging. Here’s how.

Hover Effects: Text

Supported in:

• AOL
• Apple Mail
• Yahoo! Mail
• Gmail

With hover effects, you can change nearly any aspect of your text on hover. For example, you can change its color, add a drop shadow, or add an underline.

Here’s an example of how you can change a link’s color from blue to red on hover:

Embedded CSS

.txt-color:hover { color: #8ddaeb !important; }

HTML – Text Hover Color Change

<!-- start TEXT HOVER COLOR CHANGE --> <a href="#" style="color:#43b9d3; text-decoration:none;"> <span style="line-height: 21px;" class="txt-color"> Change Color on Hover</span></a> <!-- end TEXT HOVER COLOR CHANGE -->

In your header, define a CSS class that specifies the color on hover. Then, in the body of your email, add a <span> tag referencing this class into your link’s <a> tag. (Adding the hover class to the <a> tag itself can cause flickering in certain clients, like Yahoo! Mail. Using a <span> tag helps avoid that issue.)

Hover effects: Fades

Supported in:

• AOL
• Apple Mail
• Gmail

Fading effects on hover are another simple but powerful element you can add to your templates. By controlling the opacity of any element—text, images, or tables, for example—and combining that effect with transitions, you can create smooth, gradual hover effects that can make your emails stand out.

Embedded CSS

.fade-slow{ transition: 0.3s !important; } .fade-slow:hover{ transition: 0.3s !important; opacity: 0.5 !important;}

HTML – Text Hover Opacity 50% / 0.3 Seconds

<a href="#" style="color:#43b9d3; text-decoration:none;"> <span style="font-size: 18px; line-height: 30px;" class="fade-slow"> Fade Text</span></a>

In this example, we use a hover effect to change the opacity of a text link to 50%, but rather than applying the change immediately, the transition effect set to 0.3 seconds helps smooth out the change in opacity. When using a transition effect, remember to not only set it on the class that defines the hover state, but also apply the transition to the original state. With that, the text fades smoothly on hover, and also smoothly returns to being solid when removing the mouse from the element.

Hover effects: Background Colors

Supported in:

• AOL
• Apple Mail
• Yahoo! Mail
• Gmail

Using a hover effect to change background colors comes in handy when you’d like to give your bulletproof buttons a bit of a special treatment.

Embedded CSS

.bg-rollover:hover { background-color: #585f6a !important; }

HTML

<table cellspacing="0" cellpadding="0" border="0"> <tr> <td bgcolor="#ee6d69" align="center"> <a href="" class="bg-rollover">Horizontal Expandable Block</a> </td> </tr> </table>

Use the above embedded CSS to add a simple color change on hover to your CTA buttons—like in this case, to make it change from red to grey on hover. Simply add the class “.bg-rollover” to the HTML element your bulletproof button is in where the background color is defined.

Hover Effects: Background Images

Supported in:

• AOL
• Apple Mail
• Yahoo! Mail
• Gmail

You can also swap out background images on hover, as we do in this example:

Embedded CSS

.bgimg-swap:hover {background-image: url('https://www.fillmurray.com/284/197' ) !important;}

HTML – Background Image Swap

<td class="bgimg-swap" background="http://www.fillmurray.com/g/284/197" bgcolor="#666666" width="284" height="197" valign="top">

In the CSS, you’re simply changing the background image URL on hover. You can combine it with a transition to achieve a fading effect (just as we saw it in the examples above). Plus, since it’s a background image rather than a regular image, you can layer elements on top of your image, including links, text, or floating image elements.

If you’re including multiple background images with hover effects—for example, if you’d like to include an interactive tile for every blog post you feature in your newsletter—this approach can become a bit cumbersome. That’s because each background image needs its own hover image to be specified in the CSS. So if you’d like to include multiple hover effects for multiple images, you’ll have to duplicate that class and remember to specify a hover image path for each of them.

Plus, since the hover replacement image isn’t loading until you actually hover over it, this approach can cause a less smooth experience when working with slow internet connections.

Hover Effects: Conventional Images

Supported in:

• AOL
• Apple Mail
• Yahoo! Mail
• Gmail

Of course you can also add hover effects to conventional images:

Embedded CSS

.img-swap:hover img { max-height: 0px !important; height:0px !important;}

HTML – Image Swap

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="284" height="196" background="http://www.fillmurray.com/g/284/196" bgcolor="#666666"> <a class="img-swap" style="display:block;width:284px;height:196px;"> <img style="display:block;" src="http://www.fillmurray.com/284/196" width="284" height="196" border="0"></a></td> </tr> </table>

In contrast to working with background images, conventional images allow you to specify the hover image in the body of your email rather than the CSS. This not only makes it easier for you to keep track of hover image paths for multiple images, but also ensures that you won’t experience any lag time in loading speed.

However, layering elements on top of an image doesn’t work—you’d have to work with the background image approach to make this happen. Plus, you can’t use transitions when working with hover effects for regular images. Alice explains why:

Hover Effects: Motion

Supported in:

• AOL
• Apple Mail
• Yahoo! Mail
• Gmail

You can also add a motion effect to your email, for example to highlight a CTA. Here’s an example:

Embedded CSS

.grow {transition: 0.3s !important;} .grow:hover {background-color: #298aae !important; height: 50px !important; position: relative !important; transition: 0.3s !important;}

HTML – Tab Pops Up & Changes Color

<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td height="60" align="center" valign="bottom" style="vertical-align:bottom;"> <table class="grow" border="0" width="270" height="30" cellpadding="0" cellspacing="0" bgcolor="#187395" align="center"><tr> <td align="center" height="30" valign="top" style="vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 19px; color: #ffffff; text-align:center; display:block; height: 30px;"> Pop-Up Tab </td></tr></table></td></tr></table>

What you see is a main CTA with a little pop-up tab on top of it that moves up on hover. The pop-up tab is a bottom aligned tab that lives inside a taller container. Hovering over the tab changes its color and increases its height—and since the tab itself is anchored to the bottom, this makes the tab pop up. Add a transition to it and you have the pop-up that grows slowly on hover.

Putting it all together

Here’s a Builder document putting together all of Alice’s interactive elements. Make sure you check it out to see the code in action:

Curious to see how these effects can work in a real email? Alice walks you through how she used the interactive elements above to make this Shutterstock email truly special:

 

Share the interactive email love

Ready to add these interactive elements to your next email? We’d love to see how you use them to uplevel your email campaigns. Share your email on the Litmus Community (you can use Litmus Scope for easy sharing or simply post a view-online link) and help inspire others to build their very first interactive email.

Share with the Community →

The post Interactive Email for Beginners: 6 Interactive Elements You Can Add to Your Emails Today appeared first on Litmus Software, Inc..