Litmus Live: як зберегти актуальність дизайну листів

2024-11-07 · Blocks team · 6 хв читання

Щодня у світі надсилають у середньому 333 млрд листів, тож email-маркетинг — сфера з доволі гострою конкуренцією. Листи коштують недорого, тому, найпевніше, залишаться з нами ще дуже надовго. Ось чому варто опанувати мистецтво створення якісних листів, якщо ви досі цього не зробили.

Крім великої кількості конкурентів, email-маркетологи можуть зіткнутися й з іншими викликами.

Виклики, з якими стикаються email-маркетологи сьогодні

Більше поштових клієнтів і пристроїв, ніж будь-коли. За даними Statista, у 2022 році кількість користувачів електронної пошти становить близько 4,3 млрд. А це безліч пристроїв і різних поштових клієнтів, під які треба адаптуватися.
Втома від листів і розсіяна увага.
Налаштування, які обирають самі користувачі, наприклад темна тема. У 2020 році Android Authority провело дослідження й з’ясувало, що майже 82% користувачів Android віддають перевагу темній темі.
Автоматичні боти відсіюють листи й фільтрують скриньки.
Дедалі більше спаму та фішингових листів. Statista повідомляє, що у вересні 2021 року приблизно 88,88 млрд із 105,67 млрд листів були спамом.
Фаєрволи за замовчуванням блокують або змінюють листи.

І це лише початок списку. Проте не варто сприймати це як перешкоду для ефективної email-кампанії. Навпаки, це дає маркетологам змогу розвивати навички й створювати першокласний контент.

3 принципи дизайну листів, яких варто дотримуватися

Дизайн листів тримається на трьох китах:

Доступність.
Адаптивність.
Краса.

Розгляньмо кожен із них детальніше.

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

Адаптивність. Раніше головна вимога до адаптивного листа була така: він має змінювати розмір і правильно відображатися на екранах із різною роздільною здатністю. З розвитком email-маркетингу з’явилися нові вимоги. Тепер листи мають враховувати темну тему, блокування зображень і оптимальне відображення в мобільних версіях.

Краса. Пам’ятайте, що лист має не лише привертати погляд, а й бути повноцінним продуктом.

Перш ніж братися за дизайн, проведіть аудит поштових платформ

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

Щоб не проґавити змін, email-маркетологам варто щороку проводити аудит і:

Визначати найпопулярніші поштові клієнти.
Стежити за співвідношенням користувачів десктопа й мобільних пристроїв.
Стежити за співвідношенням безкоштовних і корпоративних поштових адрес.

Приклад аудиту

Уявімо, що ви працюєте у сфері B2B і після аудиту побачили, що більшість ваших користувачів:

користуються поштовими клієнтами Outlook або Gmail.
мають корпоративні поштові адреси.
переглядають листи на десктопних комп’ютерах.

У такому разі під час роботи над дизайном листів варто врахувати таке:

Надавайте пріоритет десктопним поштовим клієнтам. Це не означає, що про мобільні версії можна зовсім забути. Просто приділіть більше уваги тому, щоб десктопні версії листів були якомога бездоганнішими.
Фаєрвол (блокування зображень). На жаль, тут від вас нічого не залежить. Тож найкраща порада — робити листи, які зберігають сенс навіть без зображень.
Клієнти, що погано відображають CSS. Кольори, таблиці, кнопки й інші елементи листа можуть виглядати не так, як ви задумали. І це дуже важливо враховувати під час роботи над дизайном листа.

Що пам’ятати, створюючи HTML-шаблони листів

Таблиці: мислимо в межах клітинки

Таблиці — основа надійного й адаптивного дизайну листів, адже вони:

найстабільніше відображаються в листах (порівняно з float, padding, margin і вирівнюванням). Інформацію, подану у вигляді таблиці, легше сприймати. Уявіть, що в прикладі нижче не було б горизонтальних смуг. Орієнтуватися в такому листі було б складно.

приклад дизайну шаблону листа з таблицею

Їх простіше верстати й контролювати на мобільних — колонки перетворюються на рядки. На відміну від CSS, HTML-таблиці добре працюють у поштових клієнтах і не перетворять ваш гарний макет на щось зовсім інше.

Оптимізація під текст

За найкращими практиками, не передавайте текст і кнопки зображеннями. Зображення часто блокуються або не завантажуються. Якщо поєднувати текст і зображення, головна пропозиція лишиться читабельною, навіть коли зображення заблоковано. І це найкраще, що можна зробити, щоб достукатися до якомога більшої кількості клієнтів.

Крім того:

