Как использовать анимацию в письмах
Анимация — мощный инструмент, который помогает сделать ваши письма более живыми, заметными и запоминающимися.
Но её нужно использовать с умом, чтобы не превратить письмо в тяжёлый и раздражающий баннер.
В этой статье расскажем, какие анимации подходят для email, как их вставлять и что учесть, чтобы не навредить рассылке.
Зачем использовать анимацию?
- Привлечь внимание (например, к скидке или акции)
- Показать продукт в действии (например, вращающийся 3D-обзор)
- Передать эмоцию (например, лёгкая анимация сердечка или лайка)
- Упростить объяснение (например, как работает функционал)
Важно: анимация должна усиливать письмо, а не отвлекать от главного.
Какие виды анимации работают в email?
1. GIF-анимация
Самый распространённый и безопасный формат.
✔ Работает почти везде (даже в Gmail и Outlook).
✔ Лёгок в создании (можно собрать прямо в редакторе Letteros или в Canva).
⚠ Ограничения:
- Не перегружайте письмо — общий вес письма желательно до 150–200 КБ.
- Outlook отображает только первый кадр GIF (нужен fallback).
2. CSS-анимация
Работает только в некоторых почтовых клиентах (Apple Mail, iOS Mail).
✅ Может делать плавные переходы, переливы, эффекты наведения.
❌ Не поддерживается Gmail, Outlook.
Рекомендуем: если не уверены — не рассчитывайте на CSS-анимацию, делайте GIF.
Как вставить анимацию в письмо?
В Letteros:
1. Подготовьте GIF (встроенный редактор или внешний сервис).
2. Загрузите его в медиатеку.
3. Вставьте в письмо как обычное изображение.
4. Проверьте предпросмотр.
Как выбрать, где поставить анимацию?
✔ В первом экране — чтобы сразу привлечь внимание.
✔ В ключевых CTA — например, анимированная стрелка на кнопке.
✔ В демонстрации продукта — например, смена вариантов цвета или функций.
❌ Не ставьте анимацию в подвал или малозаметные элементы — она там не сработает.
Как не навредить анимацией?
❌ Не перегружайте письмо — максимум 1–2 анимации.
❌ Не используйте резкие мигания (может вызвать раздражение).
❌ Следите за весом файла (лучше <1 МБ, оптимально ~300–500 КБ).
❌ Всегда делайте fallback — первый кадр GIF должен быть информативным.
Заключение
Анимация в письмах — это отличный инструмент для повышения вовлечённости, если использовать её аккуратно и с умом.
С Letteros ты можешь легко вставлять анимации даже без верстальщика, используя встроенные редакторы и готовые блоки.