Creating Great Gifs

1. Customer Flow

When using dynamic video within an e-mail the customer flow is as follows:

1. E-mail
   The recipients gets an e-mail and needs to open it (open rate).

2. Personalized image
   After the user opens the e-mail we show a personalized image with the look and feel of a video player (click trough rate).

3. Landing page
   This image contains a link that opens a landing page where the dynamic video starts to play. This has two reasons: First off, e-mail clients don't always allow video to play within mail. Second, by showing the video on a landing page, we've got the users where we want them, in the web domain of the client where they can convert directly below the video (conversion rate).

We see that the promise of a personal video in subject lines can boost open rates. But what we really want is that the recipient clicks through to the landing page. And that's where the personalized image comes into play.

Sometimes our clients prefer a still image, but we recommend animated gifs simply because it's more engaging.

2. The Power of Gifs

Humans are naturally attracted to movement. Because our brain is programmed to notice changes in movement. It stems from our evolution in which visual information was crucial to decide whether to fight or flight. That’s why our brain is constantly in search of new visual information. And movement captures (and keeps) more attention than a static image.

Therefor, a gif-image caters more to the brain’s visual systems and has a better chance to influence a person’s action.

So, in short: if executed well, a gif can function as effective clickbait. Which makes it a crucial element within the e-mail flow. It boosts the amount of people that watch the dynamic video on the landing page. It helps you get the most out of your video content.

Just a couple of frames can be powerful enough to trigger your attention. Whether it’s a popsicle that gets smaller with every bite or disappearing snow on a canvas to promote a winter sale. It just grabs your attention. The next step is to give it the look and feel of a video player and to personalize it, like in the image to the right.

In the shown gif – used in a dropped basket email flow of an airliner – we see a plane gliding through the air. It moves up and down, clouds are shooting by and personalized data is shown (day of departure and destination). By showing a play bar and a play button the recipient directly and intuitively understands it’s a clickable gif that leads to the video.

3. How to Make the Best Possible Gif

When creating concept for a dynamic video, make time to create a separate concept for the gif as well. This way, you're able to shoot an extra scene when filming or make a special animation. 

If we want to make people curious to watch the video - we should try to engage the user (to click the GIF) as good as we creatively and technically can.

Creatively:

• Our tech makes it possible to personalize gifs by adding/ replacing text or images within the gif-project file. When using text within the gif, for instance: "Hi John, see what's next...", make sure the message fits the subject line, body text of the mail and the content of the video itself. 

• When using text make sure it isn't a stand-alone message, that can give people the feeling there is no video to follow. It should always be a call to action to click. 

• The aspect ratio of the gif may depend on the e-mail template. So ask in advance, because this affects the image size. 

• Ideally, there is room for a play button in the middle of the gif. Make sure the action in the gif and the dynamic elements aren’t blocked by the play button because they’re in the middle. (See example below).

• GIFs loop - design with that in mind: a cleverly designed and created seamless loop will allow for a tiny file yet its duration will feel indefinitely long

Technically:

• Make sure the gif isn't longer than 2 seconds. Otherwise, the file size will be too large for an e-mail. The last thing we want is for people to wait until their image is being loaded.

• For the same reason, the gif will be downsized to a width of 600 pixels. So make sure that everything in the image is shot big enough and is clearly visible.

• Use a low framerate to keep the filesize down, e.g. 10 frames per second is a nice balance.

  • Use subtle movements to still have a smooth video at a lower fps

• Some mail clients do not accept moving images. What they do is, show the first frame of the gif. So make sure that the first frame contains the complete message you want to show to convince the viewer to click through. (See example below).
  

4. Examples

To give you as much inspiration as possible, we've listed a lot of different gif-images below. We hope this gives you a better understanding of the possibilities. And how important it is to create a concept for the gif because it's a crucial element in determining how much people watch the video.