Interactive email techniques

5 New Ways to Use Interactive Email Elements

6

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.

Email Client Compatibility

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.

1. Image Rollover Effect

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.

Tease a Product

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.

Image rollover teaser effect
In case you’re curious, the answer was “We’re going to Chelsea Flower Show.”

Hidden Product Descriptions

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

Image rollover hidden product descriptions
Each image has a hidden description that the user can view when he/she rolls over the car image.

 

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

Quizzes

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

Hubspot quiz rollover effect

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

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.

Nike tooltip rollover effect

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.

Email Clients that Support Image Rollover Effect (Hover)

  • Yahoo! Mail
  • Apple Mail 1
  • AOL
  • Gmail
  • iCloud Mail
  • Outlook 2003
  • Thunderbird
  • net

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).

2. Radio Buttons

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.

Beyond the Envelope radio button example

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.

The CSS code:

     {
     transition: all 0.3s !important;
}

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 <table> or <div>. This code is responsible for the radio buttons. They will be fixed at the top of the page for desktop devices:

<input style="position:absolute; display:none !important; visibility:hidden !important;" id="standard-layout" class="standard-layout" type="radio" name="layout">
<label for="standard-layout" class="layout-buttons">S</label>

<input style="position:absolute; display:none !important; visibility:hidden !important;" id="large-layout" class="large-layout" type="radio" name="layout">
<label for="large-layout" class="layout-buttons">L</label>

You will also need to insert this piece of code before your HTML </header> and wrap it in the <style></style> tags. This piece of code sets the button style:

.standard-layout+label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    background-color: #ffffff !important;
    padding: 10px;
    border: 1px solid #333;
    left: 10px !important;
    top: 50px !important;
    position: fixed !important;
}

.large-layout+label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    background-color: #ffffff !important;
    padding: 10px;
    border: 1px solid #333;
    left: 10px !important;
    top: 0px !important;
    position: fixed !important;
}

You will also need to insert this code into your CSS. This code sets the font’s size:

.large-layout:checked~table h1 {
    font-size: 130px !important;
    line-height: 150px !important;
}

