Animated GIFs in HTML Email

Got a nice surprise in my in-box recently from Frye Boots:

Not that I don’t look terrific in a nice pair of heels, but it was the presence of an animated GIF within an HTML email that got me so excited.

For years I’ve evangelized to copywriters, user experience designers (UXDs) and clients about the untapped potential of HTML email. The opportunity for personalizing content and context is nearly unmatched. Plus, the ability to know whether your creative efforts have the power to move an individual to action is intoxicating. So while not perfect in strategy or execution, Frye’s efforts are  noteworthy.

Desktop Experience: Firefox Browser on a MacBook Pro

Mobile Experience: Gmail Client on an Android Device

After buying a pair of their fabled boots (that’s another post in the making), I started receiving emails, some of which used a single animated GIF as the focus of communication and primary call to action (CTA).

It’s not something they do all the time and, frankly, I wish they would use this technique both more (e.g., show me different colors, materials and/or heal heights for a specific line of boots) and less (e.g., forgo blinking holiday greetings). Those points aside, I haven’t seen another brand utilize animated GIFs in this way in recent memory. Seems like quite the opportunity for savvy marketers...

Tips for Using Animated GIFs in HTML Email

• Use sparingly and focus on conversion (i.e., convincing recipients to click through to your website); don’t do it just because you can: think simple product demo or showcase of color or material options, or even a promo for a cool/compelling video.
• Include a CTA in the first frame in case subscribers’ email client won’t load animated GIFs.
• Use an ALT tag for the same reason as above (you should be following this best-practice for all images, regardless of animation).
• Make sure the GIF is clickable and targets a related webpage so there’s no disconnect from the in-box experience to the on-site experience.
• Keep ’em lightweight to ensure quick load times and minimal data usage for mobile users.
• Three is the magic number.

Resources for Animated GIFs in Email, Including How-To’s

If you’re looking for more information on when and how to use animated GIFs in email, it’s best to go straight to the source:

Campaign Monitor: Animated GIFs in Email: A new approach to an old format

• 2012 blog post with lots of good bits, including a table of top email clients’ compatibility with animated GIFs:

“...animated GIF support is pretty much universal across the major email clients… Except Outlook 2007 and 2010.”

ExactTarget/Salesforce Marketing Cloud: Using Animated GIFs in Email

• 2014 blog post with tips and a few examples

“They work really well in email, catching the eye through movement, demonstrating a product's use, or telling a story more easily than a lone static frame.”

Litmus: A Guide to Animated GIFs in Email

• 2014 blog post with tips and a bunch of examples
• Blog comments are also pretty insightful/helpful

“Sometimes there is more than one potential call to action in an email... and I use animated GIFs to announce which one marketing is pushing.”

MailChimp: Animated GIFs and Email

• Technical pointers from one of the most popular email service providers (ESPs)
• Updated in 2016

“When you’re designing emails that contain animated content, always plan for how to minimize the impact on the overall campaign if the animated content fails.”

Animating GIFs as an Alternative to Embedding Video

Embedding video in email is still problematic, even with the continued adoption of HTML 5. There’s an understandable desire among marketers to better brand the in-box and immediately initiate an experience without pushing users to a website or app. It’s an unfortunate reality that many email clients still won’t display embedded video and will simply strip out your code.

That said, it is possible to embed video content in an email with MailChimp, as well as Gmail. (Because Google owns YouTube, embedding a video is as easy as copying/pasting a URL into the body of an email; recipients can watch it while in Gmail.) A couple of considerations if you do go down this road:

• Auto-play is not supported on mobile platforms—email or Web.
• Check with your email service provider and particulars and designing for defeat.

To ensure a consistent experience for my clients’ customers, I typically use a thumbnail of a screen shot with the iconic play button layered on top. It’s a common design pattern for linking users to the website that actually hosts the video and no one’s surprised at the required click-through.