Getting fancy can be fun, but just like a gourmet meal, it takes a lot more effort than a fast-and-functional sandwich. When you add special content to your emails—like video, animation, and embedded forms—you’re also adding complexity, development time, and risk.
Before you decide to serve up these morsels of content, consider:
For most special content, there’s a hard way and a simpler alternative—and the easy way may well get you all the benefit you need. Below we’ll dig into six types of special content—HTML5 video, CSS animations, countdown timers, embedded forms, AMP for email, and dark mode—and how to decide when it’s worth it to cook up something complex.
Of course, before you add any special sauce, you need a solid base:
It’s a pity that email clients don’t love video as much as customers (and marketers!) seem to. The stats say video is king—Lemonlight has a very convincing roundup—yet embedding video in email remains shaky at best. It’s time-intensive to make it work in the few clients that support it, so weigh the cons against the benefits of other approaches first.
Much easier and less risky options can have just as much impact as video in many situations. Before you settle on coding a video into your email, consider using a video still—with a visible play button—that links to the video, instead. (Bonus tip: link to your video on YouTube to boost view counts in a public space).
Here’s how an image linking to your video might look:
Here’s a primer on making your images work flawlessly in every client.
If seeing your product or service in action is crucial, putting a short video in your email might be a big boost for engagement. Short is the operative word here—anything over a minute tends to lose eyeballs. Some common scenarios when video can make an email particularly effective:
Limited support is the primary issue with video in emails. Only about 25% of email clients support HTML5 video playback in emails—the rest will display a fallback image.
Here’s a breakdown of the support by email client (adapted from Email on Acid):
You’ll need to account for a few other issues as well:
Ready to take the embedded-video plunge? This guide from Email on Acid will walk you through the steps. A few things to keep in mind:
When you’re competing for eyeball time in the inbox, dynamic content can snag those extra milliseconds that just might pump up engagement. CSS animations have a lot of appeal: in addition to adding motion, you can use them to create interactive elements, and they have faster load time than GIFs. As is often the case, though, the biggest downside is lack of support in email clients.
The good ol’ GIF is still the go-to for animation in email—the format is widely supported and has pretty straightforward fallbacks for finicky email clients (*ahem* Outlook). You can often get the same effect of a CSS animation with a simple GIF; here’s how we do it in our email signatures at Customer.io:
Head over to our guide to coding images in HTML emails for a GIF how-to.
Video-style slides, hover effects, other elements that respond to interaction… there are so many shiny toys to play with in CSS animations! But what makes it worth the development time is when motion and interactivity have a real chance of driving conversion without tanking performance. Will your animation really get customers to push the big, red, candy-like button?
The other benefit of CSS animations over GIFs is that they’re code-based, making for smaller file sizes and faster load times—especially important for people checking email on their phones. In fact, more mobile clients than desktop clients support CSS animations. So if your emails are most often opened on mobile devices, the animations might be worth your time.
Look deep into your data to see just what portion of your audience will even see your carefully coded animations. Support is limited to the following clients (adapted from Litmus):
Even clients that support CSS animations have some quirks. This extensive list from FreshInbox covers support for tons of kinetic email features and client-specific issues you’ll need to solve for.
CSS animations rely on two key ideas: transitions and keyframes. This guide from Litmus shows you how to use them both (and has some useful examples and links to deeper dives), so start there.
A fairly quick way to try your hand at CSS animations is creating effects on your CTA buttons. Try this Email on Acid how-to on creating a pulsing button.
Remember that there are extra considerations when you’re including any CSS in your HTML emails. Take a look at our overview for details on how to make it work.
Urgency and FOMO—two very compelling feelings that inspire conversion. Countdown timers are a popular method because they really work. One caveat: use them sparingly, and only when there’s a truly compelling reason for customers to click through quickly. If you’re constantly sending a countdown—especially for offers that aren’t actually that great—you risk becoming the company that cried wolf.
While most countdown timers are pretty straightforward, you can make it even easier on yourself by letting someone else do all the work. So if your ESP has a built-in timer function, use it! Check out our docs here on how to set it up in Customer.io.
When urgency truly matters, a countdown timer does the math for the reader. Instead of just an expiration date, readers see exactly how long they have left to hop on an offer. A few great use cases:
When you use a GIF for your timer, there are very few downsides—they’re generally well-supported. Be sure to account for two possible issues:
For a compelling GIF timer that’s up-to-date each time someone opens your email, you’ll need a few things:
If your ESP doesn’t have a built-in timer tool, using a service to generate your timer is the fastest and easiest route. There are a lot of free options, and the paid services offer some worthwhile perks like more design customization and personalization. Launchspace has a great review of six top providers to get you started.
The fewer the necessary clicks, the higher the chance of engagement—that’s the promise of embedding forms into your emails. From seeking survey responses to encouraging sales contact and beyond, letting people submit the a form without leaving their inbox smooths out a common friction point—and turns what’s usually one-way communication into a real conversation that builds customer relationships. But embedded forms aren’t always SWAK; limited client support and data privacy can send your efforts to the dead-letter office.
The classic approach of linking to a form is ultimately the most reliable way to ensure your audience can actually, ya know, fill out your form. Here are a few ways to implement it effectively:
Faking a form is another option. If you’re sending a survey with a single question and the option to choose only one answer, you can put your single survey question in text, then use a table with text and background colors in each cell to create response “buttons.” Head over to Really Good Emails to see how the example below is coded:
Reducing friction for certain kinds of messages can have an especially high impact. Embedding forms so recipients can engage from the inbox is particularly useful for situations like:
In general, support for embedded forms is limited, and even clients that allow it differ in how they support it. Litmus details which clients have support and the variations in the customer experience.
Forms also raise the specter of security and privacy issues. The form submission is usually unsecured, so people may get a security warning when they hit submit—not only undermining engagement, but also damaging customer trust. This is why plenty of email clients treat forms as spam triggers.
If enough of your audience uses clients that support embedded forms, follow the step-by-step in this Litmus guide. Here’s what you’ll need to pay attention to:
Lots of layout options, interactive elements, quick load times—there’s a lot to like about AMP for email! AMP started as a Google open-source project to speed up web page loading on mobile devices, and now email developers can integrate some of its features into emails. The catch? It only works in three Google-supported email clients: Gmail, Yahoo Mail and Mail.ru.
While there’s no other method that does quite what AMP for email does, you can use other methods to achieve some similar functionality. All of the special content listed above is possible, and you can use CSS to replicate some of the layout and styling options.
If the majority of your audience uses a client that supports AMP for email, it’s worth considering if:
AMP for email is a spring chicken in terms of development (it was released in 2019, and only for Gmail viewed on a web browser), and with that comes a host of challenges:
If you use Customer.io, you’ve got a leg up: our AMP for email functionality is currently in beta, so drop us a line at firstname.lastname@example.org if you’d like access.
Otherwise, head over to Email on Acid for a how-to guide that will walk you through the process of:
Dark mode isn’t actually special content you create, but it’s a growing trend that any email marketer should be paying attention to. Individuals can choose this setting (which can be implemented at the app or system level) to reverse color schemes, displaying content with light-colored text on a dark background.
Here’s a side-by-side of how one of our emails displays in light and dark mode:
While there aren’t solid stats on usage yet, various industry polls report that anywhere from 80% to 95% of people prefer dark mode. Email clients aren’t the only ones enabling this feature—tons of apps are rapidly adding the functionality. Lots of people want the dark mode option, and when they turn it on, you lose a lot of control over how your email displays.
Trying to control something that’s truly out of your hands is a recipe for frustration. Save yourself time and sanity by taking a conservative approach: optimize things that will help your email render well in dark mode without requiring custom code.
While it’s possible to design and code different versions for light mode and dark mode, it’s not bullet-proof. Some clients (Gmail, for one) apply a brute-force inversion that wreaks havoc with your designs. And trying to hack dark mode can easily result in emails that defy the benefits your customers are aiming for by enabling the feature—not exactly a good look for your brand.
That said, if you want to try your hand at designing and coding for dark mode (and have the time to devote to development and testing), check out the how-to guide at Litmus.
If you find yourself salivating over all the exciting elements you could add to an email (or have eager stakeholders placing orders for them), let these three questions guide your decision-making: