GIF-анимации в HTML-письмах в MS Outlook

Microsoft Outlook — один из самых популярных инструментов электронной почты и планирования задач. Поскольку 4,16% людей в мире пользуются приложением Outlook, наша важнейшая задача — извлечь из этого продукта максимум для привлечения клиентов и увеличения доходов.

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

Итак, какие версии Outlook поддерживают гифки в письмах:

• Outlook в порядке подписки Microsoft 365 или Office 2021;

• MS Outlook для мобильных как приложение;

• Outlook 2003 как приложение;

• Outlook для Mac как приложение;

• веб-версия Outlook на мобильных и десктопных устройствах.

Как вставлять гифки в HTML-шаблоны для Outlook при помощи Stripo

GIF-файлы вставляются в шаблоны точно так же, как и обычные изображения:

• перетащите в шаблон базовый блок (модуль) «Изображение»;

• добавьте анимированное GIF-изображение;

• или вставьте соответствующую ссылку;

• завершите работу с шаблоном;

• нажмите «Экспорт».

Дополнительную информацию вы найдете в видео ниже:

Ограничения для гифок в десктопном приложении Outlook:

1. В десктопном приложении Outlook GIF-анимации автоматически воспроизводятся только три раза. Если получатель откроет письмо в четвертый раз, ему нужно будет нажать кнопку «Воспроизвести».
   Примечание: в веб-версии и мобильном приложении Outlook GIF-файлы воспроизводятся автоматически столько раз, сколько раз получатель откроет письмо.

2. Если вы добавите в письмо четыре или более анимаций, ни одна из них не будет воспроизводиться автоматически. Читатель увидит над каждой из них кнопку воспроизведения. И это на самом деле круто — одновременное воспроизведение нескольких GIF-файлов может вызвать припадок эпилепсии. Таким образом Outlook заботится о здоровье получателей.
   Примечание: в веб-версии кнопок воспроизведения не будет. GIF-анимации загружаются и работают в автоматическом режиме.

Запасной вариант для пользователей старых версий MS Outlook

Те получатели, которые пользуются Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016 и даже Outlook 2019, по-прежнему будут видеть статические изображения — первые кадры GIF-анимаций.

Но если ваша гифка несет важную информацию или выполняет какую-либо другую миссию, то вы, конечно же, хотели бы, чтобы ее увидели все ваши клиенты.

Итак, как мы отправляем GIF-анимации тем пользователям Outlook, которые предпочитают старые версии этого почтового клиента:

• всегда! Слышите, всегда! добавляйте ссылку на веб-версию письма (некоторые называют ее «посмотреть онлайн»);

• также вы можете добавить примечание «Посмотреть GIF в сети».

GIF-анимации в электронных письмах: лучшие практики

Это важно: с ростом популярности GIF, видео и видеоигр мир столкнулся с новой формой эпилепсии — фотосенситивной (светочувствительной). К сожалению, сейчас ею страдает 3% населения Земли. То есть GIF-файлы должны быть не только релевантными и ценными: нам нужно сделать их еще и безопасными.

Рекомендации, которым нужно следовать, чтобы не навредить получателям:

1. Первый принципиальный момент — убедитесь в том, что вы добавили на один скролл экрана только одну GIF-анимацию. Некоторые бренды используют 2-4. Хотя на самом деле это может вызвать у получателей как минимум головокружение.

2. Соблюдайте скорость GIF-файлов в пределах двух кадров в секунду, в противном случае можно вызвать у людей приступы фотосенситивной эпилепсии (PSE). Решение: пусть изображения в гифке плавно сменяют друг друга. Кроме того, не обязательно анимировать целые баннеры — достаточно применить анимацию только к небольшим элементам.

Лучшие примеры доступных GIF-файлов в письмах

Для этого раздела мы сделали подборку лучших примеров GIF-анимаций, отвечающих требованиям предотвращения приступов фотосенситивной эпилепсии.

1. Adidas

Задача этой GIF-анимации: продемонстрировать уникальные возможности продукта.

Если вы хотите показать эксклюзивные фичи вашей новой продукции или объяснить подписчикам, как начать пользоваться вашим инструментом, вам нужно снабдить их мануалом или подробным описанием. Но что касается первого варианта, вы не можете быть уверены, что все получатели нажмут «волшебную кнопку». А насчет второго — честно говоря, возникают сомнения, что пользователи его вообще будут читать. Вот почему GIF-анимации для Outlook — отличное решение.

Adidas сделали все действительно безупречно. Анимация имеет среднюю скорость, и глаза от нее не устают. Но при этом они показали, как их кроссовки выглядят ночью.

Что делает эту гифку такой мягкой? — При ее создании Adidas применили эффект перехода, то есть плавную смену изображений.

2. Banana Republic

Задача этой GIF-анимации: сообщить получателям, на какие категории товаров распространяется скидка.

Конечно, Banana Republic могли бы сделать два баннера или разделить существующий на две части. Но в первом случае емейл стал бы намного длиннее, а во втором варианте баннер с «сообщением об акции» над изображениями выглядел бы перегруженным.

