If pictures are worth a thousand words, how much more can your emails say with pictures that move? From animated GIFs and cinemagraphs, to embedded videos and CSS animations, today’s digital marketers have rich possibilities at their fingertips. When stacked against static emails, animated emails are better at catching attention and can more quickly explain how your product or service works. Just a few lines of code can make marketing magic happen.
These animations are done in the Cascading Style Sheets (CSS) via keyframes. CSS properties are changed at regular intervals to create animations or transitions within the email. With this type of animation, you can animate most HTML elements without using external scripts like Java or Flash.
Prezi’s understated background animation proves you don’t need to go big to make an impact.
Check out these animated GIF-centric emails. GIFs like these are the simplest way to add animation to a plain email, providing the awesome opportunity to show multiple images of a product or make it move.
This simple, friendly GIF is eye-catching and completely on-brand.
UBER’s subtle animation pulls the audience into the experience of using the app.
MOO’s clean, modern layout and fresh copy combine to make a winning gif.
With the cinemagraph, only a single element of the image or background is animated while everything else stays static – a moving picture with a cinematic effect. This exciting imagery is sure to grab attention and add a touch of elegance.
Embedded videos are simply that – videos that play within your email copy. Like CSS animations, embedded videos may not be supported for all email clients, so it’s important to code for a fall back. Take a look here for an embedded video coding example.
With any of these animation alternatives, there’s a learning curve for coding, but the end result is worth it. In a world where the visual is king, the more innovative and interesting your email images, the higher your audience engagement!
The Signal team is here to help you with all things email, from copy and design to detailed coding.