GUEST COMMENT Tips for animating your emails

by Jim Davidson

Imagine cake and ice cream every day of the year. People singing to you while you awkwardly shuffle your feet – every day. If every day was your birthday, you would either really start to hate anything birthday related or you would just get bored of it all as you progress through your cake-filled day.

Think of animated gifs in emails as your birthday celebration. They can be fun and flashy but they can wear out their welcome.

I open and click nearly 5,000 promotional emails each month to maintain my email marketing database. I see a lot of stunningly beautiful and effective uses of animation. I also see overuse, misuse and just plain ugly animated gifs. There are two factors to consider if you are either planning to use animation or are concerned about how you are currently feeding those moving frames to your subscribers. What is the animation trying to do? Does it function properly? Answering these two questions will make your animated emails more effective and save your subscribers from headaches.

What is the animation trying to do?

Let’s look at some of the most effective ways to use animation.

Grab attention I’m starting with the broadest category because it is often the most abused. All animation is, of course, trying to get the subscriber’s attention. But walking the line between novel and obnoxious can be tricky. Adding motion to an email just for the sake of doing something different is not a smart use of the image format. The most common offenders have animation with within the email blink on and off or it shifts around way too quickly. In this example from UncommonGoods, the concept is clever but the speed of the animation overwhelms the content of the email.

Click to view animation

NastyGal used depth-creating technique that effectively grabs the subscriber’s attention without containing a promotional message or any function other than being cool. So, when you consider the balancing act between novelty and being obnoxious, make sure the animation is at least engaging to the subscriber which communicates a message and doesn’t give them a headache.

Click to view animation

Product demonstration Using animation to demonstrate how a product is used is not seen too often. It can be challenging to fully communicate how a product is used in the frozen frames of an animated gif but it can be done. Take a product that has a unique function that may not immediately be obvious or understood by consumers and see if you can create five or so steps to illustrate how it’s used. Use those steps to create your animation. Roots rolled their ‘Roll Over Boot’ up and down showing customers how the ‘One boot [with] three looks’ can be worn.

Click to view animation

Telling a story Brands often take a cue-card approach to state their message. This can present a lot of information in a small amount of space, however you are gambling on the increasingly short attention span of email subscribers. Immediately provide a visual cue that lets the subscriber know that there is more to come and keep the overall animation short. The ‘kiss it goodbye’ first frame of this ArdenB email is quickly covered in smooches before revealing that their 75% off sale ends soon.

Click to view animation

Mimicking video playback Few email clients are able to play video files within in the inbox. Adoption has been slow and animated gifs represent the majority of non-static email creative elements. Non-animated screenshots of video players are most commonly used. It can be difficult to show enough of the video to properly represent the content within the file size and color palette limitations of an animated gif. Either highlight a key scene that relates the tone of the clip or communicates the value for the subscriber to click to view. This horizontally structured email from American Eagle uses animated gifs overlaid with a play button to showcase their vibrant brand.

Click to view animation

The brands that are trying full video playback within the inbox will serve an animated gif version of the video if the subscriber’s inbox does not support the function. This often results in very large file sized and a clunky experience. If you are testing video in the inbox, use an animated gif that is meant to encourage clicking through rather than presenting the entire video.

Does it function properly? I have seen many otherwise beautiful and cleverly animated emails ruined by technical issues. As with any marketing email, it is important to test in multiple web browsers across various email clients and mobile devices. Make sure you are adding to the inbox experience by using animation and not frustrating or confusing your subscribers.

Some of the most common animation downfalls are:

Improperly sliced images Emails are frequently sliced into multiple images to decrease the file size of an email and gain control over clickable areas. Do not slice the animated portion of your email. Even animations that have the same number of frames and transition times will download a different rates resulting in the animation displaying out of synch.

The ‘end of season sale’ image divided two animated slices in this email from Rockport. The smaller image on the left downloads first and begins its animation loop. The image of the models on the right downloads shortly after the first and begins its looping slightly out of synch. After a few frames, this results in disconnected scenes.

Click to view animations: left and right.

Lightning fast frames Animated images may appear to have slower transition speeds the first time they are viewed. If your animation contains copy that you expect your subscriber to read, like this example from MAC, ensure enough time is given. The transition speed can vary by device so don’t assume results from your own computer will be the same for all users.

Click for animation

Animation can be increase engagement and give your click rate a boost but remember everything is good in moderation. Even birthday cake.

Jim Davidson is manager of marketing research at Bronto Software