This guide is published by:

Goolara,LLC2150 Mariner Square Drive, Suite100

Alameda, CA 94501

Telephone:  (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2017 Goolara, LLC All rights reserved. No part of the contents of this publication may be reproduced or transmitted in any form or by any means

without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All

Rights Reserved.

www.goolara.com

INTRODUCTION

Whether you pronounce it with a soft G (as in “giraffe”), or a hard G (as in “graphic”), gif is one of the most interesting image formats available to an email marketer; especially when used

to create animations. Animated gifs can allow a marketer to triple the content of a hero shot without increasing the real estate, help visualize things that words and static images can’t describe, and, in the best

cases, create a source of viral marketing.

But foreverycleverly-madegif,therearea few dozen mediocre to downright bad ones cluttering up the inbox (not to mention, their often poor use on websites). Animated gifs that flash, wave at you, or otherwise demand your attentionarejust asking for trouble. Smallwonder,then, that thereareposts that state unequivocally animated gifs should not be used in email at all. Using animated gifs, they argue, may betrendy,but theyarerarely useful to customers, and can actually dilute the message andburythecall-to-action.

But what are the rules for using animated gifs? A quick perusal of Facebook shows that animated gifs are capable of inspiring a lot of buzz, but what’s the ROI? What are the best uses of animated gifs, and what are the worst? And are there any best practices for them that an email marketer should follow?

In this guide, we want to provide as balanced and impartial a look at animated gifs as possible.Wesee the advantagesofusing animated gifs, but we see the downside as well. As with any other aspectofemail marketing, therearebest practices and bad ideas.Wewill address both here, along with some clever ideas that take animated gifs beyond the usuallimitations.

Since this is part of our guide series, we will also go through all the steps involved in creating animated gifs of various sorts, along with tools for creating them; including some online sources that won’t cost you a thing.

It’s important to note that because of the nature of PDFs and some ebook formats, we cannot show the actual animations in this guide. In some cases, we’ve chosen to show breakouts of the individual frames involved in each animation to help you get a clearer idea of what would be happening with an individual gif. For working examples of these gifs, please go to the Goolara Blog, where our article,Using Animated Gifs in Email, contains several examples of different types of animated gifs.

CHAPTER 1: UNDERSTANDING GIFS

“Gif”stands for “Graphical InterchangeFormat.”The format was invented in 1987 by Steve WilhiteofCompuServe as a way to provide color images on their bulletin boards without using up much disk space or bandwidth. A couple yearslater,animation was added to the format, which is when the format really tookoff.Atthat point, viable video formats such asAVIand WMV were still a few yearsaway,and the ability to display videos across platforms andbrowsers was still further away than that.

It uses LZW compression, and reduces an image to 256 colors if necessary. This can cause a dither effect in a gif image, so the fewer colors in your image, the safer. It is possible to have more than 256 colors in a gif using a technique called True Color, in which the image is divided into smaller sections, with each section having a slightly different palette, but this technique is rarely used; mostly due to the diffculty of implementing it with many gif animation tools.

One way to thinkofgifs is like flipbooks, where each page is a separate image, and by flipping through the imagesquickly,you get the appearanceofmovement.Youcan control how quickly or how slowly the images cycle, and you have the optionofeither stopping at the endofa setofimages, or cycling back to the first in an endless loop.

Animated gifs have a few advantages over static images. They attract the eye to the image (which is both a blessing and a curse, as we will discuss later), they can help demonstrate how something works, and theyaremore likely to be shared. But too often, designers treat these gifs as somesortofmagical device whoseverypresence ensures higher clickthrough rates. In fact, a badly designed or ill-used animated gif can have the opposite effect. The proper useof

animated gifs requires a keener awareness of how your eyes are tracking your message, and the

ability to look at your email as objectively as an unknown recipient.

There are three basic types of animated gifs:

• Loopedanimations

• One-passanimations

• Loopeddisplays

Each of these has its advantages and uses. Here’s a quick look at how each of these works.

Looped Animations

In a looped animation, the series of images combine to create an animated effect, such as a sign flashing or a person walking. These are used, mainly, to enhance the email’s visual appeal, but care must be taken to ensure these animations don’t distract from the main message. A

common example is the countdown clock signifying a limited time offer.

Limited-pass Animations

Limited-pass animations are animations that stop after a certain point. The most common version is the single-pass animation, where the animation stops at the end of a specific sequence. A limited-pass animation might also be used to enhance a message. A sign that flashes three times is an example of this.

Carousels

An altogether different approach to animated gifs is to make each image a separate and distinct image, then cycle through them to show different products. With this typeofgif,there is no attempt to create an animation effect. The various imagesarethere to sell various products using the same real estate. For most purposes, this gif would be set to an endless loop. As

long as the email is open, the image will cycle through the various images in thegif.While it is possible to create a carousel gif that isn’t looped, its value would belimited.

Requirements

Therearemany ways to create animated gifs. Photoshop is the most popular commercial tool, but thereareplentyofalternatives, including some web sites that will let you create gifs forfree.Careshould be taken using these web site,however,as they often add their own watermarks to the exported gifs.

CHAPTER 2: LOOPED ANIMATIONS

Looped animationsarewhat people thinkofwhen they thinkofanimated gifs. These continuous cyclesofactivity have been entertaining and annoying people for ages. The imagebelow,for instance, is a breakdownofan animated gif that contains six illustrations set to appear for 0.2 seconds each. This sequenceofillustrations creates the illusionofafigure

walking. The continuous loop is consistent with the design since there is no logical ending point in the series.

This is about as simple an animation one could make that still appears fluid. The more sophisticated and smooth the animation is, the more frames it requires, which increases the file size.We’veseen gifs with as many as as 109 frames and as big as 799Kb—a bit hefty for email. The walking man gif shown above, on the other hand, is only 26Kb. Finding the sweet spot between file size and animation fluidity may take some work, but the moreofthese typesoffiles you create, the more intuitive things like frame number and durationbecome.

In most cases, you’ll want the intervals for this type of continuous flow animation to be constant across all frames, but they don’t have to be. It is possible to use different display intervals for each of the frames to create interesting effects.

Keeping it subtle

A looped animation has the most entertainment potential, but it also has the most potential  toirritate.Iftheanimationistoodistracting,youruntheriskofpromptingthereadertodelete the offending email without reading it. Garish, flashing gifsarea sure-fire way ensure thatyour recipients don’t look at your mailings too long. Also, if an animation is too eye-catching, your message runs the riskofbeing overlookedentirely.

For this reason, animated gifs are often made as innocuous as possible when they are used in email. Take this example from Ann Taylor:

The only animation in the ad is the clock in the “O” of “Tock”:

The clock is front and center, but it is easily ignored in favor of the message. As it should be, this image is all about the message. The image is screened back, and the animation is so minimal that the thing we end up focusing on is the actual message.

Two Rules for Looped Animations

If an email is going to have an element that is constantly changing, you don’t want it to distract from the primary message. If you have a looped animation in your mailing, you need to look at it carefully. You should be able to answer both these questions with a firm yes:

1: Does it need to be looped?

Is there any advantage to endlessly repeating the set of images? Does the last frame lead logically back to the first frame? In the examples of the clock and the walking man, looping is logical. The clock never stops ticking and there are no frames in the walking man animation that bring the figure to rest.

2: Does it distract from the message?

Look at this example below (shown here without animation):

In the animated versionofthisgif,the woman twirls around and waves at theviewer.While this may help engage the viewer with the woman in thegif,it does little to promote the actual message.Wearetoo busy looking at the woman to pay much attention to themessage.

In this case, a static image or a limited-pass animation (see chapter 3) might have done the

jobbetter.Keepin mind that animation in an image is going to naturally attract the eye,andsometimesitrunstheriskofpullingthereader’seyeawayfromtheactualmessage.Youneedto askyourselfifyouranimationisattractingtheeyeintothemessageorawayfromit.

Now here’s an example of a use of irregular time durations that we mentioned earlier in this chapter. This comes from an email that was sent out by Bed, Bath & Beyond:

To send out this message, BB&B sliced the image into pieces and replaced the dog in the picture with an animated version. In the animation, the dog’s ears flap in the breeze created by the fans. The dog is directly in the center of the image, which keeps the viewer’s eyes close to the message. There is still a danger of the reader never seeing the message, but the risk is mitigated by positioning the dog in the center of the image. To create the seemingly random flapping effect of the dog’s ears, BB&B created a gif with alternating frame display times as shown in the expanded detail.

There is no rule that says animations have to remain in constant motion. In the nextchapter,we’ll look at an entirely different approach to animatedimages.

CHAPTER 3: LIMITED-PASS ANIMATIONS

Although not as common as looped animations, limited-pass animations are sometimes a better way to go for certain types of animations. They are especially useful to create short animations that need to stop after a certain point. In most cases, limited-pass animations stop after the first pass. To the left is a frame-by-frame breakdown of an animated gif theme often seen in promotional mailings: a little banner train (or truck, sometimes) that pulls an announcement of a sale across the screen.

There’s not much value in setting this up as an endless loop. The message we want to convey

is contained in the final frames, so we’ll want that message to be visible for as long as possible. The final frame is the one that we really want everyone to see. The rest of the frames are mainly there to create an animation and draw the eye to the banner. Looping this might actually have the opposite of the intended effect, where the eye is drawn to the banner just as it finishes completion, only to suddenly disappear as it starts over.

On a few occasions, you may prefer to have the frames loop a specific numberoftimes and then stop. A flashing sale sign, for instance, will catch your reader’seye, but you know that if it continues to flash, it will become a distraction. In that case, you can set the gif to repeat three times and stop. This lets the animation do its job and attract the eyesofthe readers, and then end so that they can concentrate on the actual message.

Make the Last Frame the First Frame

Once you have created all the frames for a limited pass animation, there’s one more thing you must do: make your first frame the last frame. Not all email readers can display animations, and when they don’t, they only display the first frame. That means, if you leave the train animation as it is shown in the example above, recipients using animation-less email clients will see only this:

Not much of a message is it? This might not be such a critical issue if not for the fact that Microsoft Outlook—one of the most commonly-used email readers on the planet—is one of the email readers that doesn’t display animations.

You want the flow of the animation to be as smooth as possible, so you need to set the time length for that first frame to 0 seconds, or “no duration.” There will be quick flash of it in email readers that can use animation, but that is better than the alternative. Here is a breakdown of the animation sequence, with the time codes listed to the left:

CHAPTER 4: CAROUSELS

ike the looped animations, carousels cycle continuously through a sequences of images, but unlike looped animations, the frames make no attempt to create the illusion of motion.

L

They are used, instead, to show a variety of products in the same area. These are especially popular in the retail field, partly because of the visual stimulus a changing display provides, and partly to display as many images as possible in the space normally reserved for the hero image.

The image carousel is a common feature of web site home pages, particularly when the company sells several products or services. It is normally a function of JavaScript, but JavaScript is not available to the email marketer. The carousel gif accomplishes a simplified version of the same thing.

For example, here is a breakdown of four images that appeared in a gif for a sweater sale at The Gap:

Someofthe rules regarding carouselsarethe same as those for other typesofanimations. As with looped animations, you don’t want the animation to get in the wayofthe message and distract from the sales pitch.Youalso want it to intrigue—not irritate—thereader.But carousels come with their own rules.

The Rule of Four

You can put as many images into a carousel as you want, but, for most purposes, you should restrict your carousel to three or four images. More than that and the viewer starts to tune out, stops paying attention to the individual products, and starts seeing the gif as an animation. If the images are all of the same product in different colors, then you might get away with five.

The more disparate the images, the more important it is to avoid overwhelming the viewer.

Similarity Dictates the Speed

Let’s suppose you have an animated gif containing four images of the same basic style of shoe in four different colors. Here is a breakdown of an example of this from Andrew Marc:

The animation on this loop is set to one second, which is perfectly acceptable in this case. The images are all similar enough to allow the viewer to take in each one during the second it is displayed. As a rule, one second is the minimum amount of time you’d want to display each carousel image, as long as the images are visually similar—three sweaters, four shoes, etc. But suppose the gif images look something like this:

Now each image takes a little longer for the eye to process. None of these images have anything in common, so the brain has to start from scratch with each image.

The example on the previous page is exaggerated.It’sdoubtful if anyone would create a carousel with that muchvariety,buthereis a series taken from an actual email sent by Levenger:

Although all of these images have the same product theme (accessories for the iPad), they are as disparate as can be. A pen on a blue background is followed by a book on a blond wood table, followed by an iPad propped on a wooden easel on a white background, and so on.

With each image, the brain has to readjust to what it is seeing. Had the animations in the gif been slowed down to at least 1.5 seconds per image, it would have been possible to take in all this information, but the settings were left at the default (one second)—much too fast for this amount of variety. To make matters worse, the carousel contains five images. A carousel with this much variety would have been better off repeating after three.

Placement in Email

Partofthe popularityofcarousels comes from the ability to display more than one image inthe toppartofthe email. Preview panes in some email clients displayverylittleofthe message, so a good assortmentofimages does have the potential to catch the eye. But if your content isn’t interesting to your recipients, they aren’t going to bother reading below the fold. Compelling content is still king, so don’t neglect this in favorofcreating cleveranimations.

CHAPTER 5: ADVANCED TECHNIQUES

Animated gifs have been around a long time, which is undoubtedly why so many email clients support them. In spite of this, people continue to come up with new ways to use them or enhance their effectiveness. Here are just a few of the more recent innovations, along with an alternative to the standard gif carousel. The first three techniques listed in this section are simply techniqes to create gifs that look as if they have depth. The last technique is a CSS solution to using multiple images. While we find these techniques intriguing, we recommend approaching them with caution.

Cinemagraphs

Cinemagraph is a fancy name for a specific styleoflooping animatedgif.While most animated gifs create the imageofmovement through a repeated action that is front and center in thegif,Cinemagraphs take a different approach, relying on subtle animations. In the examplebelow,the only movement in the gif is thewoman’sloose lockofhair,which sways gently in the breeze. The term was coined by Jamie Beck and Kevin Burg, who have several examples available on their website.The effect ishardto describe. One person compared theeffect

to the moving photos that appear in the magic newspapers in theHarryPotterfilms, and it is an aptanalogy.Theeffect’susefulness in termsofselling products is questionable, but it is intriguing enough to inspire recipients to share the email.It’salso a subtle enough effect to

avoid being irritating. Properly done, a Cinemagraph has no identifiable beginning or end point

in its animation.

3D Gifs

An image that jumpsoffthescreenhas a highWowfactor,but the limitations email clients putontheirHTMLmakesthisalmostimpossible.Nonetheless,peoplehavecomeupwithtwointerestingwaystocreatetheillusionofthreedimensions.Thefirstmighthavesomepotential value for use inpromotionalemail. The second, whileinteresting,isoflimited use, but we’ve listedithereincaseyoufindaspecialneedforit.

The Vertical Bar Technique

A clever, relatively recent technique for creating a three-dimensional effect involves placing vertical gaps in the image and then letting elements break through these gaps, fooling the brain into seeing three dimensions. This technique is most effective when the background portion of the image blurs while the foreground portion becomes sharper. Several sites online offer dazzling examples of this technique. As clever as this technique is, it also has a high potential to completely distract the reader from the actual message, so use with caution.

The Wiggle Gif

Withthistechnique,imagesareplacedontopofeachotherandrapidlyloopedtocreatea3D effect that is similar in effect to those lenticular lens images used tocreate3D photographs. A Wiggle Gif can be made upoftwo images, when takenfromastereo-optical picture(as shown above), or several images, when takenfroma video. While it certainly doescreatea 3D effect,it’sfartoojitterytobeofmuchuseinemailmarketing.Itdifficulttoseethedifferencebetweenstereoimageswhentheyareplacednexttoeachother,butthereisenoughparallaxtogivethe

image the appearanceofdepth.Togive you a better ideaofwhat is happening,here arethetwoimages placed on topofeach with the top image at 50% opacity:

A True Email Carousel

Anotherveryadvanced technique is the CSS-driven email carousel, created by Justin Khoo atFresh Inbox. This is a clever technique, but it requires a thorough knowledgeofHTML andCSS. It is also limited as to which email clients with which it will work. It won’t work with any email client that doesn’t use styles, or with email clients that only use a limited setofCSS properties.

CHAPTER 6: THE TRUTH ABOUT ANIMATION

Before you start using animated gifs in your mailings, there are a few important considerations you need to add to the mix. Just because you want to use an animated gif doesn’t mean

you should. Sometimes the simplest approach is the best approach. It is also important to remember that engagement starts well before the first image is loaded. If the subject line isn’t compelling, or the recipient is indifferent to your mailings, it won’t matter how perfectly you’ve executed your animation. No one will ever see it.

As with every other aspect of an email, the best way to verify if the gif is helping or hindering the effectiveness of the email is run a split test. This is what Dell did when they introduced their XPS 12 Convertible Ultrabook (shown below). In this case, the split test showed that the animated gif did a better job of conveying the mechanics of the device than a static image, but the real takeaway here is that they ran a split test before sending. They thought that the

animated gif would do a better job of conveying the complexities of a laptop that converts into a tablet, but they didn’t assume this was true. It was only after the initial test results came back showing better engagement for the animation that they went forward with the mailing.

The careful use of the occasional animated gif can be effective, but, as with anything, overuse can cause your recipients to stop responding to them.

CHAPTER 7: TOOLS OF THE TRADE

If you are interested in creating animated gifs, but are new to them, here are a few resources to

help you get started. The first one is the best of the bunch, but it is also the most expensive.

Adobe Photoshop (desktop)

Adobe Photoshop has made it easy to create animated gifs using the Timeline window. It lets you control the frame rate for each image and you can choose how many times to repeat the animation. Full instructions on how to create animated gifs with Photoshop can be found onAdobe’s Online Help Center.

Picasion (web)

Of the online gif makers, Picasion is the most useful. Unlike most online gif makers, it does notplaceasourceidentificationintheframe.Itdoesn’tofferthelevelofcontrolaffordedwith Photoshop, but it is a good choice in apinch.

GIMP (desktop)

For the Unix crowd, GIMP has long been the best alternative to Photoshop. Creatinganimated gifs with GIMP is a little more complicated, but this is a full-featured program that offers about 80%ofPhotoshop’scapabilities at a much lower price (i.e., free).

Mobile Apps

Since the last versionofthis guide, there has been an explosionofanimated gif making apps for both iPhones and Android phones. A search for“gifmaker”in either store will give you a hostofoptions. Keep in mind that, while manyofthese appsareavailable for both platforms, some work better on one platform than theother.

About Goolara

Goolara has been in the email marketing business since 2005. Symphonie,Goolara’spremiere email marketing solution is available in on-premise and cloud-based, SaaS deployments. The powerful software features many advanced capabilities, such as full-featured dynamiccontent, transactionaland

triggered email, and customizable report generation features. It is easy to use and runs from a browser-based interface using Chrome, Firefox, Internet Explorer, or Safari. Goolara is headquartered in Moraga, California and can be found online atwww.goolara.com.

Goolara, LLC

1030 Country Club Suite D Moraga, CA 94556

Telephone:  (510) 522-8000

(888) 362-4575

Fax: (510) 522-2457

Copyright © 2017 Goolara,LLCAll rightsreserved.

No part of the contents of this publication may be reproduced or transmitted in any form or by any means without the written permission of Goolara, LLC.

Goolara and the Goolara logo are registered trademarks in the United States, other countries or both. All Rights Reserved. All other company and product names and logos may be

trademarks of the respective companies with which they are associated.

www.goolara.com

Table of Contents

INTRODUCTION

CHAPTER 1: UNDERSTANDING GIFS

Looped Animations

Limited-pass Animations

Carousels

Requirements

CHAPTER 2: LOOPED ANIMATIONS

Keeping it subtle

Two Rules for Looped Animations

1: Does it need to be looped?

2: Does it distract from the message?

CHAPTER 3: LIMITED-PASS ANIMATIONS

Make the Last Frame the First Frame

CHAPTER 4: CAROUSELS

The Rule of Four

Similarity Dictates the Speed

Placement in Email

CHAPTER 5: ADVANCED TECHNIQUES

Cinemagraphs

3D Gifs

The Vertical Bar Technique

The Wiggle Gif

A True Email Carousel

CHAPTER 6: THE TRUTH ABOUT ANIMATION

CHAPTER 7: TOOLS OF THE TRADE

Adobe Photoshop (desktop)

Picasion (web)

GIMP (desktop)

Mobile Apps

About Goolara