Вход
Регистрация

Время ответа поддержки: по будням с 10:00 до 19:00 по Москве

Написать в поддержку ›

Полезное

GIF-анимация в рассылках

Идеи, полезные сервисы и несколько советов с примерами

Оглавление

Зачем нужны GIF

Анимированные и подвижные элементы привлекают внимание читателя, фокусируя его взгляд на определённом месте. Дизайнеры часто используют этот приём при создании сайтов.

Электронные письма — это не только статичные картинки и текст. В них также можно добавить анимированные элементы, чтобы сделать акцент или забавную GIF, чтобы усилить эмоции от текста.

GIF-элементы также помогают заинтересовать читателя и побудить к действию (кликнуть на подпрыгивающую коробку с подарком) или показать какой-то процесс (например, переработки вещей).

Главное преимущество GIF-анимации — в отличие от видео она воспроизводится автоматически и занимает гораздо меньше места.

Что можно анимировать

  • Логотип
Варианты анимации зависят от самого логотипа. Например, если он состоит из нескольких элементов, они могут «собраться вместе».

  • Шапку
Например, буквы в заголовке печатаются или собираются в строку другим образом.

  • Главный баннер
Тут анимация зависит от темы рассылки. Можно, например, анимировать часть картинки (как ветер слегка качает дерево или персонаж подмигивает) — развлекательная функция, которая привлечёт внимание пользователя.

С другой стороны, главный баннер можно использовать в качестве контентной функции: показать товар в действии. Например, обзор новой камеры на 360*, варианты луков с пальто из новой коллекции и так далее.

  • Кнопки
Блик на CTA-кнопке привлечёт дополнительное внимание. Может быть замечен не сразу, но в том и фишка.

  • Фон
Бывает и такое. Например, мерцающие звёзды или блестки на всём письме. Но помните, что анимация всего фона — не всегда хорошая идея, так как это значительно утяжеляет рассылку.
Ориентируйтесь на свою целевую аудиторию и уместность использование анимации. Не обязательно добавлять её в каждую рассылку и, тем более, во все элементы письма. Всё-таки GIF должна быть акцентом, а не паттерном.

Как создать свою GIF

Как правило, уникальные анимированные изображения создаются в Adobe Photoshop. Почитайте их максимально подробный гайд о том, как сделать собственную GIF.

Конвертировать видео в GIF при помощи онлайн-сервисов Ezgif или Giphy.

Превратить несколько картинок в анимацию помогут Gifius или Toolson.

Как вставить GIF в письмо

В HTML-вёрстке: через тег <img>.

В визуальном редакторе Mailganer: через загрузку изображения.

В блочном редакторе Mailganer свою GIF: как обычное изображение.

В блочном редакторе Mailganer готовую GIF: через блок GIF.

В нём вы можете найти нужную анимацию на GIPHY — самом большом gif-стоке.

Недостатки GIF

  • Не везде отображаются
Некоторые версии Outlook вместо полноценной анимации покажут пользователю только статичную первую картинку. Поэтому дизайнерам рекомендуется помещать всю важную информацию на этот слайд.


  • Много весят
Анимация занимает больше места, чем файл с обычным изображением. Следовательно, и вес самой рассылки увеличивается. При плохом качестве связи письмо с GIF будет загружаться дольше обычного.


  • Уместны не всегда
Обычно GIF в письма используется для того, чтобы удивить подписчиков и как-то разнообразить статичную рассылку. Но если делать это слишком часто или анимировать всё подряд, то и от них можно устать.

Примеры GIF-анимации в рассылках

Анимированная CTA-кнопка и часть главного баннера в рассылке Aviasales
Анимация главного баннера в рассылке MIXIT
Анимированный баннер среди статичных блоков в рассылке MIXIT
Анимация главного баннера в рассылке Pitchfork
Анимированный баннер в рассылке «Нетологии»
Анимированный элемент в статичном блоке рассылки «Нетологии»
Анимированный баннер c демонстрацией товара в центре рассылки UNIQLO
Анимированный баннер в рассылке Nike
Анимированная часть текста в рассылке The Times
Анимированные элементы в рассылке Forever 21
Анимированный элемент статичного баннера в рассылке Harry's
Анимированный элемент главного баннера в рассылке American Apparel
Анимированный элемент главного баннера в рассылке Jack Spade
Анимация-демонстрация новых функций в рассылке Sprout Social
Анимация главного баннера в рассылке J. Jill

Понятно пишет о сложных вещах в разъяснительной Mailganer. Работает с лендингами и подсказками внутри продукта. Делает рассылки компании и отвечает за новости в Телеграм-канале.

Стать автором блога Mailganer ›

Лена Шумная
Эксперт по контенту
16.04.2020
дата публикации
03.12.2024
дата последнего обновления