Let’s code email campaigns (5/6): Interaction
There are few options to make interactive email campaigns.
You could use CSS animations, animated gifs, cinemagraphs, embed videos… It all depends on what you’re trying to achieve and what email clients your subscribers use the most. CSS animations or embed videos have poor support in most email clients. For videos it’s better to use image of your video first frame and link it to the actual video. Instead of css animations, it’s better to use gifs/cinemagraphs. Nonetheless I have created an example of css animation for our template, just for research/fun purposes. CSS animations work in IOS Mail and hopefully will work in more email clients soon. Just make sure whatever you’re animating is not an integral part of the email and if it doesn’t animate… email still makes sense.
Animated GIF
In our template we have an animated gif which is always my preferred choice for animations since gifs work almost always. Why almost? Well Outlook doesn’t play gifs so you need to make sure first frame of your animation makes sense — that is what Outlook will display for your subscribers.
Make sure your gifs are not too heavy kb wise. You don’t want your subscribers to wait forever for animation to load or for spambots to block your email because it’s too heavy. In our email campaign we have a banner with cat eyes changing color. To save on kb, I have cut that banner in three parts and stacked them together as rows in a table. Thanks to that only the eyes are animated gif, rest is a jpg.
Personally I prefer to use Photoshop for creating animated gifs but there are free options out there like gifmaker.me or Gimp.
CSS animation
CSS animations are fast to create and very light in terms of kb, but support in email clients is limited.
In our email we have a very simple css animation — CTA button changing color.
All css styling for animation should be added in the <style> section of the email and you’ve guessed it… most email clients will strip it off and won’t play animation.
You create animations same way as you would do for a website:
.animatedButton {
animation: color-change;
animation-duration: 2s;
animation-iteration-count: infinite;
}@-webkit-keyframes color-change {
0% {
background-color: #620788;
}
50% {
background-color: #59c0fa;
}
100% {
background-color: #620788;
}
}@keyframes color-change {
0% {
background-color: #620788;
}
50% {
background-color: #59c0fa;
}
100% {
background-color: #620788;
}
}
Create a class with animation parameters. First you have to name it, I named mine ‘color-change’, then you have to determine how long/how fast should the animation be and then how many times it should play. Mine is set to last for 2 seconds and then repeat infinitely.
Next set up what happens in your animation. So in our example at the beginning color is blue (0% frame), half way through the animation turns purple (50% frame) and then back to blue (100% frame).
You can animate anything from color, to size, to movement! Make sure to experiment and create fun, interactive banners.
Everyone loves animations in email campaigns. It doesn’t have to be much, just a small element changing color can make all the difference and catch your subscriber eye :)
