Email Marketing
What makes a good subject line?
Subject lines are an important part of your email, so here's how to not mess them up.
Read More →
You're an email expert and have already mastered the fundamentals of animated GIFs in email design? It's time to bring your GIF game to the next level!
Many email marketers rely on animated GIFs as an easy-to-implement way to add movement to their campaigns. But simply replacing your static image with an animated GIF is just the first step. Want to go even further? Read on for three advanced ideas and creative use cases for animated GIFs that you might not have tried yet.
Do you love the creative opportunities that background images provide? In this case, you might be excited to hear that you can animate background images, too!
Setting a GIF as a background image unlocks a whole new set of opportunities for your email designs. For example, you can place live copy on top of your animated GIFs like you can see in this example from Article.
Source: Really Good Emails
Or, you could use an animated GIF as a subtle background animation to frame your entire email content, like Uber did so beautifully in this email here:
Source: Really Good Emails
To set an animated GIF as a background image, you'll start off just like you would for setting a static background image: You'll need to create a containing table—and then set the background image attributes and inline styling on the first <td>. Anything you then put inside that cell sits on top of the background image. But rather than using a static image to fill your table cell, you add in an animated GIF!
We've teamed up with ActionRocket's email developer extraordinaire Jay Oram for this Ultimate Guide to Animated Background Images. Check it out to see more examples of campaigns using animated background images, along with step-by-step instructions on how you can set up your own and even make them work in (most) Outlook clients. Learn more.
In most email designs that use animated GIFs, the animation plays as soon as you open your email. But did you know that it's also possible to add an interactive element to your animation so that your subscribers can be the ones to bring your animations to life?
The easiest way to do this is with a hover effect. For example, you can create a static image that — on hover — magically starts to move, like you can see in this example:
The idea is simple: When the user opens the email, they'll see a static cover image. On hover, you're hiding the image and reveal the animated GIF that's placed underneath. The result feels a bit like a video that's activated on hover — that's why the technique is also called Faux Video.
For a step-by-step guide on how to add hover effects to your images to reveal an animation and copy-and-paste-ready code snippets check out this fantastic guide by Alice Li.
As a hybrid between image and video, cinemagraphs are a very powerful type of animation. In a cinemagraph, only a small part of an image moves while the rest of the image remains static.
Can't quite picture how this makes an impact in the inbox? Let Rita Spinks, Manager Email Marketing at National Geographic walk you through this stunning example of a Cinemagraph in one of National Geographic's campaigns:
Do you see how only parts of the header image — the diver and the little bubbles around him — are animated? The rest of the image is static. Plus, notice that you can't actually spot a beginning or end of the animation; the diver just continues to kick along. That's the second crucial characteristic of a Cinemagraph: The animation is created as a continuous, seamless loop so you can't spot a start or a finish.
Cinemagraphs catch the eye because they're not quite an image, but aren't a video either. They're something right in between, and they often have a soothing effect that just draws you in. So next time youre working on a special campaign, see if you can put a cinemagraph in the spotlight.
What other creative and unusual techniques and use cases for animated GIFs have you seen in your inbox? Wed love to see them. Share them with us on Twitter.
Taxi helps marketing teams make better quality email, quicker, at a larger scale.