Interactive email: everything you need to know about interactivity in email marketing

In our email design services at Badsender, we regularly receive requests from email creation with interactive content. But I have a strong feeling that our prospects and customers don't know what the term encompasses: neither the advantages (and especially the disadvantages), nor what it's really possible to do, and how. So I'm taking the initiative and making this article available.

What is an interactive email?

"The interactivity of an email lies in the actions performed directly in the email that trigger an event without leaving the email."

Mark Robbins

Interactive emails allow recipients toperform actions directly from their inboxfrom the received email, without having to leave it. This includes :

• Basic concepts such as hover effects and functions, hidden/displayed states, carousels, sliders or image galleries...
• More complex experiments These include forms (satisfaction or not), quizzes, surveys, or leaving a review, or purchasing a product directly in the email...

In short, an interactive email requires... interaction, action on the part of the user.. We will therefore set aside the gif formats in emailing or countdowns, which don't solicit any "exchange" with the recipient, but are more likely to be the subject of an article on media content in email.

Are interactive email and kinetic email the same thing?

Not really. Allow me a linguistic digression: The word "kinetic" comes from the ancient Greek kinêtikoswhich means "that moves, that sets in motion"..

In email marketing, a kinetic email is one that integrates animations and dynamic interactions thanks to advanced HTML and CSS. They are therefore mostly entertaining functionalities based on CSS and HTML (mainly :hover and keyframes).

A kinetic email is therefore an interactive email. But not all interactive emails are kinetic emails. A form in an email doesn't particularly require movement. It requires interaction.

What are the (supposed) advantages of interactivity?

1. Generate higher engagement and conversion rates Interactive: interactive emails can reduce the number of clicks required to engage recipients quickly and simply, reduce the number of steps the user has to take to reach the final goal, and simplify the user journey.
2. Delivering an innovative user experience by making the content visually appealing, thus capturing the attention of recipients.
3. Stand out from the competitiondistinguish the brand and break away from the monotony of static email templates.
4. Get more data.
5. Integrate more content without lengthening the message.
6. Keeping in line with the animatic charter of the brand.

What are the disadvantages?

• The extra workload :
  • Necessary tests to make sure a feature works properly.
  • Emergency solutions to guarantee the user experience when functionality is not supported.
• Random code supportThe main reason for this is that not all opening environments support the tags, HTML attributes, properties and CSS pseudo-selectors required for interaction.
• Email eco-design is hard to maintainThis is because interactive content (most of the time) requires a good deal of code to ensure optimal support and backup.

Nuance: It's important to digress for a moment on a point that will recur regularly when analyzing the support for possible interactions in emails: the notion of theThe "opening environment" in email marketing. It's not the user's email address that determines whether he or she can view an interactive experience, but the opening environment.. It is therefore very difficult to rely on the e-mail addresses of your recipients to know whether an interactive feature will be correctly supported.

Frequently asked questions about interactivity in email marketing

When should it be considered?

You need to discern a real need before implementing interaction in an email. The aim is not to use it indiscriminately, but to use it wisely, with a view to achieving specific results and improving the user experience.

How do you make it clear that email is interactive?

It may sound like a silly question, but it's totally legitimate! Emails have long remained "static", so it's not innate for your recipients to "hover" over elements or fill in forms directly in an email campaign. The best thing to do is add visual or textual elements to guide and inform the recipient of the existence of this interactive experience.

How much does it cost?

Given that it often needs to be developed entirely by hand to ensure optimal support and well-designed backup versions. Design time is not insignificant, with numerous test phases. So what takes time, potentially costs a lot of money. After all, a simple hover effect on a button doesn't add up to five hours of development either, so don't go overboard!

What are the best practices and reflexes to adopt when creating an interactive email?

1. Reserve interactive emails for a specific email Interactivity must remain a lever, not a habit. In other words, the exception is the value. An interactive e-mail must be a memorable experience, not a commonplace habit.
2. Think and don't rush headlong into it: do I really need choose an Email Builder offering interactive functionality, only to use it once a year? Wouldn't it be better to use a (very good) agency or (very good) email integrator?
3. Don't include interaction in an email just to make people weep internally that's just nerd masturbation! There must be a real need for interaction. Think content and message first!
4. Use interactive content sparingly :
   • Because otherwise, in terms of HTML file size, it's likely to be far too large and exceed Gmail's 102kb limit.
   • And also because too much interactivity kills interactivity.
   • And too many interactive elements in a single email can be confusing and distracting.
