Interactive Emails: Use Cases & Considerations for CSS-Based Interactivity [with on-demand webinar]

Email interactivity brings common web and app experiences into the inbox. In addition to allowing brands to more efficiently use limited real estate in emails, especially above the fold, interactivity significantly lowers the barrier for subscribers to act.

While it may seem like an email interaction and an email click would be the same amount of effort, particularly since many interactions involve a click, subscribers don’t see them as being equal. In some cases, email interactions occur at up to twice the rate of email click throughs to landing pages. Those interactions not only make subscribers more likely to engage with future emails, but when subscribers who have engaged with interactive email content click through to a landing page, they’re significantly more likely to convert.

Functionality Powered by Email Interactivity

While AMP for email lets brands create powerful interactivity, it’s poorly supported in the US and Europe by inbox providers and email service providers. On the other hand, CSS-based interactivity allows brands to address a much larger portion of their audience. It can’t match AMP’s functionality point for point, but CSS does allow email marketers to create:

• Hotspots, which reveal additional content and calls-to-action in an overlay when clicked
• Hamburger menus, which are a kind of hotspot that when when clicked expand to reveal navigation links or other similar evergreen or administrative content
• Accordions, which expand the content block to reveal additional content and calls-to-action
• Reveals, which show hidden content (e.g., discount code, release date) when clicked
• Carousels, which allow the browsing of additional products or other content blocks by clicking arrow buttons
• Tabs, which bring up additional content when clicked or hovered over
• Toggles, which show a related, alternate version of the content 

Using those mechanisms, brands across industries can create a wide variety of experiences. We share some of our favorite examples from our work with our clients in the on-demand webinar near the end of this post.

Considerations & Limitations

While email interactivity is a great way to boost engagement and make your emails standout, marketers need to be aware of and account for a number of issues. 

1. Interactions are not email clicks.

In the age of Mail Privacy Protection (MPP), when clicks are a more important measure of subscriber engagement than ever because MPP has obscured so many opens, it’s worth noting that an email interaction is not a click. 

That said, there are a couple of caveats to be aware of. First, with additional effort, brands can track subscriber engagement with some kinds of interactive elements. This data could then be used to qualify subscribers as active.

And second, while it’s unclear if inbox providers track these interactions and factor them into their engagement-based spam filtering algorithms, we do know that when your subscribers spend extra time in your emails, it boosts your sender reputation.

Get our most comprehensive guide to adapting to MPP via free, no-form download.

2. Nudges to interact are wise.

While email interactivity mimics interactivity found on the web and in apps, subscribers aren’t used to seeing it in emails. Because of that, you may want to give them nudges to let them know they can indeed interact. Common design elements include:

• Animation to draw attention to interactive elements
• Arrows highlighting where to tap
• Subtle instructions for what subscribers should do (e.g., “Tap to interact”)

Explore the best use cases and best practices of using animation.

3. Most interactivity isn’t accessible.

Your subscribers who use assistive technologies generally won’t be able to access the interactive portions of your emails. The biggest danger is that the interactivity will create a keyboard trap, where subscribers can get into an interactive element via keyboard but can’t get out, not to mention being unable to read the content in the interactive element itself.

Marketers can help these subscribers understand and potentially steer clear of your interactive elements by using aria-labels to describe email functionality that may be unclear. 

Learn how to expand your audience reach with more accessible campaigns.

4. You’ll need fallbacks.

While well-supported, CSS-based interactivity isn’t supported everywhere. Because of that, you’ll need to create fallbacks so all subscribers have a decent experience with your emails.

Of course, veteran email marketers know that the channel requires a range of fallbacks because of the lack of email coding standards. Marketers need to:

• Select alternative fonts for when their preferred font isn’t supported
• Create animation that has a first frame that can stand on its own when animation isn’t supported
• Write alt text and use HTML text for when images aren’t supported or are blocked
• Send a plain text MIME part for when the HTML MIME part isn’t supported
• And on and on

Thankfully, there are lots of ways to hide or replace interactivity when it’s not supported by a particular email client.

5. Watch the weight of your emails. 

The CSS coding used to create email interactivity adds substantial code weight to an email, which can lead to clipping in Gmail. When the weight of an email exceeds 102KB (excluding images), then Gmail doesn’t display any of the content after that. Instead, it displays a message that says, “[Message clipped]” with a link to “View entire message.”

Not only does this create a jarring and potentially confusing experience for subscribers, but clipping almost always leads to an email’s unsubscribe link not rendering. That can lead to spam complaints.

6. Avoid overusing interactivity.

As engaging as interactive email content is, you’ll want to use it selectively. When it’s used too often, we’ve seen what we call interactivity fatigue, where subscribers engage with it less.

With the exception of hamburger menus, interactivity isn’t an every-email solution, so be thoughtful about which situations and which campaigns you use it for so you maximize return on effort. Want some standout examples of when to use it? Then check out these…

Real-World Examples of Email Interactivity

In the on-demand webinar below, we talk more about how to use interactivity wisely and also share 15 of our favorite examples of interactivity from our work with our clients. These examples from major national and international brands demonstrate the full range of what interactivity is capable of doing. We hope they inspire you to explore how adding interactivity to your emails could make them more engaging, memorable, and effective.

We hope you enjoyed “Interactive Emails: An Oracle Digital Experience Agency Showcase.” Some of our other on-demand webinars include:

• Creating & Maintaining Effective Automated Campaigns
• Content Planning: Advice from Oracle’s Global Digital Marketing Agency
• Modular Email Architecture: The Next-Generation Template
• 10 Years of Email Marketing Rules
• How to Transform Your Customer Experience with a CDP
• Priorities for a Mail Privacy Protection World

—————

 Need help with email design and coding? Oracle Digital Experience Agency has hundreds of marketing and communication experts ready to help Oracle customers create stronger connections with their customers and employees, even if they’re not using an Oracle platform as the foundation of that experience. Our award-winning specialists can handle everything from creative and development to strategy and content planning. For example, our full-service email marketing clients generate 24% higher open rates, 30% higher click rates, and 9% lower unsubscribe rates than Oracle Responsys customers who aren’t.

For help overcoming your challenges or seizing your opportunities, talk to your Oracle account manager, visit us online, or email us at OracleAgency_US@Oracle.com.

Want to better understand your email marketing risks and opportunities, take advantage of our free Email Marketing Assessment. Our experts will check your deliverability, review your email creative, audit your signup process, do a partial competitive analysis, and more. If interested in this free assessment, reach out to us at OracleAgency_US@Oracle.com