Modern emails seem to be evolving into microsites. Email design is becoming more sophisticated, including various types of interactive content. However, many use the term “interactivity” wrong, applying it to GIFs, timers and buttons.
Interactive email elements allow subscribers to engage with content directly in the email, without visiting your website. There are many tools designed specifically to help you add interactivity to your emails. However, the only way to add interactive elements to emails is by editing their HTML code. Is the hassle worth your time and effort? Let’s figure this out.
Testing Interactive Emails
I sent test emails to all my multiple email addresses (yeah, I have a lot of them) and opened them on various devices and inbox providers.
I tested how my emails with interactive elements would work across:
- inbox providers that are most popular with the clients of the eSputnik service;
- default email apps on mobile devices;
- iOS, Android, and OS Windows.
Tools: freshinbox, emailmonks and others
Rollover images utilize the hover effect. An alternative image appears when a user hovers the mouse over the image in an email. You can generate rollover images using the Rollover tool. According to the service, it works only in Yahoo! Mail, Outlook.com, AOL and Outlook 2003. Let’s see for ourselves:
Please note that on mobile devices, there would be no difference between a click and a hover. On my smartphone, I saw a single image and clicking on the image directed me straight to the website. I didn’t even notice that the email had an interactive block.
Most test emails displayed a single static image, even in Outlook Mobile and Web.
Freshinbox developers state that Gmail doesn’t support rollovers, but you can find other services providing Gmail-compatible rollover image that work quite well. By the way, the eSputnik email template editor enables you to create rollover images right within the interface so you won’t have to waste your time on third-party codes.
Tools: Freshinbox, Emailmonks and others
A carousel is a strip of images you can flip through, to the right or to the left.
There are many plugins that help add a carousel strip to your website, but with emails, it gets a little bit more difficult. Some CSS types are not supported by inbox providers, and the email recipient only sees the first image in the carousel.
You can find various carousel templates at Freshinbox. This service has ready-made code blocks that you can add to your email code. You can also test your carousels, by sending a test email to your email address.
Let’s see how my test email with a carousel performed:
Most inbox providers didn’t display the carousel correctly. Only the first image was displayed. Outlook tests were successful half the time, but carousels in the default iPhone and Android email apps were a pleasant surprise.
Yahoo! Mail provided inconsistent results. The carousel worked well on desktop, but not on mobile.
To sum up, a carousel is not the best trick to boost your subscribers’ engagement. The result isn’t worth the effort you’ll put in creating the email.
Integrated survey forms
Tools: Google Forms, Emailmonks and more
Email marketers who want to add forms to their campaigns usually place a button with a link to a Google form into an email body. Make your message more user-friendly by integrating the form directly in the email body.
My experiment showed that the integrated form was displayed correctly on all devices and in most inbox providers and apps. Results were inconsistent only in Outlook:
In most inbox providers, the form performed exactly as planned.
- The checkboxes and fonts were displayed correctly.
- The form was fillable.
- All responses were successfully accepted and filed.
However, in Gmail for Android the form was displayed as inactive and non-editable.
Outlook 2010/13 and Mobile performed even worse. The fonts looked different, the submit button didn’t work, even the checkboxes were unresponsive.
Curiously, everything worked just fine in earlier versions of Outlook.
In my test, it was impossible to fill in the form on one device out of ten. So, it’s better to add a link to the survey along with the embedded form to make sure all your recipients have access to the interactive form. Besides, if your survey has more than 15 questions, a step-by-step questionnaire would be more convenient.
Tools: Emailmonks and others
You might have seen interactive search bars in the emails dropping into your Inbox.
In most cases, this is just an image linked to a search box on your website. Emailmonks provides a premade search bar that allows you to enter a search query directly within the email. The results are displayed in the associated search engine, such as Google Search, or even your website’s search.
The Emailmonks website states that their search bar is compatible with Apple Mail, Yahoo Desktop, AOL, Lotus Notes, Outlook 2007+, Outlook.com, Mobile App (Gmail App, Yahoo App) and more. However, in most inbox providers the bar appeared like this:
In the Gmail app the bar was only displayed in the web version. The iOS email app wasn’t a success as well, but Apple Mail provided us with a working form at last!
According to the Emailmonks website, it’s not all sunshine and roses though: “As Apple has limited support for text box, Apple users will not be able to fill the box or input “space” between the words. However, “Alt+Space” can solve the problem.” Nonetheless, I was able to fill the form easily in my tests, even with a three-word query.
For Yahoo! Mail, the search bar also worked well:
Additionally, I tested all the other interactive features provided by Emailmonks, such as accordions, fixed CTA buttons, collapsible carousels and graphs. Even though the website describes where each interactive element will be placed in the email, it doesn’t necessarily end up being so. Keep in mind that there’s still an issue about the way how different devices, operating systems and inbox providers work together.
For example, a fixed CTA button in the email, should always be visible at the bottom of the screen as you scroll:
Yet in my tests the button worked correctly only with the native Android email app.
Tools: vidyard.com, realtime, and others
Visual content in an interactive email design is worth a thousand words. Moreover, experts predict that video content is the future. So, is it possible to embed videos directly into your emails? The answer is yes, if you code it with HTML5.
Developers of the standard iOS, Apple Mail and Outlook.com apps claim that their apps can play the video in the email itself, without opening a new window. Other inbox providers and email apps display a static fallback image. Let’s test this:
Videos were displayed as static screenshots almost on each platform and device. Only iPad managed to play the video inside the email. In all other cases video was opened in the browser:
This email looks quite nice. But I’m not sure it’s worth the effort since we only get a static screenshot in the email anyway. And even Yahoo! Mail, my top pick in all the above tests, did not allow video playback in the email.
Interactive emails for geeks
Tools: Freshinbox, Justin Khoo
Here are some examples of the interactive designs you can create manually, but you have to be a real maniac to do it 🙂
It’s quite difficult for those who aren’t coders to invent and implement such interactive email designs. Note that Freshinbox developers mostly care about creating fancy interactive designs for Safari and iOS.
Follow the links below to see just how impressive the emails can get.
Ignite the tree lights in any mode and sequence you want. You can change the modes, reset and start again:
In this email, the subscriber’s task is to click the cells with characters in them to discover the correct password. When you get meaningful combinations, corresponding funny phrases appear.
You can find a lot more interactive email marketing examples in the Freshinbox blog.
2) Custom interactive element examples by Camiah
Take a look at my favourite interactive email elements created by Camille Palu and miah roberts.
Choose the color in the palette, and you’ll see its number on the element you need to paint with this color. Click the elements and enjoy the final results:
Remember playing Minesweeper on your old Windows computer? As we can see, now the game can be embedded in an email as well. It’s not as awesome as the original one, since the mines’ positions on the field don’t change and you can’t use flags. But it’s quite impressive to receive something like this in an email!
Put some olives, sauce, and cheese on this digital pizza by clicking the colorful buttons on the left. You might not be able to eat it but sure can work up an appetite… for interactive email elements! 😉
Maybe in the nearest future we will be able to create such interactive emails in a few clicks. However, who will be able to see them? There are countless combinations in the “email app-device-OS” chain. Unfortunately, as my tests have shown, not every inbox provider and device is ready to accommodate interactive design elements.
Among all the interactive email elements I tested, only the survey forms have worked almost perfectly. The rest are still not ready to be used in bulk email campaigns.