Using Video and Animation to Make Your Emails Dance

The email is a known quantity that customers trust. Marketers have helped cement that trust by giving customers the control, allowing them to manage email preferences and unsubscribes. Marketers respect customers’ permission – and customers get offers and information they actually want. Email is also a win for marketers because it’s so measurable and email’s ROI is highest of all marketing channels. Email is still a critical tool in any marketer’s kit.

So, how can you deliver a fresh element to your users’ inbox? Add motion to your email content to make it more dynamic and engaging. Although email marketing still relies on external links that direct users to a “learn more” or “act now” destination, advanced HTML capabilities allow more engagement with content directly within a message. Lively movement can help connect and captivate the user in the scant few seconds they spend with an email before moving on.

Go video. In the past, the best option was a still image with a play button overlay that linked to an actual video. Now, it’s possible to embed real videos in email with HTML5. HTML5 is an open standard, supported by many email clients. A simple HTML5 <video> tag will incorporate video in email without the need for a pesky 3rd party plug-in that can spell deliverability issues. Some forward thinkers are even incorporating video backgrounds in email. If you’re going to try a video background, be sure to include a fallback image so it degrades gracefully.

Pick animated GIFs. The animated GIF can be used to tell a story, demonstrate a point, draw attention to the key message or show products. Just remember to make sure it’s intentionally placed and well designed. Keep in mind that not every email client supports animated GIFs. Many won’t show animation, so be sure to include vital information in the first frame of the GIF just in case. This great example shows how an animated GIF can be an attention-getter and demonstrate product features at the same time.

Experiment with CSS. CSS animations in HTML emails, a fairly new innovation, open up a world of possibilities and can really bring your message to life.The downside is, they’re not yet widely supported. The Signal team is seeing that Macs using Mac Mail and iPhones are the devices that are at the forefront of the trend. Some webmail clients do support it but you need to be on a Mac and using Chrome or Firefox. This grid from Campaign Monitor goes into detail for each CSS selector and what browser/email client supports it. If you know you’ve got an audience of loyal Mac users, it’s something to consider trying. This great example from Litmus showcases the power of the CSS animation.

You only have a few seconds to capture users’ attention before they move on to the next email. So think about email as an experience and add some movement. The excitement will lead to increased engagement and get your customers excited about your brand.

By: Meghann Porter

Digital Marketing Director

Meghann has over 10 years of experience developing digital marketing programs. At Signal, she manages a wide range of digital initiatives – including SEM, social, display, retargeting, SEO, mobile, user testing and conversion optimization. She’s an integral part of our team, working across industries and clients to contribute to the design and build of all web and mobile projects. Meghann is known for her masterful understanding of online analytics.