By: Mary Bier

Date: March 5, 2015

A GIF (Graphics Interchange Format) is an image format that, unlike most other image formats, can be animated.

If you think back to the early days of the internet (circa 1990’s), you’ll recall that animated GIFs were the primary way of adding movement to a webpage.

robot gteducate_e0 cowboy

Now, animated GIFs are commonplace, not only online, but in the emails you receive in your inbox. When used thoughtfully and strategically, animated GIFs can enhance your email’s impact and message, thereby increasing audience engagement and brand affinity.

When to use animated GIFs

Animated GIFs are particularly effective when used in the following types of emails. This clever use of animation can be instructive, and guide recipients how to do something, from how to use a new app to how to tie a tie or wear a dress.

INSTRUCTIVE

How to use an app (Salesforce)

salesforce

How to Tie a Tie (Brooks Brothers)

0828_tieanatomy_01How to Wear a Dress (Sambag)

sambag-animated-GIF-20131002

THIS OR THAT

Animated GIFs are also an excellent way to support an email’s content in an entertaining, visual way. Take these “This or That” type of emails, for example. With this sort of presentation, it’s easy to see how a product could be perceived or used in a variety of ways.

American Apparel

ONL_030215_GROUNDHOG_EN1Kate Spade

katespade_Contrasting_Looks_01

ANNOUNCEMENTS

If you’re announcing something, like a new promo code, product launch, or starting date, animated GIFs can be highly engaging to help illustrate and build excitement about the event.

Netflix, “House of Cards” series premier

frank-compressedWest Elm free shipping promo

west-elmAnthropologie Pinterest account launch

anthropologie

Using CSS for animations

If you’re looking for an alternative to animated GIFs, there are other methods of adding animation that utilize CSS (although animated GIFs are more widely supported).

Using CSS animations is something we will be seeing more of, since it offers smoother transitions than animated GIFs, is very lightweight, and looks great on any sized screen. Unfortunately, the email clients that currently support it are very limited:

  • iOS
  • Android Native Mail
  • Outlook for Mac
  • Apple Mail

Using similar technology, we are able to apply rotation using CSS. This allows for blocks of content and text to be rotated. View this clever example that Code School used to promote angular.js courses.

 

HTML5 videos

Unfortunately, the support for HTML5 videos in emails is much more limited. Check out this example from The Email Design Conference. Although a static fallback is offered for email clients that don’t support it, the video portion of the email only works in two clients:

  • Outlook for Mac
  • Apple Mail

 

Other fun tricks

These methods don’t offer animation but are great ways to engage with customers who view emails with images off, or plain text versions:

  • Image slicing and alt tag styling (Pizza Express)
  • Text only version: combining symbols/letters/numbers to create logos, images and layouts (MailChimp)

 

Things to consider before using animated GIFs

Although animated GIFs are supported by most email clients, they are not supported by all (Outlook 2007, 2010, 2013 and Windows Phone 7). As such, selecting a good first frame image is necessary (i.e. don’t rely on the animation to carry the entire design or message).

Animated GIFs can be excessively large file sizes (i.e. can be slow to load and play — not ideal when an increasing number of email recipients are viewing email on mobile devices and using data plans). When creating your animated GIF, be mindful of its file size to give your email audience the best experience possible.

Animated GIFs shouldn’t be overused; they should be used with intention to spark interest and engage the viewer, not overwhelm them.


Want to learn more about how using animated GIFs in your communications can boost your email’s performance? Curious about how animated GIFs could improve brands’ emails? Let us know and we’ll be in touch.