Ink Dispatch March 2014

Animate Your Emails

Greetings Inksies! Inkers? Inketarians?

Email is hard. Like, really hard. Creating a great email that’s responsive is even harder. Based on feedback from readers, we’ve decided to focus our emails more on teaching you how to make great responsive emails and less on the updates to Ink itself and the HTML email community as a whole (though we’ll still keep you up to date with the big ones).

Inky floating in the ocean

Human beings have a highly-developed sense of motion. Honed since the days of people hiding in caves from predators, humans’ ability to notice motion is an extraordinary asset. When it comes time to grabbing somebody’s attention with an email, tapping into a reader’s motion perception is a highly effective tactic. Proponents of email-based video state that including a short clip can increase clickthroughs as much as 2-3x.

How does one get a moving image into an email? The surprisingly simple (and well supported) way to do it is to use an animated GIF. Though the filesize on an animated GIF can balloon out of proportion quickly, they’re supported in almost every client. Just don’t try to cram a feature length movie into one. The main exception to GIF’s broad support is Microsoft Outlook 2007/2010/2013 (naturally). However, Outlook still shows the first frame of the GIF. Make sure you’ve got an effective call-to-action in that first frame and you’re set.

What about sound? Or what if your artistic masterpiece just won’t fit into a GIF that can be sent “through the tubes” in a reasonable amount of time and bandwidth?

While not super widely supported, HTML 5 <video> tag is a surprisingly versatile tool in the modern HTML email sender’s toolbox. It’s supported in Apple Mail (desktop and iOS) and Outlook.com (if you enable autoplay), but will show a fallback image that you can easily link through to the web-hosted video. The video element also streams the video file progressively, so you can start watching before the entire file is downloaded.

Videos in emails are making tons of progress, to the point where lots of major brands are beginning to experiment with them. While they may not be quite up to the point of web video, they’re good enough for delighting your readers with fluffy, animated cats.


Further Reading
MailChimp logo
MailChimp

Send Better Email

MailChimp →

Lessons for Better Responsive Emails

Intro to Responsive Email Design

We’ve spent a lot of time working on responsive emails, and now we want to share our collection of strategies with you. In our online course on Thursday, March 27, 2014 at 9:00 AM PST, you’ll learn how to code, design and compose emails that work on any device.

Learn More About the Course →

Want to Unsubscribe? We’re sorry to see you go, but happy to make it easy on you. Unsubscribe