.large-layout:checked~table p {
    font-size: 20px !important;
    line-height: 30px !important;

It is important to note that you may edit the font size (set 50px instead of 130px, for example) and you can set as many headings as you wish. To add more headings, copy the first part of the code and, instead of h1, specify h2, h3, etc.

To make this technique work seamlessly, you’ll also need to make sure that your template consists of rows. When the font size is changing, the size of the containers also increases, and your email can look broken with buttons located in the wrong spot. When the email consists of stripes, the location of content elements will remain the same.

3. Buttons

We’ve all seen a button in an email, but what about buttons that change colors when you mouse over or click on it?

There are two ways to do this technique:

Working with the CSS

To execute this technique, you need to insert a piece of the CSS code into your email code.

Because button layouts differ, we won’t give you a universal code to embed in every email template. However, here are a few embed codes for certain mail editors:

MailChimp Editor

.mcnButtonContentContainer:hover {
    background: #FEFEFE!important;
    transition: background 200ms;
}

.mcnButtonContentContainer:hover a {
    color: #333333 !important;
    transition: color 200ms;
}

Email on Acid Editor

.button1:hover {
    background: #FEFEFE!important;
    transition: background 200ms;
}

.button1:hover a {
    background: #FEFEFE!important;
    transition: background 200ms;
    color: #30373B !important;
    transition: color 200ms;
}

Stripo email Editor

.es-button:hover {
    background: #FEFEFE!important;
    border-color: #FEFEFE!important;
    color: #333333!important;
    transition: all 200ms;
}

Replace the “FEFEFE” and “333333” with the colors you prefer. The transition property provides the seamless color interchange.

Here’s an example of the technique:

Button CSS example

Use Image Rollover Effect

You’ll need to design a CTA button, take a screenshot of it, then create a new button of the same size with the same text, but set other colors to the font and the button itself, and a take a screenshot of it, too. Then by using these two images, implement the image rollover effect.

Rollover button effect -Halloween

Rollover button effect St. Patrick's Day

Remember to add a link to these images that will take customers to a landing page once they click the button.

Both Button Options will Work in the Following Email Clients:

  • Yahoo! Mail
  • Apple Mail 10
  • AOL
  • Gmail
  • iCloud Mail
  • Outlook 2003
  • Thunderbird
  • Ukr.net

4. Survey

Email marketers often ask customers for feedback through a survey.

This is sometimes a single-question survey where participants click the image that matches their answer. If the survey contains more than one question, marketers can create a Google Form and send the link in an email.

But there is a better alternative to both options — embed the questionnaire into the email.

Embedded survey example

To embed the Google Form:

  • Create and design Google form
  • Select the “Send via email” option
  • Send it to your email address
  • Tick the “include form in email” check-box
  • Name the questionnaire in the “Subject” field

Sending from the Google Form

  • Open this email in your inbox
  • Right-click on the form and select “Inspect”
  • In the pop-up window, find the “table align=”center” cellpadding” line

Copying the Embed code Google Forms

  • Copy the code with CTRL+C
  • Insert it into your email HTML. Done!

Keep in mind that only some editors support this code (Email on Acid and Stripo.email included).

You can tick checkboxes in the embedded Google Form on desktop devices only. It does not work on mobiles, but your recipients will have the link to the web version of this questionnaire.

5. Gamification

We’ve all seen complex interactive “game” emails – Halloween games, shaking snow globes (or Magic 8 Balls), or unwrapping Christmas presents. These can be very complicated and will certainly require a developer’s help.  These interactive emails also work in a limited number of email clients.

So, how can email marketers create interactive games that don’t require lots of complicated coding?

Use the Rollover Effect

This email example we created below asks recipients to find his or personal present. The subscriber needs to hover each image to find a special greeting or a promo code.

Gamification rollover effect

(See above for the list of clients that support image rollover effects).

Provide an external link to the game

This is not exactly an interactive email, but it will work for all subscribers and give everyone a chance to have some fun. This Omnisend email does exactly that:

Omnisend gamification email

In this email, Omnisend asked the subscriber to “click to start scratching”. Once I clicked, I was redirected to an external web page, where I had some fun scratching the circle. The CTA button only appeared once I “cleaned” the circle.

Closing Words of Advice

Before you dive into some of these interactive email elements, keep these notes in mind:

  • These interactive elements should be supported in Gmail, Apple Mail, and Yahoo. Most Outlook clients do not support interactive elements at this time.
  • Try adding interactive elements in promo and welcome emails to show your brand at its best.
  • Always provide a fallback image or design for subscribers opening your email on a mobile device or a client that doesn’t support interactive elements.
  • It’s best to add one interactive element at a time, so you’re not distracting customers from the CTA and not overloading the size of the email.
  • Always test your emails prior to sending them out. Use a platform like Email on Acid to see how the email renders on 70+ clients and devices. It’s also a good idea to send test emails yourself and your friends, so you can test out the interactive elements. Open them on all the devices and all email clients you have. The more the better.
Test Your Email First!

Make sure your email looks flawless before you send it out to your subscribers. Remember: A broken email is an unengaged email. With Email on Acid, you can preview your email in more than 70 email clients and devices before you hit “send.” Sign up for our free trial and start testing today.

Sign Up Today

Author: Hanna Kuznietsova

Hanna Kuznietsova is the chief content officer at Stripo.email. Working with email is one of Hanna’s passions; she loves analyzing email and conducts research to write about the latest trends in email marketing on theStripo.email blog.

6 thoughts on “5 New Ways to Use Interactive Email Elements”

    1. Hi Kassandra –

      You may be able to add some of these with the Hubspot email editor (using the text/HTML editor), but we’re not 100% sure. You likely won’t be able to do anything like this with a WYSIWYG editor in Hubspot. Alternatively, you can work directly with the HTML using another editor (Email on Acid’s editor, or something like Sublime or Codepen) and then paste it in to Hubspot’s email editor.

      Hope that helps!

Comments are closed.

Free Email Goodies