медіазапити або автоматична зміна розміру допомагають оптимальніше показувати текст на мобільних.
HTML-кнопки підлаштовуються під темну тему й вирізняються краще, ніж зображення.

Пропозиція текстом і картинкою та лише картинкою при заблокованих зображеннях: читається тільки варіант зі справжнім текстом

У першому прикладі користувачі все одно можуть прочитати пропозицію, зацікавитися й перейти на сайт, щоб дізнатися більше. У другому — ні, тож вони втрачають будь-який шанс дізнатися про пропозицію та зробити покупку. Програють від цього і користувач, і компанія.

Які зображення використовувати в шаблоні листа

PNG

Дуже корисний формат зображень для сміливого дизайну й обходу непередбачуваного CSS.

Він дає змогу використовувати такі прийоми оформлення:

Прозорість/градієнт

Лист Sensei, де PNG-фото через прозорий градієнт переходить у білий фон

Тіні

Приклад шаблону листа з PNG-зображенням із тінню

PNG-зображення також можна нарізати, щоб розділяти секції листа, особливо для переходу між різними кольорами фону.

Це допомагає візуально розмежувати блоки, виділити інформацію й покращити читабельність.

приклад дизайну шаблону листа з PNG-зображенням для візуального розмежування

GIF — вже не формат, якого слід уникати:

кращий за Flash, який поштові клієнти ніколи не підтримували і який узагалі припинили розвивати.
зациклення створює безшовну анімацію. Якщо все зробити правильно, користувачі навіть не помітять, що GIF повторюється.
менше кольорів = менший розмір файлу, тож ваші листи завантажуватимуться швидше.

Приклад шаблону листа з GIF

Цифрові ілюстрації — теж обов’язковий елемент дизайну листів у 2022 році. Цифрова ілюстрація — це зображення, створене за допомогою цифрових інструментів. Не плутайте їх з обробленими фото: цифрові ілюстрації малюють з нуля.

Вони мають такі переваги:

універсальні, їх легко масштабувати, редагувати й використовувати повторно. Завдяки цьому на візуальний контент для листів іде значно менше часу.
передають фірмовий стиль, коли CSS-елементи поводяться непередбачувано. CSS-елементи можуть змінити колір (і зруйнувати ваш задум), а цифрові ілюстрації лишаються незмінними, хай у якому поштовому клієнті підписники читають ваші листи.

Щоб отримати від цифрових ілюстрацій максимум, скористайтеся цими порадами:

Оформлюйте їх тінню, обведенням або відступами (якщо це JPEG). Так цифрова ілюстрація виглядатиме реалістичніше.
Обирайте кольори середніх тонів, щоб зображення не зливалися з темною темою. Так вони чудово виглядатимуть, хай яку тему обрав підписник для читання листа.

приклад цифрової ілюстрації комп’ютера в шаблоні листа

CSS (каскадні таблиці стилів) — частина коду HTML-листів, яка змінює дизайн листа: шрифти, кольори, відступи тощо. Це дуже зручний, але підступний інструмент: у деяких клієнтах CSS може відображатися неправильно й перетворити ваш лист на щось зовсім інше, як у прикладі нижче.

як фірмові кольори, задані через CSS, змінюються в темній темі поштових клієнтів

Тому будьте обережні й тестуйте листи з CSS у різних поштових клієнтах, щоб уникнути неприємних сюрпризів.

Головні висновки

Визначте пріоритети за потребами поштових клієнтів вашої аудиторії й відповідно продумуйте дизайн. Не витрачайте час на те, що виявиться непотрібним.
Оптимізуйте час і ресурси (створюйте надійні шаблони для повторюваних завдань). Так у вас звільниться більше часу для інших важливих справ.
Приймайте зміни й адаптуйтеся до нових підходів у світі листів, як-от адаптивність і темна тема. Щоб листи лишалися актуальними, треба йти в ногу з часом.
Сміливо навчайте команди розробників і дизайнерів, діліться з ними важливими спостереженнями й досвідом. Пам’ятайте: у вас спільна мета, і досягти її можна лише разом.

Litmus Live — маркетингова конференція, яка триває 2 дні й збирає безліч експертів із діджитал-маркетингу. Ми законспектували лекцію Ali Mahad «Доступний, адаптивний і гарний дизайн листів у 2022 році», додали трохи власних цифр та ідей і перетворили цей матеріал на статтю, яка допоможе вам зорієнтуватися у світі дизайну листів.

Створіть шаблон листа в Blocks і спробуйте ці прийоми на практиці!

Хочете дізнатися більше про інші конференції та виставки з email-маркетингу? Читайте наші статті про найближчі конференції з email-маркетингу 2023 року.