Animated .gif’s are cool again?

Yes. Yes they are. In emails, particularly!

Sometimes, in our rush to out nerd each other, designers and web devs try and over-complicate the simple things. For example: animation. Sure, there’s nothing cooler looking than a really slick animation, and clients are always looking for the coolest and slickest. But when budgets become a concern, advanced scripting comes into question and deadlines come barreling down on you like  that boulder barreling down on Indiana Jones, then maybe you should be looking for a quick, effective solution to a pretty easy problem to solve.

No, no, no. Just… no.

Enter: the animated .gif.

I’m not talking about those cheesy blinking “under construction” .gif’s, no. There’s no reason to make your page look like a 1996 GeoCities page. Animated .gif’s have come a long way since those nightmares. What I’m talking about is adding a little something to your email design, for an extra pop when you want your email to stand out in your users inbox.

Now “movement” can be done in all sorts of ways on a website: any front end developer worth his or her salt can bounce, fade in/out or effect text and images on hoverstates fifteen different ways with a few lines of CSS, and even more with JavaScript, Flash or video. But achieving animation in an email is a whole other animal.

Email clients occasionally support video. Let me clarify… Apple Mail and iPhones support video in email. That’s it. Everyone else either shows fallback content or an empty image box, which is unacceptable when you’re trying to stand out in your customer’s inbox. Flash content is a big no-no – most email clients home automation security settings prohibit ActiveX controls like Flash from running. And don’t even think about trying to embed JavaScript in an email, the majority of web-based email clients will strip out your JavaScript content automatically and disable any active scripting contained in the campaign. Using JavaScript is a sure way to get your campaign sent straight to the spam folder.

But what about an animated .gif? Totally acceptable! The .gif has been around since 1987, and is supported by all browsers and email clients.

Animated .gif’s are a great way to add something special to an email campaign. Like when our client Burger Lounge wanted to spice up their monthly birthday emails, we immediately thought this would be a great place to use an animated .gif. And as it turns out: it was!

We built our .gif to match the movement on the Burger Lounge homepage, and optimized the animation down to nice nimble 300Kb file size. To make the email even more user-friendly, we built the email in a responsive manner, ensuring that the message get delivered no matter what type of device the guest was using for checking email: desktop computer, tablet or mobile phone. This is something we’ve been doing for quite a while now using our direct email program, contact:solved.

Animated .gif’s are supported in almost all major email clients.

Through compatibility testing of animated .gif’s in all the major email clients (shown in this graphic) we were able to verify that animation works perfectly in all these email clients:
• Apple Mail
• Lotus Notes
• Outlook 2000
• Outlook 2002 (XP)
• Outlook 2003
• Outlook 2007 *
• Outlook 2010
• Outlook 2011
• Outlook 2012 *
• Outlook 2013 *
• Android
• Gmail on Android
• Outlook.com on Android
• BlackBerry
• iPhone
• iPad
• Windows Phone
• AOL Mail
• GMail
• Outlook.com
• Yahoo Mail

* We did run into some compatibility issues with animated .gif’s working correctly in Outlook 2007, Outlook 2012 and Outlook 2013… but there is a workaround. Just make sure that the first keyframe in your animation contains the full animated message: this way, the full message in the image is still delivered in cases where the animation is not shown.

The lesson here is simple: animated .gif’s still have a place in modern day web design. No, they aren’t the main ingredient in your dish. They can, however, add flavor and texture to sites and emails when you need.

Have you seen an animated .gif used effectively in an email campaign? Do you have any opinions about using animated .gif’s in web or email applications? Share it here, we’d love to know what you think!