Creating animations for HTML emails requires careful consideration to ensure compatibility and effectiveness across various email clients. Here are 7 key guidelines to assist you in designing animations that enhance your email newsletters:

1. Use Animated GIFs for Broad Compatibility

Animated GIFs are widely supported across most email clients, making them a reliable choice for adding motion to your emails. However, be aware that some versions of Outlook (2007-2019) do not support GIF animation and will only display the first frame.

Therefore, ensure that the initial frame conveys essential information.

Example:

Notice how the first frame conveys all the info before the animation kicks in

Frame 1

No hover effects and that sort of thing because it’s not well supported.

2. Optimize File Size for Faster Load Times

Large files can slow down email load times, especially on mobile devices. Aim to keep your animated GIFs under 350KB (500KB is the upper end of file size though we have sent gifs almost up to 2MB – depends on what we know about audiences – higher LSM audience means we can assume bandwidth is less of a constraint) to balance quality with performance. Simplify animations and reduce the number of frames to minimize file size.

3. Ensure Mobile Responsiveness

Design animations that are responsive and look good on both desktop and mobile devices. Consider screen sizes and orientations to maintain readability and visual appeal across platforms. For a full- width animation in an email go with 650 pixels wide (the full width of an email on desktop) which will scale down to 325 pixels on mobile. The reason this width is different to the 1300 pixels specified for retina display header images is because we want to keep the file size of the gif as low as possible.

4. Limit Animation Duration

Shorter animations are more engaging and less distracting. Keep your animations under 5 seconds and ensure they loop seamlessly if repetition is necessary. You can’t capture an entire video in an animation for email.

5. Provide Descriptive Alt Text

Including alt text for your animations improves accessibility, allowing screen readers to convey the content to visually impaired subscribers. This practice ensures all audience members understand the message, even if they cannot view the animation. This is done during the email creation stage not in the image creation stage.

6. Design for Accessibility

Avoid animations that flash or flicker, as they can trigger seizures in individuals with photosensitive epilepsy. Ensure that animations are smooth.

7. Create Engaging Video Thumbnails

Since embedding videos directly in emails is often unsupported, use a static image or an animated GIF as a video thumbnail with a play button overlay. This approach encourages recipients to click through to view the video on a landing page. Remember to supply the link for where the video is hosted. Ensure the thumbnail is visually appealing and indicative of the video’s content.

Some ideas:

Animated play button

Animated background

Tools you can use:

https://ezgif.com/ for quick resizing an optimising your gifs.

Last note and probably needless to say but avoid overusing animations.

Excessive animation can overwhelm or annoy subscribers. Use animations sparingly to highlight key messages or calls to action, ensuring they add value rather than serve as mere decoration.