Таким простым способом Banana Republic уведомили потенциальных и существующих клиентов, что скидка распространяется на две категории: товары для мужчин и женщин.

Что делает эту гифку такой мягкой? — Одинаковое положение людей на изображениях.

3. Monica Vinader

Задача этой GIF-анимации: показать товар крупным планом.

У нас периодически возникает потребность показать рекламируемый продукт крупным планом. Эффект ролловера изображений и GIF-файлы для Outlook — лучшее решение.

Что делает эту гифку такой мягкой? — Большое количество изображений, каждое из которых является фотографией товара в немного большем масштабе, чем предыдущий кадр, а затем наоборот — фото в порядке постепенного удаления. Изображения постепенно меняются благодаря эффекту перехода.

4. Victoria’s Secret

Задача этой GIF-анимации: обзорная демонстрация богатства вашего ассортимента.

Если вам нужно показать весь ассортимент или товары в наборе, лучше использовать GIF-анимации.

Это избавит от необходимости анимировать весь баннер — достаточно одного элемента.

Что делает эту гифку такой мягкой? —  Расположение, ширина и длина предметов нижнего белья остаются без изменений.

Примечание: этим простым способом вы также можете показать все доступные цветовые варианты новой товарной линии.

5. Athleta

Задача этой GIF-анимации: показать варианты сочетания одежды из вашей коллекции.

Эта гифка состоит из пяти фото. Если бы мы добавили их в шаблон по отдельности — письмо получилось бы длинным и без динамики, если не сказать скучноватым. Тогда как GIF-анимация делает прямо противоположное — оживляет рассылку Athleta. Кроме того, гифка дополняет цель кампании — показать наилучшие сочетания.

Что делает эту гифку такой мягкой? — При ее создании Athleta применили эффект перехода.

6. Old Navy

Задача этой GIF-анимации: показать покупателям, на какие товары действует скидка.

Посредством трех фото этой гифки Old Navy показывают клиентам, для какой категории действует акция. Такая анимация украсит промописьмо и не перегрузит клиентов множеством изображений товаров.

Что делает эту гифку такой мягкой? — При ее создании Old Navy применили эффект перехода.

Примечание: помимо товаров со скидками, компания также показывает дополнительные товары, например топы и блузки для создания стильных образов. Этот прием поможет убедить клиентов делать больше покупок.

7. Brighton

Задача этой GIF-анимации: привлечь внимание к кнопке CTA.

Компания предлагает своим покупателям встретить лето и добавить ярких красок в свой гардероб аксессуаров. Brighton используют красочную кнопку CTA, чтобы показать свое следование новейшим трендам и привлечь внимание клиентов.

Что делает эту гифку такой мягкой? — Плавный цветовой переход.

8. Google Workspace

Задача этой GIF-анимации: презентовать новую фичу (персональные задачи).

GIF-файлы — отличный инструмент для представления новых функций и демонстрации того, как их использовать. Google Workspace показывает получателям, как создавать персональные задачи из сообщений. Пользователи также могут установить дату выполнения, добавить описание и вернуться к разговору. Благодаря этому клиенты не будут перегружены длинными текстовыми мануалами. Также они увидят, как использовать новые фичи, даже не читая письмо целиком.

Что делает эту гифку такой мягкой? — Плавная смена изображений.

9. ColourPop Cosmetics

Задача этой GIF-анимации: сообщить клиентам об акции.

Добавление в письма GIF-анимаций делает ваш контент более эстетичным и помогает клиентам заметить ключевые моменты. Но при этом важно не раздражать получателей множеством анимированных баннеров. И да, не более двух GIF в одном письме.

ColorPop Cosmetics использовали в сообщении об акции небольшой анимированный эффект тени. Эффект едва заметен и не вызывает у пользователей головокружения, но при этом заставляет посмотреть на основную часть письма.

Что делает эту гифку такой мягкой? — Анимированный эффект тени для текста.

10. Morning Brew

Задача этой GIF-анимации: показать широкий ассортимент товаров.

Morning Brew сделали покупателям специальное предложение — код, который позволяет получить скидку на экологически чистые кроссовки, на которые вообще-то раньше не было никаких акций. Компания использовала анимированное GIF-изображение, чтобы продемонстрировать широкий выбор цветовых вариантов.

Что делает эту гифку такой мягкой? — Расположение, ширина и длина кроссовок не меняются.

Примечание: это отличный способ презентовать продукцию, при этом не отнимая у клиентов много времени.

В завершение

Специалистам по email-маркетингу и компаниям, использующим Outlook в качестве корпоративного почтового клиента, больше не нужно беспокоиться о том, что некоторые подписчики (примерно каждый десятый) не увидят гифки с инструкциями и описаниями. Также анимации — замечательный способ сделать ваши сообщения красивыми и ценными.

Хочу напомнить, что в Stripo можно создавать HTML-письма для Outlook, после чего экспортировать их в этот почтовый клиент двумя простыми шагами. Отправляйте эти элегантные рассылки клиентам, коллегам и друзьям, чтобы произвести на них впечатление интересным контентом.