Utilizing Animation Within Email Using GIFs and CSS
Today’s inbox is a competitive place. Email marketers understand the need to entice their audience not only with personalized content and tempting offers, but also trendy visual appeal. The interactive, video-heavy web experience of today has forced marketers to push the boundaries of email-friendly HTML beyond a clean, branded design. Easily implemented animations within an email, whether by animated GIF or simple CSS, provide a means to stand out in a crowded inbox and a way to look and feel consistent with a brand’s website.
Today we’re going to explore a few different ways to incorporate animation within your marketing emails.
Using Animated GIFs
If you’ve been paying attention to marketing emails over the last five years, you may have noticed the ever growing use of animated GIFs. These delightful moving images can be used to promote multiple products, educate a user on navigating a new feature, or just provide some eye-candy that could be the difference between a click through and a delete. The best part? When comparing GIFs to other advanced interactive elements, GIFs render wonderfully across most email clients. Troublesome clients include Outlook 2007+ and Windows Phone 7, which only display the first frame (not bad!)—so be sure to include all the vital information in the first frame.
GIF Example 1
A countdown timer is a great way to add a sense of urgency to an email. This countdown timer, from our friends at LiveClicker, is one of our favorite uses of animation. Strategically, countdown timers help create a sense of urgency for subscribers, eliciting that ever present FOMO. The fear of missing out on a limited time offer can often encourage a click to explore the offer further, increasing your chances of seeing conversions. Of course, you can use a countdown timer for many different purposes—countdown to the end of a sale, countdown to an event, countdown to a holiday, etc.
Looking for a way to incorporate countdown timers into your strategy? LiveClicker provides a straightforward tool to create, schedule, and design a countdown timer. It even allows for flexibility for subscribers in different time zones and gives marketers complete control over a replacement image when the timer hits zero.
Animated GIFs as Background Images
Another darling of email marketing—background images. Why not combine two trends in one? By using a GIF as a background image, we can ensure that our overlaid HTML copy and the call to action are rendering even when images are off.
GIF Example 2
This example showcases Cinemagraphs—still photos where a minor, repeated movement occurs, that have taken web design by storm as a way to add visual interest. Any GIF can be used as a background image, but cinemagraphs work particularly well because the mild nature of the animation limits distraction—enhancing the content of the email, not detracting from it.
Like all GIFs, GIFs as background images will animate in all email clients except for Outlook 2007+ and Windows Phone 7, which will only display the first frame of the animation.
CSS Animation
Animating with CSS is a great way to include moving email elements without taking the time to create a custom GIF. CSS animation also loads muck quicker than GIFs, which tend to be quite large. The downside? CSS animations only render in a limited number of email clients, including iOS, Android Native Mail, Outlook for Mac, and Apple Mail.
Alex Ilhan of Email on Acid opened our eyes to some of the possibilities with CSS animation in this blog post. Check it out for real world examples and potential marketing uses.
Fade In/Out Example
Translate Up/Down Example
Rotate Example
Bottom Line: Get Creative
We encourage you to get creative when it comes to including animation in your emails, but remember animation is meant to enhance your email content, not take away from it. Use animation sparingly and keep in mind the subscribers whose email clients won’t render the effect.
As always, if you need any assistance in tweaking your code, our Implementation team is here to help!
Note: this post was first published on September 12, 2017 by Adam Sukenik, it was re-written and re-published by Polly Flinch on March 6, 2019
