6 Best Practices for Using Animation in Email

There is a lot to remember when it comes to creating effective HTML emails.

From the fallbacks and workarounds that ensure good rendering across multiple email clients, to the cadence of our communications, tapping into the fruitful ROI email marketing has to offer requires a delicate balance of considerations.

GIFs in email can be a win for engagement and conversion, drawing the eye and grabbing subscriber attention.

Animation is also a great way to bring brand personalities to life, with unique styles and transitions elevating a brand’s identity and tone of voice.

But like everything you include in your emails, animation must be well considered to ensure that you delight rather than frustrate your audience.

Here are six best practices to help you create email animations that cater for everyone:

1. Accessible motion

Taking accessibility into account will ensure that your animations offer a positive experience for all subscribers.

There are a number of permanent, temporary and situational disabilities where on-screen movement can be problematic, such as low vision and visual processing conditions and vestibular disorders.

For these readers on-screen motion can be disorienting and might even make them feel unwell.

Minimize flashing

One of the most important things to bear in mind is the speed of your animation as high content flashing rates can be harmful.

Try to minimize flashes and rapid movement and instead opt for subtle animations, smooth transitions and generous pauses between loops.

This will help to reduce cognitive load so that subscribers can enjoy your animation and consume static content without feeling distracted or overwhelmed.

UK energy provider Bulb uses subtle animation in all customer emails, elevating this brand’s tone of voice. Source: My inbox/Litmus Scope

2. Animation as an enhancement

Animation is impactful and can help make emails more dynamic; however we should always consider GIFs in email as an enhancement: something that supports and complements the written content.

Outlook 2007-2019 doesn’t support GIFs in email. Will your email still make sense if the animated GIFs are removed?

Secondly, people reliant on assistive technology, such as screen readers, have a much better experience when content and context isn’t hidden within imagery.

Echo messaging from your animated GIF in your content

Well written descriptive alt text can add value for some readers, including instances where ​​images are blocked by email clients or company servers, but the best way to ensure that your message is clear, actionable and accessible to everyone is to echo any messaging that appears in your animation within your written content.

If you do this, your email marketing will continue to be effective even if the subscribe's email client doesn't support GIFs.

The animated content in this event email from Barrel is echoed within the written content. Source: Really Good Emails

3. Keep it lean

It doesn’t take much for animated GIFs to pile on the KBs. This can be problematic as weighty image assets will increase email load times and eat up data allowances.

There are a few things we can look to as we use animated GIFs that will prevent these assets from hindering our email marketing performance:

Flat color

Animated GIFs are 8-bit files, which means that they’re restricted to 256 unique colors.

This makes animating photography and using multicolor gradients challenging, as such images are made up of thousands of colors.

Many of these colours are stripped away when the animated GIF image is saved, heavily reducing the quality of the image.

Even though an animated GIF image can contain up to 256 colors, the more colors you include the bigger your file size will be, which is why flat color is ideal for animated GIFs in emails.

Reducing the colours in your GIF will have a significant impact on the size and quality of your file.

Treatments

Flat color lends itself to illustration, but if illustration isn’t part of your brand aesthetic there are treatments you can apply to make photography GIF friendly.

Applying mono or duotone treatments will dramatically reduce the colors in your GIF and prevent quality-loss.

Cut away noisy backgrounds

Cropping away parts of a GIF that don’t hold value, such as the background, will also help to reduce the overall image size.

GoodRX simplifies photographic imagery by applying a monotone treatment and placing it on a flat color background. Source: Really Good Email

Simple transitions

The way an animation is styled can offer bags of personality, but it may also come at a cost; a large number of frames. The more frames in an animation the larger the file size.

Tapping into easing techniques to style transitions helps to keep things looking smooth, but there are ways to simplify this styling that will help achieve a balance between beautiful, accessible animation and optimal file sizes.

Easing example

I have used easing to make the transitions between the rise and fall of elements smooth. After compression this GIF is 569kb.

By taking the GIF into Photoshop, removing every other frame and adjusting the frame rate slightly I was able to reduce the size of this GIF to 318kb.

You can also use Animately to remove frames in a GIF for free.

