Aug 6, 2013
Showing Vs. Telling With GIFs
Internet fun fact: you can use animated GIFs in email. We love it when smart people use them in entertaining ways. But most marketing articles about GIFs talk about "making your email pop" and "latching onto your viewers’ attention." Gross.
At MailChimp, we think that good content = good email. GIFs are a primary means of communication around our office, but using them as a marketing tool seemed gimmicky, so we’ve avoided embedding them in our campaigns. We’re certainly not the first to use GIFs in email, but we’ve found an interesting way to use them as our content, instead of just as marketing eye candy.
When we had a large email going out to several segments of our users, we needed to communicate a few in-app interactions clearly and quickly. The interactions weren’t complex, but they weren’t easy to communicate succinctly with copy, either. Adding multiple screenshots, with arrows and circles and labels, made the email too long and cumbersome. Linking to a video was an option, but we didn’t want to have to rely on a click through or expect every reader to sit through a video to learn about one new step. All the information needed to be inside the email, easily and immediately digestible.
Enter the GIF

An animated GIF of the app showed our users the interactions we were introducing. It also showed them exactly how the interactions looked, and how they worked within the context of the app. It only took a few seconds, and people immediately understood it. Some of them even told us so.

We consider this kind interaction showing vs. telling. Being able to show people exactly how something works is incredibly powerful. It promotes clarity and speeds up the communication process. We’ve all tried to explain something to someone using words, only to find ourselves saying, "Here, let me just show you."
A lot of apps show. When you first open them, they’ll draw arrows on the screen, or animate an interaction. Sometimes video games do this, introducing mechanics in a way that shows you how to behave without a word of instruction.
Our showing vs. telling doesn’t only happen through animated GIFs. On our homepage, we use CSS animation to show how easy it is to use our drag and drop editor. We use videos in our Knowledge Base to help answer questions users might have about how to find and use specific features. And in some emails, and occasionally here on the blog, we use animated GIFs.
We’ll continue to look for ways we can show people how to use our apps. Showing is simpler and faster, which is exactly the kind of experience we want people to have with MailChimp.
katie shelly
i like the distinction you’re making between good content and superficial eye candy.
also mango!
http://31.media.tumblr.com/1d2dce39fca5e953cbe9e7c5f5419b2b/tumblr_mqzc45iD2A1qlkbtko1_400.gif
08.06.2013
Jon
This is fantastic. You’ve probably seen it, but Matt Jacobs has recently started documenting his favorite interactions with GIFs.
http://www.capndesign.com/tag/UX%20GIFS
08.06.2013
Amy
Thanks for sharing. I just added to my bookmarks for future inspiration.
08.07.2013
Cody
I think the “Showing-Vs.-Telling” debate is going to be very important now that CSS animations and web fonts are creeping into our inboxes. Pizzaz is nice, but nothing beats good color and relevant copy.
08.06.2013
Grace Boyle
Did I miss this in the post? Is there a good way you create Gifs? As in, an app? Are they built internally? A cool tool?
08.06.2013
David MailChimp
Hey Grace! You didn’t miss it in the post—I focused more on ‘why’ and not ‘how’ we’ve used GIFs recently.
We used Photoshop’s Timeline feature to create them. The GIFs are built it out of screenshots of the live app—no photo-chopping pixels, just animating the screens. If you’re interested in learning more, there’s a nice rundown of Timeline on Adobe’s site: http://eepurl.com/Cs7lz
08.06.2013
David Darx
Good question Grace!
Did your make them as a movie, frame by frame, in photoshop or any other app, or is it just a screen cast cutted and exported in gif?
08.06.2013
David MailChimp
Hey David, I replied to Grace above, but it doesn’t look like you’re in that thread. We did use Photoshop—their Timeline feature’s pretty powerful. A few were built frame-by-frame to save on file size. We want to respect folks who are using their data plans to read our emails.
08.06.2013
David Darx
OK, thank you for your answer! I tought so. It’s more painfull to do, but so much lighter with the filesize, true.
Thank you!
08.07.2013
Sam John
Very useful article David, thanks for sharing this with us.
08.08.2013
Tommy Thompson
Thank you for this wonderful post David!
Creating GIF images isn’t as difficult as it seems. There are several free tools available. All you need to do is practice.
08.11.2013
Josh
I’m seeing some really cool animated GIFs in my inbox at the moment! None of my clients are too interested though!
08.14.2013
Phil Wolstenholme
Unfortunately only the first frames of animated gifs display in Outlook 2007 and 2010 so don’t spend too long crafting gifs if you have a lot of subscribers using those clients.
08.15.2013
Cliff
THIS IS AN IMPORTANT CONSIDERATION FOR RESPONSE!
If your .gif tells a story, then, the story will not be told for those who use these e-mail readers, hence, your first image should sell.
08.31.2013
Cliff
I did a quick look up on how many users use Outlook at…
http://emailclientmarketshare.com/
19% use outlook, less if you consider 2010 and prior
08.31.2013
Alex
Yes, but the percentage is probably significantly higher in a b2b email program.
10.02.2013
Phil Wolstenholme
For one of my lists (mostly university staff), the percentage is 60%, so it really does depend on your market.
10.03.2013
Sandra Kevin of Sandra's Satchels
I appreciate the opportunity to comment on this. These Giffs go toooo fast. Is there a way to slow it down so that the information can be absorbed?
08.19.2013
John MailChimp
Hi Sandra, Animated GIFs are a difficult balance between image size, image quality, and pacing. If too much content is added, or elements made to move slower, there’s the potential of the file size ballooning up. In this case, the idea was just to show what had changed, not present an in-depth tutorial. The above examples were in context with this email that we had sent out to users that hadn’t yet switched to new MailChimp. If you have other specific questions, you can always check out our knowledge base that offers a ton of articles and videos that you can watch and pause as you wish, or you can also reach out to our support chimps at: http://mailchimp.com/chat
08.20.2013
Jimmy
I’m extremely interested in learning a solid workflow for creating these. We agree with the why, now what we really need is the how.
08.28.2013
Jimmy Xander
Let me clarify, there are plenty of tutorials for creating animated GIFs in photoshop. That’s not the part I find challenging. The difficult part is the actual capturing of the frames. Making an animation that smooth requires having just the right frames.
How is it that you capture the frames that you use in the animation in the first place?
09.01.2013
David MailChimp
Hi Jimmy,
That’s a good question—we actually create the GIFs layer by layer in Photoshop.
The mouse cursor is its own separate layer, and we use the Video Timeline to animate it. That’s how the movements are so controlled. Each of the interactions you see is another layer, a screen capture of exactly what you’ll see in the app. Each of those is turned on or off at the appropriate time.
That’s it. Very simple—a little labor intensive, depending on the complexity of the interactions, but worth it to communicate clearly.
09.04.2013
Casey Lessard
I see there are a lot of questions about the how… after messing around with Photoshop and even Flash (this was to make banner ads), I did a web search and found http://bannersnack.com and just used them instead to make some swf files. They also allow you to export as gif, though, and do a good job of optimizing the file size (or at least Google Adwords thinks so).
09.10.2013
Marie Chandler
Thanks for the inspiration! I have used gif files for things such as showing products or getting info to the teams (highest sales or goals etc) but I hadn’t thought of using a gif for showing how to do something. When I think of how many instructions I give to people in lengthy screen shot documents – this was just what I needed to kick my brain into gear :-)
09.13.2013
David Cox
Am I missing something? I’m finding it nearly impossible to get Mailchimp to not mangle and un-gif-ify my animated gifs when I use them in a campaign email.
It seems that even when the gif needn’t be resized, Mailchimp still touches it and ruins it. Is there some way to ask Mailchimp to leave the damn file alone?
09.25.2013
John MailChimp
Hi David, Animated GIFs should work just fine as long as they’re not modified by the image editor and their original dimensions are less than 600 px wide. So if you haven’t checked the dimensions, I’d start there just to be sure. If you’re still seeing issues, please feel free to reach out to our support team at: http://mailchimp.com/chat and they’ll be happy to take a closer look and help get things sorted out for you.
09.30.2013
Renato
Hi, not long ago we were told by email experts not to include gifs in emails to avoid them being blocked as spam. Is this now over? Thanks.
01.31.2014
John MailChimp
Hi Renato, SPAM filters are always changing and adapting and often it takes multiple things “scoring” to reach a threshold that would then mark an email as SPAM. That is to say that some SPAM filters might include the animated GIF in part of their equation. For what it’s worth, it’s become a bit of a trend and I’ve noticed many large brands and senders adding small animations to enhance their content. You also might be interested in a free guide we wrote that includes some interesting info on how SPAM filters work.
02.10.2014