Лёгкий способ привлечь внимание подписчика в email-рассылках — добавить анимацию на главный баннер, в блок с преимуществами или на кнопки. Это оживит и улучшит даже самый классный макет. Поэтому анимация часто используется в сфере email-дизайна.
Давайте разберёмся, какие есть плюсы и минусы, функции и особенности GIF в письмах. И как добавить анимацию в рассылки.
Преимущества и недостатки
Плюсы
- Корректно отображается в большинстве почтовиков в отличие от Flash- и CSS-анимации.
- Двигающийся элемент привлекает внимание и задерживает подписчика в письме.
- Поддерживает прозрачный слой.
- Идеален для картинок с небольшим количеством цветов.
Минусы
- Может много весить и плохо влиять на скорость загрузки письма. Качеством гифок часто жертвуют ради доставляемости.
- Поддерживает всего 256 цветов. Красивые фотографии могут потерять часть яркости, если перевести их в GIF-формат.
С минусами можно справиться правильным выбором анимационных элементов, а плюсов и поводов использовать GIF в рассылках — куда больше.
Функции GIF-анимации и примеры использования
1. Акцентировать внимание. Анимация привлекает, потому что глаз реагирует на движение. Подписчик чётко видит то, что ему интересно, а второстепенные элементы размываются.
Гифкой можно выделить, например, блок со скидкой или её конкретный размер. Вот отличный пример от Vichy:
Ещё пример — от Frank Body в рассылке о развенчании мифов. Даже такая микро-анимация способна усилить подачу контента
2. Объяснить работу программы, приложения или любого другого продукта.
Анимация помогает наглядно показать процесс. А ещё пригодится в случаях, когда нужно рассказать много, а место для всего этого ограничено. То есть, показать в фиксированном размере блока больше информации.
В письме «Перекрёстка» есть компактный, но полезный гиф-блок. Он объясняет преимущества онлайн-покупок в супермаркете.
3. Показать ассортимент товаров.
Ещё один хороший пример использования — в товарных рассылках: можно показать сразу несколько товаров в одном баннере.
Free People продемонстрировали каталог купальников и заодно показали, как их можно сочетать.
4. Сымитировать видео.
Ещё лучше показать продукт и придать больше динамики блоку. Ниже — подобная гифка в рассылке La Roche Posay.
5. Вовлечь в игру и развлечь.
Отлично подойдёт для всех писем с геймификацией, чтобы подчеркнуть элемент игры и ещё больше вовлечь пользователя в действие.
Amediateka в одном из писем использовали анимацию с колесом фортуны:
Ну а Aviasales просто любит смешные анимации — и их часто можно увидеть в рассылках сервиса.
Особенности GIF или что учесть, если вы решили использовать их в письмах
Помните о размерах
Анимация воспроизведётся только после полной загрузки. Потому чем меньше весит картинка, тем лучше. Допустимый размер GIF — до 600 кБ.
Не перебарщивайте
Одной-двух подвижных картинок или элементов будет достаточно. Рекомендуем придерживаться такого правила: одна прокрутка — одна анимация.
Сделайте первый кадр самым информативным
Подписчик сразу должен понять, что вы хотите сказать. Не забывайте, у вас всего три секунды, чтобы его заинтересовать. Потому гифки должны быть простыми и понятными.
Следите за качеством
Картинка не должна быть сильно зернистой (если так не было задумано). Низкое качество изображения вряд ли вызовет у клиента доверие.
Не оформляйте гифками таймер
Мало ли, вдруг человек откроет ваше письмо через месяц, а там бац — и обратный отсчёт. Чтобы этого не случилось, используйте специальные сервисы вроде Sendtric или MotionMail.
Проверьте, несёт ли анимация смысловую нагрузку
То есть, помогает ли гифка достичь цели письма, улучшить метрики или повысить лояльность. Движение — это, конечно, хорошо, но если в нём нет смысла, то лучше оставить статику.
Используйте цельную идею
Лучше отдать предпочтение одной анимации, которая «рассказывает» историю, то есть несёт конкретную идею.
Где брать гифки
- Сделать самому (для начинающих). Подойдут сервисы iLoveIMG, gifmaker.me или gifius.ru. Просто загрузите последовательность кадров, выставьте скорость и размеры и получите готовую анимацию. GIF также можно сделать из видео.
- Сделать самому (для продвинутых). Может быть долго, но зато картинка будет уникальной. Анимировать изображения можно в Adobe After Effects, Adobe Animate (сложно) или Adobe Photoshop (проще). Желательно привлечь дизайнера.
Как добавить GIF в email-рассылку
Очень просто: так же, как и обычную картинку. Перенесите её в письмо, и она сама встанет на нужное место. Готово, вы восхитительны!
Что в итоге
GIF-анимации — отличный способ разнообразить ваши рассылки. Они привлекают и задерживают внимание, развлекают, информируют и расставляют акценты.
Что важно помнить:
- размеры файла — не больше 600 кБ;
- одна гифка = одна идея;
- обязательна смысловая нагрузка;
- первый кадр — самый информативный;
- качество — важно;
- использовать одну-две анимации на письмо.