5 New Ways to Use Interactive Email Elements

• Updated on: 2019-01-09
• Read original article here

If you’ve been to any recent email conference or summit, then you’re probably aware that interactive elements are some of the hottest email design trends. Not only do they entertain recipients, but they can also increase click-to-open rates and drive more conversions.

With the popularity of interactive email elements, it’s becoming more important to use interactivity in new and unique ways. Subscribers are starting to get used to the usual rollover effects and buttons, so if you really want to surprise and engage them, we recommend thinking outside of the interactive box.

In this post, we’ve put together some ideas for using common interactive elements in new ways.

Before we dive in, we should note that only some email clients support interactive elements. While support will depend on the code, roughly 90% of interactive emails work in Apple Mail and 50% work in Gmail. And you guessed it, almost nothing works in Outlook 2016.

You can check Campaign Monitor’s CSS support guideto see which email clients support which elements. This handy CSS animation guide also outlines some of the main compatibility issues.

It’s also important to test and QA your email before each send, especially if you’re using interactive elements. Adding code changes – simple or complicated – can easily throw off email rendering. Testing before you send can help avoid mistakes, protect your reputation and save you money down the line.

Email marketers typically use rollovers to show close-ups or the back side of products. But you can use a rollover for much more than that.

In this email from lighting and furniture designer Tom Raffield, recipients look for the answer to “Can you guess where we are going?” by hovering over the clues. This is a great example of an email combining interactivity and gamification. It would have been perfect if they’d provided recipients with a fallback.

Emails only have so much space to showcase products. Using a hover effect to show more detail can make good use of precious space.

You will need two images to implement this: the product image and a screenshot of the product details.

Hubspot uses a rollover effect to create a quiz about email marketing. This allows the user to know the result right away.

Correct answers are highlighted with green and incorrect are highlighted with red. For users with color vision deficiencies, Hubspot keeps the email accessible by specifying the answer below the quiz.

Tooltips are not only for websites and apps. Did you know that you can use them in email, as well?

Nike used the rollover effect to create tooltips with product details.

At first glance, the user only sees the image of a girl in the gym. But when the subscriber wants to get more information about the item without leaving the email, he or she can hover the cursor over the “plus” sign.

Subscribers who use an email client that is not compatible will only see the primary image.

It’s important to note that image rollover/hover effects don’t work on mobile devices — recipients will only see the primary image (the one you insert first).

Email developers and marketers often use radio buttons to switch the colors of an email, or as a way for a user to choose an item from a list.

In this Beyond the Envelope email from Paul Airy, subscribers can toggle between small- or large-sized font with two buttons on the left side of the email.

By switching from “S” to “L”, the user can change the font size.

When a user doesn’t click the toggle, nothing happens and he or she sees the default appearance settings.

Once the subscriber clicks the “L” button, all fonts increase in size. Due to the transition property, the font change happens slowly.

To provide slow interchange, you need to add the tag “transition” into the CSS code and set the time. Here, it’s 0.3 s.

Because MS Outlook does not support transition and the input type radio, don’t forget to hide these elements for MS Outlook — in this case, those recipients will see the default appearance of the email.

If you want to implement this technique in your emails, you’ll need to first insert the following into the HTML code before the class