Полезное

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

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

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

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

Главное преимущество анимации в отличие от видео — она воспроизводится автоматически и занимает гораздо меньше места.
Что можно анимировать
  • Логотип
Варианты анимации зависят от самого логотипа. Например, если он состоит из нескольких элементов, они могут «собраться вместе».

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

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

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

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

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

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

Превратить несколько картинок в анимацию помогут Gifius или Toolson.
Как вставить GIF в письмо
Как и обычную картинку — через тег <img>.
Недостатки 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