Best practice for motion in email.

So, you’ve decided to look into using motion in email. Essentially, there are three choices:

Movie files – such as .webm, .ogg or .mp4
Animated GIFs
HTML5 CSS3 Animations.

With a fourth option being – don’t!

But okay, you’ve decided to press ahead. You’re going to need to consider a few things going in:

• Keep file size to a minimum.
• Use animation to catch their attention, then drive their engagement to your site.
• Inbox compatibility is not universal, so know your audience.

Keep the file size to a minimum.

One reason to keep the files small is the need to consider mobile data charges. Remember, 60%+ of email opens occur on mobile devices. Adding bulky movie files to an email is careless, and shows little concern for the user. When a video is included in an email there is no way to decide if you want to start downloading it. And the larger the file, the larger the impact on those who pay for their data over 3G/4G connections.

Low file sizes for email are important. Keeping your images to less than 900kb is a good start. As with any creative process, knowing the rules is only the first step – it’s just as important to know when to side-step (or break outright) those rules. As long as your email systems can support larger files, you can relax about file size limits.

Hi-Rez or Retina images will increase file size across your email, and we can see examples of these in top retail brands. Companies like Netflix have used large animated masthead images that come in at 2mb or higher. These risk not being seen, but when someone does see the animated GIF the impact may well be worth it.

Use motion to capture the reader’s attention.

For most marketing campaigns the primary purpose is to drive users to your website. It might be that your interaction can be contained in an email, but if you’re trying to engage the user in some website-based interaction, it’s best to keep your strongest content for that page. Entice and draw them in to the full experience; use motion as a preview – with a play button – leading the viewer to your landing page for more.

Remember, just adding animation to your email to spice things up won’t make you more relevant. Like any form of content, motion needs to serve a purpose. That doesn’t mean all motion has to be purely utility-based. You can use animation to strengthen design elements, and to add the spice you’re looking for. You get a lot more out of animations that serve a purpose than you do just by adding in random dancing hamsters.

If you want motion to be relevant, use it to feature content in ways you couldn’t with text or static images. Show your product in its various models; highlight product features over a series of frames, or present information over multiple slides.

Know your audience.

Email developers will gladly tell you that not all Inboxes are created equally. Something that’s true when it comes to including motion in email. Outlook is still a major player in the B2B industry, but it has a chequered history with motion.

On PCs, Outlook won’t support your Movies and, in most cases, your idea won’t make it past the first frame of an animated gif. Outlook also doesn’t support CSS animation methods.

Knowing your audience is important. Consider what exposure your animated feature will have. But if you’re still expecting your email to be seen predominantly in Outlook, consider these limitations.

While CSS animation is low in file size, the compatibility across inboxes is minimal. iOS and Android native inboxes, Apple Mail and Outlook for Mac are the only places this method will work. You do gain the benefit of having smaller file sizes, but for what audience coverage? And you still won’t reach the PC Outlook inboxes.

Support for Animated GIFs is still very wide. With all the considerations of file size, purpose and inbox compatibility, good use of Animated GIFs is still the way to go.

Good points:

+ Works in every leading inbox, except PC Outlook 2007+ and Windows Mobile.
+ Automatically falls back gracefully on PC Outlook inboxes, showing 1st frame.
+ File sizes are lower than straight out movie files.

The not-so-good points:

– File sizes are larger than CSS animation
– Unlike movies, GIFs don’t include sound

So, if you’re going for motion – to feature your product or service in ways you can’t with text and static images – try using GIFs.

It’ll avoid the larger file sizes found in video files. And help get the maximum coverage across the many inboxes your customers could be using.

Where can I get help with this?

Contact Torpedo with your website, digital or creative needs and leave the rest to us.