У цій статті
Описуючись найкращих практик, ось інструкції щодо вставки анімованого GIF-файлу у свою електронну пошту, безпечного та оптимізованого для мобільних пристроїв.
Ви помічали, як анімовані електронні листи та електронні листи дедалі більше переважають у папці "Вхідні"? Так. Як професіонал або дизайнер електронної пошти, ви, можливо, намагалися використовувати їх для збільшення кількості конверсій електронної пошти. Але ми також помітили, що маркетологи не завжди включають Анімовані GIF-файли в повідомленнях використання найкращих практик дизайну.
Цікаво, що анімовані GIF-файли насправді дуже прості у використанні в електронній пошті: їх можна використовувати як будь-який інший файл зображень, і вони чудово сумісні з більшістю поштових клієнтів. Проблема багатьох GIF-файлів в електронних листах полягає в тому, що заклики до дії в повідомленнях часто знаходяться в GIF-файлі, як у цьому електронному листі від Ен Тейлор:
Заклик до дії "GO" насправді не є кнопкою: це частина зображення. Будь-який клік, вгорі, внизу або навколо "кнопки" матиме той самий ефект: він переведе вас на цільову сторінку на сайті Енн Тейлор, оскільки посилання поширюється на весь анімований GIF. Це дуже легко для читачів отримати більше інформації (і, можливо, здійснити покупку), просто торкнувшись або натиснувши майже де завгодно. Але це також може бути проблематичним. Якщо анімований GIF не відображається належним чином з тієї чи іншої причини, повідомлення втрачає всі функції. Це може статися, якщо ...
- На мобільному пристрої зчитування спостерігаються спотворення розміру зображення
- Відображення зображень не активовано на клієнті, де читається електронна пошта.
- Програма блокування реклами блокує GIF.
- GIF - це великий файл, і зчитувач не чекає, поки він завершиться завантаження
Крім того, користувачі Outlook, швидше за все, побачать лише нерухоме зображення, оскільки анімація не працюватиме. З цих причин та інших, Ми завжди рекомендуємо застосовувати підхід до дизайну електронної пошти, який оптимізує HTML і не покладається виключно на зображення. Хочете знати, як використовувати свої чудові анімовані GIF-файли в електронній пошті, переконуючись, що ваші заклики до дії завжди відображаються? Продовжуйте читати.
Сьогоднішня майстерня
Сьогодні ми збираємося відтворити наступне повідомлення від Banana Republic і показати вам, як оптимізувати використання анімованих GIF-файлів у електронному листі, щоб забезпечити відображення вашого вмісту.
Ось наш підсумок у відеоуроці:
І для довідки, ось повне повідомлення від Бананової Республіки:
В електронному листі Бананової Республіки ключове повідомлення, яке включає заклик до дії, знаходиться в одному блоці зображень, як у електронному листі Ен Тейлор, побаченому вище. Більша частина повідомлення - вся чорна частина - це анімований GIF:
Це означає, що якщо зображення вимкнено або GIF зависає або не завантажується, ціле повідомлення буде втрачено.
Давайте це виправимо.
Крок 1. Виділіть анімований GIF
Анімований GIF у цій публікації чудовий. Отже, навіть якщо воно з’являється у папці «Вхідні», воно може не завантажуватися або може завантажуватися не повністю, тому повідомлення закінчується непрочитаним. Щоб уникнути цих проблем, гарною практикою є обрізання анімації GIF, вирізання частин зображення, які не потребують анімації. У повідомленні про Бананову республіку це означає, що ми хочемо виділити центральну частину зображення, частину, яка рухається - у рожевому полі внизу - і відтворити решту за допомогою тексту та HTML.
Щоб швидко обрізати зображення, ми використовуємо ezGIF.com. І ось у нас є наш новий анімований GIF:
Крок 2. Організуйте електронну пошту з блоками вмісту
Сьогодні ми почнемо з базового шаблону з одним стовпцем у редакторі електронної пошти BEE.
Заздалегідь визначена структура блоків вмісту дуже схожа на те, що нам потрібно: текст, за яким слідує зображення, після чого більше тексту, а потім кнопка із закликом до дії.
Немає необхідності вносити зміни в структуру, оскільки необхідні блоки вмісту вже є, тому ми просто починаємо з заповнення тексту, переконуючись у цілеспрямованому вирівнюванні всього, як ми прогресуємо. Ми також видаляємо блоки тексту, які нам не потрібні, наприклад заповнювач субтитрів у верхній частині.
Настав час перетягнути обрізаний анімований GIF і опустити його у заповнювач зображення, як і будь-яке інше зображення.
Тепер, коли наш вміст на місці, ми можемо розпочати форматування.
Крок 3. Використовуйте фонові кольори HTML
Починаючи з блоку вмісту "SWEET TREAT", ми встановили білий шрифт і збільшили його розмір до 36 пікселів. Тепер ми продовжуємо, встановлюючи чорним кольором тла повідомлення, як у GIF-повідомленні Бананової Республіки.
Для цього ми просто визначаємо кольори тла в меню Властивості рядка праворуч, встановлюючи фон рядка прозорим, а фон вмісту чорним.
Ми надаємо однакові властивості рядків усім наступним блокам вмісту, включаючи колір тла анімованого GIF.
Тепер повідомлення представлене як цілісний блок кольорів. На завершення форматуємо решту тексту.
Ми все ще маємо зробити деякі остаточні коригування відступів, щоб отримати правильні пробіли, та оновити нашу кнопку CTA, але наше повідомлення вже майже ідентичне зображенню Banana Republic; однак ми зробили це за допомогою безпечних шрифтів для електронної пошти та кольорів тла HTML.
Наше повідомлення виглядає акуратно, і ми значно зменшили ризик його втрати, якщо GIF не відображається. З’являться кольори, текст і головне кнопка із закликом до дії.
Крок No4: Додайте куленепробивну кнопку із закликом до дії
Попередження спойлера: нам не потрібно кодувати один рядок HTML або взагалі що-небудь робити, щоб переконатися, що наша кнопка із закликом до дії «ДОЗНАЙТЕ БІЛЬШЕ» працюватиме на всіх типах пристроїв та поштових клієнтах. У редакторі BEE всі кнопки за замовчуванням захищені від кулі, а це означає, що вони не засновані на зображеннях, тому вони завжди будуть відображатися, реагувати та виглядати чудово.
Все, що нам потрібно зробити, це оновити стиль у меню Властивості вмісту праворуч. Спочатку ми надаємо кнопці білий колір тла, а колір шрифту змінюємо на чорний.
Після цього кнопка виглядає так:
Потім форматуємо текст, збільшуючи розмір шрифту y і роблячи його жирним. Коли ми збільшуємо розмір, заклик до дії відображається у два рядки:
Але знову ж таки в меню Властивості вмісту, ми збільшили ширину до 35%:
Як ми бачимо, кнопка Banana Republic має дуже гострі кути, тому наша повинна бути менш округлою. Щоб змінити форму кнопки, ми зменшуємо радіус краю до 0.
Це наше повідомлення! Він майже готовий.
Крок 5: Останні штрихи: відрегулюйте інтервал
Текст і нижня частина кнопки заклику до дії занадто близько. Щоб створити трохи місця, ми коригуємо відступ над і під кожною структурою вмісту.
Ми просто клацаємо на структурі (кнопка, текст, зображення), переходимо в меню Властивості вмісту та переконуємось, що бачимо Додаткові параметри в розділі Заповнення в Spaces:
Потім ми регулюємо відступ над і під кнопкою, а також над і під блоком вмісту «Solo Online».
Це останнє повідомлення електронної пошти:
Його поява в мобільному попередньому перегляді ідеальна:
Ми майже точно відтворили повідомлення Бананової Республіки з його сучасним, впорядкованим дизайном та анімованим GIF, але оптимізували використання кольорів тла HTML та кнопок із закликом до дії, тому ми впевнені, що це буде чудово видно на всілякі пристрої та поштові клієнти.
Ми сподіваємось, вам сподобався цей семінар із використання зображень у форматі GIF в електронній пошті. Які-небудь питання? Ви можете надіслати нам свої запитання нижче в коментарях. І обов’язково спробуйте БДЕ редактор електронної пошти!
Ця стаття написана
Я виріс у Філадельфії, США, і маю два дипломи - англійської та економічної. Мені подобається розмірковувати про те, як люди живуть і працюють, про те, як розвиваються творчі процеси та про те, як ми взаємодіємо між собою. Співпраця над новими проектами є моїм щоденним паливом.
Вам сподобалась ця стаття? Тут ми маємо ще багато для вас.
Підпишіться зараз, щоб отримувати найкращі маркетингові новини електронною поштою та SMS.
Багато оригінального вмісту, нуль спаму. Підпишіться на розсилку
- Що таке спіруліна і як включити цей суперпродукт у свій раціон
- Підручник, як одягатися, щоб виглядати вищим і стрункішим
- Що таке дієта 5 2 і як вона може допомогти вам легко схуднути
- Що таке "додаток-вбивця" і як перший в історії спровокував революцію - BBC News Mundo
- Символічні татуювання з великим значенням (50 зображень та значень)