5. Knowing your base and its consultation habits Am I sure that my recipients will be able to use the carousel correctly? Do I know enough about their viewing habits to guarantee that it's worth the effort? Well, as I said above, it's not always easy, but at least try! It'll also help you with the next point.
6. Back-up solutions If you don't do this, you'll probably leave out a good number of your recipients. You're neglecting them. They may then unsubscribe, or stop opening your email communications. Make sure that the user experience when interactivity is not supported remains pleasant.
7. Don't forget accessibility! Interactivity is nice, but it shouldn't be at the expense of the campaign's message and accessibility.
8. Test Interaction in email marketing inevitably involves a battery of tests. And you won't be able to settle for simple tests on EmailOnAcid or Litmus, since you'll only be entitled to static screenshots. So, real-life testing, on a host of different environments and devices.

"Interactivity in e-mail should always be seen as an incremental improvement. It's absolutely essential to provide a solid back-up solution for e-mail clients that don't support interactivity."

Cyril Gross

Do routing tools support interaction?

Not all the timethe buggers! Some are relatively lax when it comes to developed or imported HTML code, while others are much stricter. To give you an example, Klaviyo deletes all elements <input>... Calm down! Cute little volunteers are trying to list it all for you in a Github repository dedicated to ESPs HTML interpretation bugs.

Can interactive content be industrialized?

It's very complicated. Quite simply because most of the interactive functionalities presented in this article require special, tailor-made development. After that, some of them could indeed be industrialized, but as we said earlier, the idea is not to insert interactive content into every campaign you create. So weigh up the pros and cons!

Does interactivity hinder accessibility?

Depending on the features, yes! Definitely!

• Because we're diverting the use of certain HTML elements to display elements (with <input type="checkbox"> for example, which are clearly not made for this).
• And also because the majority of interactions suffer from validism: only recipients using an opening environment capable of supporting the functionalities will be able to benefit from the interaction.

Examples of interactive content in email marketing

1. Forms

"True form

• Objectives :
  • Retrieve data quickly, directly from the email, without going through a landing page.
  • Shorten navigation steps of the recipient
  • Increase conversion (because the conversion tunnel is shortened).
• Complexity : Developing a form in an email is not complex in itself. And I'm talking about "real" forms, not simulacra like multiple-choice questionnaires or surveys. No, I'm talking about the use of HTML tags. <form>, , <input type="radio">, <input type="text">, <input type="checkbox"> and even the attribute with the value presentation to all submit. Setting up these tags isn't very complicated, and just requires knowledge of the basics of creating an HTML form with the method of sending data in GETand to have a landing page capable of retrieving the data passed in the url.
• Support: Forms of this type are difficult to support in all opening environments. Worse still, they can give rise to security and deliverability issues. They can also lead to the appearance of warning windows, as opening environments consider that this type of functionality can create security vulnerabilities.
• Backup version : If you can't display a working form, at least offer a button or link that will take your recipients to a landing page where they can decently fill in the form in question.

Star rating (NPS) or number rating

• Objectives : The advantage of such a feature is that you can monitor your customers' perception of your products and services on an ongoing basis (or on a one-off basis, it's up to you).
• Complexity : Star rating (or rating on a numerical scale from 1 to 10) can be achieved without too much difficulty by entering the same url for each rating, but with different tracking, so that you know (via your statistics) how many readers clicked on which rating.
• Support: The only difficulty lies in supporting the modification of the appearance of the star or note hovered over, CSS pseudo-selector :hover not being supported on all opening environments. But this doesn't change the functionality: if no support, no change on hover. Is this really dramatic?
• Advice : I recommend that you design the stars via the corresponding HTML character: it's always easier to change the color of a "text" than to change the path of an image!

Questionnaires and surveys

In the end, what we've just seen is more or less a multiple-choice questionnaire: one question is asked, with several possible solutions. In the same spirit, simulate a form with a multiple-choice questionnaire to retrieve data, opinions and preferences from your recipients.

Quiz

• Objectives : Quizzes provide "educational" content for your recipients. They make e-mails more entertaining and memorable. But this is a simple "hide/show" game. It is not possible to retrieve data or clicked responses in this state.. So it's mainly a kiff of experienced email developer.
• Complexity : It's a bit tricky to set up, I admit.
• Backup version : Suggest a short text with a link so you can play the quiz(s) on the mirror page, for example. Or display another text instead! It's always better than leaving the quiz "broken"...

2. Carousel or slider

This is, of course, the most frequently requested interaction, even if it's a little dated. (but that's just my own opinion). Why is she so desirable?

• Objectives :
  • Display multiple contents without adding height to the email, thus limiting scrolling.
  • Dynamic presentationIt's a great way to engage recipients and bring the whole email to life.
