Have you noticed thatÂ emails with animation and movement are appearing in your inbox more often? We have. As an email marketer or designer, you may have even tried using them to increase conversions through email. But we also have noticed that marketers arenât always incorporating animated GIFs in email using email design best practices.
Whatâs exciting is that animated GIFs are actually pretty easy to use in email: they can be treated just like otherÂ image files, and theyâre well-supported by most email clients. But in many GIFs in email, thereâs a major problem:Â the emailâs call-to-action is often inside the GIF, like in this email from Ann Taylor.
That âGOâ call-to-action button isnât really a buttonâitâs part of the whole image. Click above or belowÂ or anywhere aroundÂ the âbuttonâ and it works just the same: youâll be taken to a landing page on the Ann Taylor website, because the whole animated GIF is linked. That makes it easy forÂ readers to tap or click almost anywhere to get more information (and hopefully make a purchase). But it can also be problematic. If the animated GIF doesnât render for one reason or another, the email totally loses function. This can happen ifâŚ
- There are image size distortions on a readerâs mobile device
- Image-viewing is turned off on the readerâs email client
- The GIF is blocked withÂ ad-blocking software
- The GIF is a large file and the reader doesnât wait for it to load
Plus, Outlook users willÂ likely just see a still image, becauseÂ the animation wonât work. For these reasons and more (check out all the pitfalls of image-only emails), we always recommend taking an email design approach that optimizes HTML and doesnât rely solely on images. Want to know how to useÂ your awesome animated GIFs in email while still making sure your calls-to-action always show up? Read on.
Today weâll recreate the following email from Banana Republic and show you how to optimize the use of animated GIFs in email toÂ make sure your content appears.
Hereâs our video tutorial recap:
And, for reference, hereâs the full email from Banana Republic:
In Banana Republicâs email, the key messageâincluding the call-to-actionâis in one single image block, just like the Ann Taylor email above. Almost the whole emailâthe entire black portionâis anÂ animated GIF:
ThisÂ means if image-viewing is turned off or the GIF is blocked or if it doesnât load,Â the whole message is lost.
Letâs fix that.
Step #1:Â Isolate the animated GIF
The animated GIF in this email is large. So even if it does show up in a readerâs inbox, it may not load all the way or at all, resulting in the email going unread. To avoid these issues, a best practice is to crop your animated GIF, trimming out the parts of the image that donât need to be animated. In the Banana Republic email, that means we want to isolate the central part of the imageÂ that actually movesâin the pink box belowâand recreate the rest with plain text and HTML.
To make a quick crop, we used ezGIF.com. Hereâs our new animated GIF:
Step #2: Set up the email layout with content blocks
Today weâre starting with a basic one-column template in the BEE email editor.
The default structure of content blocks is very similar to what we need: text, followed by image, followed by more text, then a call-to-action button.
Thereâs no need to make any structure changes since the content blocks we need are already here, so Iâll get started by filling in the text, making sure to center-align everything as I go. Iâll also delete content blocks I donât need, like the subtitle placeholder at the top.
Then I can drag in my cropped animated GIF and drop it in the image placeholder, just as I would with a regular image.
Now that our content is in place, we can begin formatting.
Step #3: Use HTML background colors
Starting with my âSWEET TREATâ content block, Iâm going to set my font color to white and increase its size to 36px.Â Then Iâll go about making the background of the body of the email black, just like in the Banana Republic email GIF. To do this, I can simplyÂ adjust the background colors in the Row properties menu on the right, making the row background transparent and the content background black.
Iâll make the same Row properties adjustments for all of the following content blocks, including the background color behind my animated GIF.
Now it looks like one, seamless block of color. Iâll finish byÂ formatting the rest of the text.
We need to make some final padding adjustments to space everything properly, and update our CTA button, but already our email looks almost identical to Banana Republicâs imageâbut we did it with email-safe fonts and HTML background colors. Itâs amazing howÂ polishedÂ our email looks, andÂ weâve significantly reduced our risk of the message being lost if the GIFÂ doesnât appear. The colors and text and, importantly, the call to action button will all still show up.
Step #4: IncludeÂ a bulletproof call-to-action button
Spoiler alert: we donât need to code a single line of HTML or do anything at all to make sure that our âFIND OUTâ call-to-action button will work across email clients and devices. In the BEE editor, all buttons are pre-built to be bulletproof, meaning they are not image-based, so they will always show up, they will be responsive, and theyâll look great.
All we need to do is update the style in the Content Properties menu to the right. First, Iâll make the button background colorÂ white and change the font color to black.
So the button looks like this:
Then Iâll format the text, increasing the font size and making it bold. When I increase the size, the CTA appears on two lines:
But back over in the Content Properties menu, we can increase the width to 35%:
I notice Banana Republicâs button has sharp corners, so I want to make ours less rounded. To change the shape of the button, Iâll decrease the border radius to 0.
Hereâs our email! Weâre almost there.
Step #5: Final polish: adjust spacing
The text and CTA button at the bottom are too close. To create breathability, we can adjust the padding above and below each content structure.
I adjusted the padding above and below the button, and above and below the âOnline onlyâ content block.
Hereâs the final email:
And on our mobile preview, it looks great:
Weâve recreated the Banana Republic email almost exactlyâwith its slick, modern design and animated GIFâbut weâve optimized our use of HTML background colors and call-to-action buttons so our email is guaranteed to show up and look great across email clients and devices.
We hope you enjoyed this workshop about using gifs in email. Any questions? Let us know in the comments below. And be sure to try it out in the BEE email editor!