Remove frames

First of all, you could look to remove some of the frames that make up your animation.

It’s often surprising how many frames you can delete from a GIF and yet still retain your unique style.

Animately offers a free frame trimming tool, where you can experiment with which frames to extract. Just be mindful of how this impacts the animation speed.

Removing frames example

After compression the above animated GIF is almost 700kb.

Removing every other frame in Photoshop reduced the size to 354kb.

Without transitions and reduced to 2 frames the GIF is a tiny 20kb!

Forego transitions altogether

Another popular way to keep frames to a minimum is to forgo transitions altogether, cutting between frames without any styling.

This simple technique is popular with brands leveraging photography in their animations.

It's often quick to create, but mindfulness is key as there is huge potential to create glitchy and distracting animation if timing isn’t carefully considered.

File compression

Before an animation is coded into an email it needs to be compressed. This will reduce the overall size of the email, helping to ensure deliverability and faster loading speeds.

Animated GIFs are one of the hardest assets to compress without losing quality. Many tools offering GIF compression weren’t created with email marketers in mind.

GIF compression for email marketers

More often than not valuable time is lost tweaking compression settings to try and achieve the best results, making this stage of the process quite tedious.

Enter Animately, a free tool made for email marketers offering quick and sympathetic compression with a simple drag and drop action. 🎉

4. Fallback gracefully

Animated GIFs have near full support across email clients, it’s only Outlook 2007 to 2019 that fall short.

Thankfully the workaround is nice and straightforward, although your animation won’t be displayed in these clients they will render the first frame as a static image.

Your first frame is critical

The thing to remember is that your first frame needs to contain all elements you would like to appear as a static image.

To achieve this you can shift the order of your GIF's frames around, for example, if the last frame of your animation contains all important elements this should become your first frame.

This animation shows the product Gussi are promoting sliding into view. As the first frame is empty Outlook 2007 to 2019 subscribers won’t see an image of the product in their inbox. Source: Really Good Emails

5. Render test

The best way to find out if your GIFs in email look great in every inbox is through render testing.

Even though there is great support for animation across email clients there are a couple of things to look out for before your email is deployed.

Beware of Gmail compression

One email client to pay close attention to is Gmail. On occasion, Gmail likes to add its own compression to animated imagery which can impact the quality and colors of your animated GIFs.

You can also see how your animated GIF's static fallback is looking in Outlook 2007 to 2019 clients.

Whilst working at Litmus I created an animation which was impacted by Gmail image compression. Gmail removed 125 colors, reducing the quality of the subtle background gradient.

Original image. Source: Litmus

Gmail compressed image. Source: Litmus

6. Dig into the data

Nothing in email marketing is a given.

Although we understand that animation can have a positive impact on engagement and conversion it may not resonate with every audience, or suit all types of communication.

To measure the success of animated GIFs in email marketing you will need to split test, serving up animated imagery to one group of subscribers and static imagery to the other.

Consider comparing the two campaigns on metrics like these:

Click through rate (CTR)

Many of the campaigns email marketers deploy need to convert, and this means getting subscribers to click through from the email to the next stage of a journey.

Does using GIFs in emails motivate your audience to convert, or does it distract and reduce the number of clicks?

Read rate

Some analytics tools offer read rate information. This can help you to determine how engaged a reader is based on the amount of time that they spend reading your email.

Unsubscribe rate

If the group receiving animation has a lower unsubscribe rate than the static group this could suggest that they are delighted or engaged by the animation resulting in more of the group remaining subscribed.

If the unsubscribe rate is higher than the static group a number of things could be at play, animation may not resonate with this audience, or it may be better suited to a different type of communication.

Check the reliability of your tests

Whatever the outcome, be sure to run the same test at least 3 times to compare the results and get reliable insights into how animation can help or hinder your email program.

It’s also a good idea to run a statistical significance test to check the likelihood that your results reflect a genuine difference between groups and aren’t just random noise.

Reap the rewards of considerate animation in email

While these considerations might seem more heavily weighted towards improving the subscriber experience, there are big business gains to be had in taking additional time and care when using GIFs in emails.