GIF-анімації в HTML-листах у MS Outlook

Microsoft Outlook — один із найпопулярніших інструментів електронної пошти і планування завдань. Оскільки 4,16% людей у світі користуються додатком Outlook, наше пріоритетне завдання — отримати від цього продукту максимум ефекту для залучення клієнтів і збільшення прибутків.

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

Отже, де можна побачити GIF-анімації в електронних листах:

• Outlook у форматі підписки Microsoft 365 або Office 2021;

• MS Outlook для мобільних як додаток;

• Outlook 2003 як додаток;

• Outlook для Mac як додаток;

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

Як вставляти GIF-файли в HTML-шаблони для Outlook за допомогою Stripo

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

• перетягніть у шаблон базовий блок (модуль) «Зображення»;

• додайте анімоване 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, після чого експортувати їх у цей поштовий клієнт у два простих кроки. Надсилайте ваші елегантні розсилки клієнтам, колегам і друзям, щоб справити на них найкраще враження цікавим контентом.