Animated GIFs in email: A new approach to an old format
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 |  GIF plays |
| Lotus Notes 6, 7 and 8.5 | GIF plays |
| Outlook 2003, Express | GIF plays |
| Outlook 2007, 2010 |  First frame displays |
| Outlook for Mac 2011 | GIF plays |
| Windows Live Mail 2011 | GIF plays |
| Web-based email clients | Result |
| AOL Web | GIF plays |
| Gmail | GIF plays |
| Hotmail | GIF plays |
| Yahoo! Mail | GIF plays |
| Mobile email clients | Result |
| Android (default) | GIF plays |
| Android (Gmail) | GIF plays |
| Blackberry | GIF plays |
| iPhone | GIF plays |
| Windows Mobile 7 | First frame displays |
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. Click through on the images to see them animate:
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.
12th April
The dreaded Outlook 2007-10 rears its ugly head again.
12th April
Has Microsoft announced when the next version of Outlook for Windows will be released?
12th April
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…
12th April
So am I missing something, or how do we get onto using these gifs?
13th April
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!
13th April
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!
13th April
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.
17th April
gifs are ok if you dont end up in the spam folder
17th April
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!
18th April
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.
19th April
that superbrothers dancing thing (a bear?) was creepy and cool