• Complexity : it's quite complex to develop. As proof, we commissioned Rémi Parmentier (aka Hteumeuleu) to accompany us on the development of an email carousel for our Email Builder LePatron. And the result is thatit's impossible to offer COMPLETE support for opening environmentsIt's also difficult to make the module fully responsive. Industrializing such a feature is therefore time-consuming.
• Backup version : It's essential to anticipate the back-up solution that may be proposed should the functionality become unsupported. Do you display all the slides one below the other? At the risk of considerably lengthening the email? In short, a lot of work for mixed support...

3. Overview

Button overview

• Complexity : This is undoubtedly one of the easiest and best-supported interactions to set up. Change background color, text color, border color or thickness, add a drop shadow, enlarge button content, play with opacity or transition effects... The range of possibilities is as wide as the CSS properties to be applied! And it's all made possible in the email thanks to the magnificent CSS pseudo-selector :hover !
• Support: Note that the pseudo-selector is declared in the <style>. It is therefore not possible to consider it if you don't have "access" to the content of the <head> of your email.
• Backup version : But make sure your button remains attractive EVEN when the hover effect is not supported.

Overview of visuals

• Objectives :
  • Display the product from different angles, carried or zoomed, in the same email
  • Save a little space
  • Meeting the recipient's needs
• Complexity : While the effect is rather simple, there are several possible ways of creating it:
  • Design the first visual with a background image, and change the value of the CSS property background-image on mouseover. When you're familiar with the problems involved in setting up background images (and I know them well, I guarantee it).we won't!
  • Change image path via CSS property happy:. Likewise, I wouldn't recommend it, as the use of this property is a bit touchy...
  • "Hide" the second visual with the CSS property max-height à 0and a <div> with the CSS property mso-hide with the value all (to ensure that it does not appear in Outlook e-mail software for Windows). Then assign the value none property max-height on the fly. I like that! And what's more, there's no need to worry about the code, FreshInbox has already concocted for you a dedicated generator !
• Backup version : Make sure you offer the most "relevant" image first (in case the hover doesn't work).
• Advice : Since this type of interaction requires two visuals, take the opportunity to optimize the weight of your images!

Panorama and 3D view

Well, there's no need to go into the details of the technique here. Firstly, because it's already been done in an article about innovation in email designbut also because it's extremely complex. (Hteumeuleu invented it, so that explains it :)) and that the support isn't necessarily ideal. But hey, I try to list everything!

Tooltips and hotspots

• Objectives :
  • Save space and increase the amount of information on a product/visual/item
• Support: If thehotspots in an email Although the above is not ideal for all opening environments, I do like to mention it, since its originality makes it stand out from the crowd. Thanks to Litmus and its remarkable R&D team have made this possible. (and public) ! Use with extreme caution, however, and absolutely test before sending!
• Backup version : be sure to include a link to the mirror page or a backup solution for those who aren't so lucky!

4. Navigation interactions

Burger menu

• Objectives :
  • One of the main advantages of burger menu in an email is that it optimizes the space available in an email, particularly on mobile devices where display is limited. It avoids a stack of links that can quickly weigh down the interface.
  • A burger menu can also offer a better organization of links, improving readability and content hierarchy. It's particularly useful for emails with multiple categories (e.g. ecommerce, newsletters, editorial content...).
• Complexity : Creating an interactive burger menu requires advanced techniques (CSS with :checked). So it's not for everyone.
• Support: Not all e-mail clients support these techniques: Outlook (desktop versions) and some versions of Gmail often disable this type of interaction, requiring a fallback solution.

Tabs and tabs

• Objectives :
  • Save space Interactive tabs: interactive tabs in email marketing enable multiple content to be displayed in the same email without taking up too much space.
  • Improving readability
• Complexity : They are generally implemented using CSS and HTML, with <input type="radio"> to manage the display of different sections.
• Support: Their support forces them to limit themselves to a small audience...
• Backup version : In the case of fallback, plan for a simple display (stacked content, for example).
• Advice : If you manage to implement it, limit yourself to 3 or 4 tabs to avoid visual overload and ensure fluid navigation.

Accordions

• Objectives : Interactive accordions in email marketing enable content to be displayed in folding/unfolding sections.
  • Optimize and save space By "compressing" long texts, you save space. And when the user clicks, they only see the sections (product description, FAQ answer) that interest them.
  • Improving readability The email is visually lighter and less cluttered.
• Complexity : The technique for creating HTML and CSS accordions in an email is based on the use of <input type="radio"> or <input type="checkbox">and CSS pseudo-classes such as :checked or :hover. A seasoned email developer should therefore be able to develop it.
• Support: knowing that the CSS pseudo-selector :ckecked element is only supported at 41%, and the HTML <input type="checkbox"> is only supported at 54%, you'll soon realize that support for this feature is rather limited...
• Backup version : Make sure that all content is displayed in case the functionality doesn't work properly: there's nothing worse than clicking on an element and nothing happens...

Internal anchors

• Objectives :
  • Easy navigation in a relatively long email, because the internal anchor allows you to reach the targeted section with a single click, without having to scroll through the entire content.
  • Increase engagement guiding the user to specific parts of the content.
  • Apply a clear structure to email.
• Complexity : It's not very complicated to develop, so there's no need to panic, since all you have to do is add a id (unique identifier) on the targeted element, and place a href which points to the defined identifier, preceded by a #.
• Mobile version : I'd even go so far as to say "quite the opposite", since a mobile version is generally "longer" (since it's narrower). This type of interactivity would simplify email navigation and avoid repeated scrolling and swiping.
• Support:
  • Unfortunately, the support isn't up to scratch, since according to CanIEmail, the internal anchor support would only be 56%.
  • You should also bear in mind that many ESPs AND opening environments automatically add a target attribute with the value presentation to all blank on hypertext links: clicking on an anchor opens a new browser window to access the right content... Not a great user experience!
  • What's more, some opening environments don't support hypertext links that don't respect the protocols. http, https, such as or mailto and display the content of the href attribute directly in the email content. In short, I'm not sure it's a good idea to use this type of interactivity.
