Using animated GIFs in email

Animated GIFs are going through a renaissance. In the last few months, we’ve seen them resurrected from the cringe-worthy virtual graveyard of ‘Under Construction’ banners and funny profile pics, to be redefined as fine art. This trend is particularly relevant to email design, where GIFs and CSS animations are the only way to add moving images, given the poor video support across the most popular email clients.

But why use them? As Paul Boag quotes in ‘It’s time to look at animated gifs again’:

“Animated gifs can breathe some much needed life into the imagery on your website. They grab the users attention and act as design delighters, making your site stand out from that of the competition.”

The same can be said for email, in which the ‘stand out’ -ness of a button or call to action can make a considerable difference to campaign results. Anna Yeaman at Style Campaign demonstrated how an animated video preview lifted her campaign’s click-rate by 26%… And there’s no reason why you can’t achieve the same.

Support for animated GIFs in email

The great news is that animated GIF support is pretty much universal across the major email clients… Except Outlook 2007 & 2010 (you guessed it). In Outlook, only the first frame displays – which means that if your animation contains any important information, it has to feature on the first frame or risk being lost. Here are the full results:

Desktop email clients	Result
Apple Mail	Yes
Lotus Notes 6, 7 and 8.5	Yes
Outlook 2003, Express	Yes
Outlook 2007+	Info
Outlook for Mac 2011	Yes
Windows Live Mail 2011	Yes
Web-based email clients	Result
AOL Web	Yes
Gmail	Yes
Outlook.com	Yes
Yahoo! Mail	Yes
Mobile email clients	Result
Android (default)	Yes
Android (Gmail)	Yes
Blackberry	Yes
iPhone	Yes
Windows Mobile 7	Info

Support for animated GIFs is rock solid. Compare this to support for video or CSS3 animation and you’ll see why the alternatives are seldom used.

Examples from our customers

We couldn’t wrap up this post without a couple of great animated emails from folks like you.

iart interactive ag

Clarity Communications

Hungry Castle

Superbrothers

Style Campaign has a great selection of animated emails in this blog post, not to mention a solid tutorial so you can get started on your own animation creations!

We’re really looking forward to seeing animated GIFs take off, both on the web and in email. So now, we’d like to hear from you – do you feature animated GIFs in your campaigns? Have any favorite examples? Share them with us in the comments below.

B. Moore

The dreaded Outlook 2007-10 rears its ugly head again.
Jeremy Glover

Has Microsoft announced when the next version of Outlook for Windows will be released?
Nuno Ferreira

Don’t you guy have any data if Spam filters stopped blocking gifs by default?x0aSome years ago I had some clientes who complained that the emails where either blocked at the server level (due to Spam Assassin settings) or went right to the spam folder…
Rosie

So am I missing something, or how do we get onto using these gifs?
Ros Hodgekiss

Jeremy – Not yet, but it’s hard to say if there’s going to be any improvement, after all the joy that Outlook 2010 has brought us ;)x0ax0aNuno Ferreira – From what I’ve heard, animated GIFs shouldn’t trigger standard SpamAssassin rules. That said, having a high image-to-text ratio will, so that’s one to be careful of. x0ax0aRosie – A great tutorial on creating animated GIFs can be found here. Sorry for not making this clearer in the post!
Elliot Ross

Jeremy – there’s Outlook 15(!) on the horizon but initial tests show that it’s more of the same I’m afraid. That said, with the gradual shift to mobile/tablets and the Mac/PC thing, you could argue that Outlook will become less relevant. x0ax0aIf you really want, you can ‘flash’ the first frame for a microsecond, so Outlook shows that but other users don’t see it (though they might if they’re on a slow connection)x0ax0aIn my experience, often the trick to using animated gifs in email is to make them relatively subtle and not too jarring or distracting.. as always though, it’s a good thing to test!
Jason

An important note about using animated GIFs in a CM template. It is necessary the animated GIF be sized properly before it’s uploaded to a template. If CM needs to resize the GIF, the animation gets stripped out and only the first frame is shown.x0ax0aI had a client call me a month ago, extremely frustrated that their animation wasn’t working. A quick email to CM support helped me figure out what was going on. x0ax0aIn addition, I also learned that Photoshop’s Save for Web allows you to save out animated GIFs at a size different from the current document size.
jill s

gifs are ok if you dont end up in the spam folder
Stephanie Fischbach

Thanks for posting Ros. I love the utilization of gifs in email and social platforms. I also wanted to educate about another program you can use for creating gifs- it’s an application for iphone ( not sure if android app available ) called Flixel. It’s very user friendly and lots of fun!
Ben Moore

Animated gifs can be great (so long as they aren’t flashing an ad about teeth whitening, or flabby belly drawings turning into flat tummies with an ‘oh-so-easy tip’). I always create the design so that the first image works irrespective of the animation in case the scroll is blocked.x0ax0aAnother informative article. Muchos muchos.
gobe_bluth

that superbrothers dancing thing (a bear?) was creepy and cool

Animated GIFs in email: A new approach to an old format