How to Add Special Content to Your HTML Emails

Blue Plate Special

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:

• How likely are these elements to drive conversion?
• How much of your audience will actually see the content?
• Is the potential engagement worth the extra time and effort?

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:

• Know what email clients your audience is using. Start with the Litmus list of client market share, but be sure to mine your own data too.
• Nail the fundamentals of building HTML emails that perform well.
• Take time to test and troubleshoot every email—and plan extra testing time if you’re adding special elements.

HTML5 video

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. 

Alternative options

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.

When it’s worth the trouble

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:

• Video game release announcements
• How-tos for apps or SaaS products
• New feature announcements
• Product/service use case positioning
• Before-and-after messaging

Common pitfalls 

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

Allows videos to be played

• Apple Mail
• Outlook for Mac
• iOS 10+, Native Client
• Samsung Galaxy, Native Client
• Thunderbird

Shows fallback image

• Android 4, Native Client
• AOL Mail
• Gmail Webmail
• Gmail Android
• Gmail iOS
• Outlook 2003-2016
• Outlook Android
• Outlook iOS
• Outlook.com
• iOS 9, Native Client
• Yahoo! Mail
• Yahoo! Mail Android
• Yahoo! Mail iOS

You’ll need to account for a few other issues as well:

• Apple Mac clients support video, but have some tricky issues you need to work around
• You’ll need to use a fallback image for many email clients (and some of those need extra coding to make the fallback work)
• Media queries are required to make sure you serve up the right experience for each email client

How to code it 

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:

• Every iOS update seems to have an impact on how video is handled
• There are so many different Android devices that it’s hard to account for every possible customer experience
• MP4 is the only video format Apple supports (so it’s unwise to use any other format)
• If you’re hosting the video on your own servers, you need to configure them to output the correct MIME type (and if you’re unfamiliar with how to do that, it’s a good sign that embedding a video will be more trouble than it’s worth)
• All the above means that you’ll need to invest the time to put your email through the paces very thoroughly when testing 

CSS animations

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. 

Alternative options

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.

When it’s worth the trouble

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.  

Common pitfalls

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

Does support CSS transitions and CSS keyframes

• Apple Mail
• Outlook for Mac
• AOL Mail
• Apple Mail on iOS
• Android/Samsung
• Outlook App

Does not support CSS transitions and CSS keyframes

• Outlook 2007-2016
• Gmail
• Yahoo Mail
• Outlook.com/Office 365
• Gmail App

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. 

How to code it

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. 

Countdown timers

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. 

Alternative options

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.

When it’s worth the trouble

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:

• Pre-sales of tickets or hot products
• Extremely good and rare offers
• Event reminders and registration deadlines (especially useful for B2B webinars and conferences)
• Shipping cutoffs for holiday ordering 
• Expiring free trials

Common pitfalls

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:

• Many Outlook clients only display the first frame of the GIF, so you’ll need to create a compelling fallback image
• If images are blocked in your email, your timer will be too—so be sure the urgency message is reflected in text and, of course, include compelling alt text

How to code it

For a compelling GIF timer that’s up-to-date each time someone opens your email, you’ll need a few things:

• The GIF itself (with a file size of well under 1MB to ensure load time isn’t slowed down)
• A server resource from which the client can pull an always-up-to-date GIF (check out these instructions from Litmus on using a PHP script for this)
• Alt text for your image to account for blocked images and screen readers

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. 

Embedded forms

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.

Alternative options

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:

• Display an image of your form that clicks through to a landing page (as always, ensure you have alt text and a separate CTA button to account for blocked images)
• Let readers know how long it will take to fill out a survey
• Send people to a compelling landing page that delivers actual value (after all, they’re doing you a favor, so reward it!)

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:

When it’s worth the trouble

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:

• NPS surveys and other singe-question asks
• Customer-profile update nudges 
• Subscription preferences management (to minimize unsubscribes)
• Product or customer service reviews
• Booking appointments for demos or sales convos

Common pitfalls

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.  

How to code it

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:

• The setup for submitting data to your destination
• Creating your form fields and types of input
• Passing through hidden information
• Form submission CTAs
• Fallbacks for different clients

AMP for email

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. 

Alternative options

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.  

When it’s worth the trouble

If the majority of your audience uses a client that supports AMP for email, it’s worth considering if:

• Your email has a lot of images
• You need a more dynamic layout
• Interactive elements enhance your message
• You’re concerned about load time

Common pitfalls

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:

• Email client support is extremely limited (just three clients at the moment)
• The future of its adoption is uncertain: clients have been slow to adopt it, and Outlook recently abandoned its efforts to support it
• You need to register with Google to get access to it, and the process is time-consuming
• Not all AMP components are available, which is frustrating if you’ve been developing web pages with AMP (here’s the supported components)    

How to code it

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 product@customer.io 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:

• getting registered with Google
• setting up your AMP HTML document
• creating your layout and elements (keep this GitHub resource handy for that)
• testing and validating your code

Dark mode

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.

Best practices

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. 

• Use graphics with transparent backgrounds to avoid ugly white rectangles in dark mode
• Add a white stroke around black text or icons so they don’t disappear on a dark background
• Test every email in dark mode to ensure your key elements and CTAs aren’t rendered unreadable

Should you join the dark side?

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. 

Footing the bill for your fancy feast

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:

• What’s the business case for spending development dollars?
• How does it drive improved KPIs for the campaign?
• If (or when) it breaks, how bad is the customer experience—and can you afford the risk?