• Advice : As the functionality itself is not really "implementable", I'd advise you to set up links directly in a well-written summary, for example. But I'll leave you to discover all our investigations and conclusions regarding the use of internal anchors in an email.

5. Gamification

We all like to have a little fun. I have a lot of fun myself (but especially when I'm trying to develop interactions like the one above). Gamification is the integration of game-based mechanisms and dynamics into non-game contexts, such as email marketing.

• Objectives :
  • Injecting fun and pleasure in your customers' inboxes
  • Entertain your customers and avoid fatigue static emails.
  • Increase your return on investment (ROI): engaging recipients through fun experiences fosters loyalty and can increase the viral potential of your campaigns.
• Complexity : Gift finder, Tap to reveal and other Anglicized interactions are made possible by checkboxes (<input type="checkbox">) or radio buttons (<input type="radio">). This involves displaying or hiding content according to the user's actions. This requires a very good command of HTML and CSS.
• Support: support for such features is very limited.

6. AMP4email

Google launched the AMP project (for Accelerated Mobile Pages), then extended it to emails with theAMP4email. In a nutshell, AMP4email is a new format (in addition to HTML and plain text) for creating interactive emails, with Javascript-type functionalities.

• Objectives : a technology enabling the creation of email marketing campaigns with website-like functionalities, for a more interactive user experience. Ideally, AMP4email enables this type of functionality:
  • <amp-form> to add forms
  • <amp-accordion> to insert accordions
  • <amp-sidebar> to create a navigation sidebar
  • <amp-carousel> for creating sliders and carousels
  • <amp-bind> to enable the submission of responses or actions
  • <amp-selector> to present a list of options and allow the user to select one or more at a time
  • AMP4email also makes it possible to carry out actions usually reserved for a website experience, such as purchasing online (from email), answering a form, confirming an order, making an appointment, etc.
• Complexity : Creating emails in AMP4email therefore requires special development. It doesn't replace the HTML and plain text versions, it comes IN ADDITION! This means learning a new development language.
• Support:
  • Unfortunately, AMP4email is currently poorly supported by opening environments: only Gmail, Mail.ru and Yahoo! Mail interpret it correctly.
  • What's more, email solutions that accept this format are still rare.
  • Finally, isn't it more important than developing a new language? Don't we already have enough to do with HTML and CSS in email marketing? This is my little rant...

7. Interaction to improve accessibility

After all, why shouldn't email interaction be used for more "noble" causes than adding as many products as possible to a carousel, or retrieving customer data? For example, why not improve the accessibility of the email by proposing interactions to enlarge the size of texts or buttons, for example?

• Objectives :
  • Improving accessibility of your campaigns and meet a significant need on the part of your recipients with disabilities (and not just visual ones).
  • Stand out from the competition through noble initiativesand not just ROIsts.
• Complexity : I admit that this type of interaction requires a certain amount of development time. It's not for nothing that Litmus took the risk. But what a slap in the face!

Interactivity in email marketing: a lever to be used with care

I admit, interactive emails open the door to communication that is undoubtedly more engaging and immersive for recipients: by integrating well-thought-out interactive elements, brands can captivate their audience, optimize the user experience and maximize engagement and conversion rates.

However, interactivity in email marketing is not without its constraints: limited compatibility with certain email clients, the need for in-depth testing, back-up solutions to be provided, accessibility and industrialization issues... It is therefore essential to don't use these features just to look prettybut with a precise objective in mind, carefully assessing their relevance and impact.

Keep this quote in mind:

"What's important is the content. Everything else is secondary."

Austin Woodall, Senior Engineer, Shopify