Рекомендації щодо дизайну email-листів

Email-розсилка — це візитна картка бізнесу при спілкуванні з підписниками. Відкриваючи повідомлення, кожен перш за все звертає увагу на візуал, а вже потім на текст. Структура та наповнення email: графіка, ілюстрації, кольори, шрифти — усе це відіграє важливу роль у прочитанні листа до кінця і впливає на виконання користувачем потрібної дії. У цьому матеріалі ми поділимося рекомендаціями щодо дизайну email-розсилок.

Шаблон

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

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

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

Якщо ви вирішите зробити макет самостійно, не забувайте, що кожен елемент листа має власні правила верстки. Так, для відступів (між блоками, праворуч/ліворуч/зверху/знизу) ми рекомендуємо застосовувати однакові значення, наприклад по 20, а для виділення елементу — 10 і 20 або 15 і 30 (друге значення є кратним 2). Інакше, якщо взяти хаотичні значення (10,15, 25),лист виглядатиме неохайно.

Редактор eSputnik працює за принципом drag-and-drop — це дозволяє додавати будь-які блоки простим перетягуванням до шаблону. Створюйте різні макети залежно від типу розсилки, пори року, свята тощо. Але пам'ятайте, що кожен із них має бути витриманий у фірмовому стилі. Придумайте власну родзинку дизайну email-листа, яка вас виділятиме з-посеред конкурентів і буде впізнаваною для підписників.

Адаптивний дизайн

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

Нагадаємо оптимальні розміри шаблону для розсилки: десктоп — 600px, мобільна версія — 320px. Щоб переглянути більш широкий лист, підписникові треба буде вдатися до горизонтального скролу, який аж ніяк не властивий для email.

З eSputnik ви можете не перейматися щодо коректності відображення ваших розсилок. Наш адаптивний редактор дозволяє вибрати будь-яку зі структур, налаштувати адаптивність кожного елемента — і листи правильно відображатимуться на всіх пристроях.

Header

Хедер — шапка листа, яка знаходиться над основною картинкою; в ньому найчастіше розміщують логотип і меню з посиланнями на розділи сайту або контакти. Шапка допомагає швидко ідентифікувати бренд: одержувач бачить ім'я відправника в полі "Від кого", а коли відкриває листа, одразу звертає увагу на логотип. Не перевантажуйте цей блок даними, щоб на першому екрані помістилася основна думка повідомлення, подавайте тільки важливу інформацію і використовуйте якісні зображення.

Footer

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

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

Текст

Важливі думки оформлюйте у вигляді підзаголовків, виділяйте іншим шрифтом або кеглем, але в міру. Особливо обережними будьте з кольором. Інакше загубиться важливість думки, у читача рябітиме в очах, а поштовикам така пишність може здатися підозрілою. Не обводьте й не виділяйте слова курсивом, підкресленням. Одержувач може сприйняти підкреслення як посилання і безуспішно намагатися за ним перейти.

Максимальна ширина текстового блоку — 600px, цього достатньо для нормального сприйняття абзацу в 3-4 рядки, де можна вмістити 6-8 пропозицій. В одному рядку зазвичай вміщується до 80 символів. Текст із чіткою структурою легко й приємно читати.

Колір тексту

Колір тексту в тілі листа має лаконічно контрастувати з фоном, на якому він знаходиться, — це запорука того, що користувач без проблем прочитає повідомлення. Чергуйте текстові блоки із зображеннями в співвідношенні як мінімум 50/50 — це впливає на доставлення повідомлень.

Шрифт

Шрифти можна поділити:

• на безпечні — ті, які відображаються всіма поштовими клієнтами, — це Arial, Verdana, Tahoma, Times New Roman та ін. Повний список можна переглянути тут;
• небезпечні — вони можуть не підтримуватися поштовиками — це Georgia, Courier та ін.

Для оформлення тексту email-листа, ясна річ, надійніше використовувати безпечні шрифти. Якщо вам потрібен шрифт типу антиква, із зарубками й нестандартними символами, або дизайнерський/власний, обов'язково прописуйте запасний у коді листа і тестуйте розсилку, щоб переконатися в правильності відображення. Нагадаємо, що з eSputnik ви можете додавати до розсилки кастомні шрифти.

Стандарти оформлення шрифтів для емейл-листа:

• розмір — 14-16px, міжрядковий інтервал 1.5 — тоді одержувачу не доведеться вчитуватися в кожне слово;
• без Caps Lock — листи, в яких багато тексту написано капсом, часто відправляються в спам.

Порада: реагуйте на зміни в суспільстві. Наприклад, у жовтні цього року багато великих компаній змінили написання своїх логотипів у стилі доброшрифту — спеціального шрифту, приуроченого до Міжнародного дня ДЦП. Це приклад зміни оформлення лише одного елемента, але він дійсно важливий, щоб привернути увагу аудиторії до гострих проблем.

Тема листа

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

Рекомендована кількість символів у темі для десктопної версії — 70-150, для мобільних — 35-40. Найчастіше користувачі відкривають повідомлення, тема яких складається з шести слів. Ці цифри не треба тримати в голові: тепер наш редактор показує рекомендації під час створення листа.

Preheader

Прехедер доповнює тему і також впливає на Open Rate: 24% одержувачів приймають рішення, відкрити розсилку чи ні, з огляду на нього. Пишіть зрозумілий і короткий прехедер. Наприклад, Gmail покаже пропозицію у 100-120 символів, включаючи пробіли. Якщо ви не хочете, щоб одержувачу довелося читати двічі одне й те саме, використовуйте для написання прехедера дрібний кегль і основний колір фону (його буде не видно). Щоб ви не мали проблем з оформленням прехедера, у редакторі eSputnik уже все враховано, тож просто заповнюйте поле "Прихований передзаголовок".

Цифри, емодзі, знаки

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

Зображення

Лист не має виглядати як суцільна картинка: він може просто не відобразитися. Крім того, повідомлення-картинки часто не пропускаються фільтрами поштовиків.

Банер

Він створює настрій листа, оскільки зазвичай розміщується на початку повідомлення. Іноді роблять кілька банерів для різних текстових блоків. Кожен із них має бути яскравим, привабливим, відповідати стилю компанії. До основної картинки можна включити логотип, якщо його немає в шапці. Також рекомендуємо додавати до великого банера СТА. Оптимальні розміри банера: висота — 300px, ширина — 600px.

Alt-текст

Будь-яке повідомлення має привабливо виглядати навіть без картинок, бо у деяких користувачів зображення не завантажуються автоматично. Щоб у такому випадку одержувач зрозумів суть повідомлення, слід прописати Alt-текст для кожної картинки.

Зображення для карток товару

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

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

Dark Mode

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

• логотип і заголовки картинкою;
• іконки соціальних мереж;
• зображення товарів;
• фото автора розсилки.

У такому випадку не буде виділятися стандартний білий фон. А якщо ваші зображення у чорній кольоровій схемі, додайте світлу тінь або обведення, щоб вони не зливалися в одну темну пляму. Більше рекомендацій щодо dark mode ви знайдете в окремій статті.

Фон

Сприйняття одного й того самого повідомлення на різних фонах відрізнятиметься. Лист має два фони: підкладка (загальний фон) і фон власне емейла. Підкладка часто не відображається на мобільних пристроях. Її краще зробити в нейтральних відтінках або підібрати зображення, що відповідає інфоприводу. Важливо, щоб вона не відводила фокус від самого листа.

Фонове зображення

Картинку для фону листа взагалі не обов'язково використовувати. У деяких поштовиках вона замінюється суцільним сірим або білим фоном. Наприклад, Outlook не показує фонові зображення. Якщо ви все ж таки вирішите його додати, воно не повинно відволікати від тексту, тож не варто захоплюватися візерунками та яскравими заливками. А для підступних поштовиків зробіть альтернативний однотонний фон, наближений за кольором до вибраного зображення, щоб зберегти концепт.

Негативний простір

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

На прикладі розсилки від Apple з використанням порожнього простору можна побачити, як контраст із фоном, мінімум тексту, яскраві кольори та підсвічування акцентують увагу на MacBook.

Не забувайте оптимізувати графіку: лист із важкими картинками завантажується довше, а нікому не подобається чекати. Кожне зображення має важити до 1 Мб.

Кольори

Якщо корпоративний колір компанії надто яскравий, наприклад салатовий або червоний, не застосовуйте його для фону, оскільки емейл важко читатиметься. Натомість у кнопках заклику до дії їх можна використовувати. Пам'ятайте, що велика кількість їдучих відтінків у дизайні листа розсилки відштовхує. Щоб яскраві кольори виглядали гармонійно, застосовуйте їх дозовано для важливих елементів, до яких треба привернути увагу.

Посилання

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

До зображень краще теж додавати посилання, оскільки більшість користувачів часто клікає їх. Крім того, якщо для картинки не проставити посилання, то Gmail пропонуватиме користувачам їх скачати.

Адресу електронної пошти та номер телефону також обгортайте посиланнями. Якщо цього не зробите ви, це зробить поштовий клієнт (причому із власними стилями, що може вплинути на коректність відображення). Наприклад, частину цифр перенесе до наступного рядка. Детальніше про роботу з посиланнями читайте в цьому матеріалі.

CTA

Кнопки заклику до дії оформлюйте в загальому стилі листа й бренду. Їх можна виділити кольором логотипу компанії або зробити контрастними, щоб вони не зливалися із загальним фоном. Є також ефективні кольори, протестовані маркетологами і психологами в процесі досліджень. Наприклад, на сайті кнопки можуть бути чорними, а в розсилці — червоними, оскільки вони більш клікабельні.

Сам заклик кнопки має бути узгодженим із заголовком листа. Якщо у вас лише одна СТА, розмістіть її на першому екрані, адже не всі користувачі прокручують розсилку до кінця. А в довге повідомлення краще додати кілька кнопок. У прикладі розсилки від Toptop.ru кнопки з різними закликами розміщені на першому екрані, в середині тексту та в кінці.

Головні й другорядні кнопки можна зробити різними за дизайном: змінити колір, підсвічування, розмір, додати зображення до кнопки, приховати для робочого столу або мобільної версії.

Зрозуміти, наскільки ефективно працює тема листа, чи вдало використовуються емодзі, цифри, зображення, кольори, шрифти, посилання, СТА та будь-які інші елементи, допоможе А/В-тестування.

До висновків

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

Не намагайтеся досягти досконалості в дизайнерських фішках: якщо вони сподобалися вам, це не означає, що вони сподобаються всім. Точніше, вони обов'язково комусь не сподобаються, і це нормально. Щоб створити привабливе в усіх значеннях повідомлення:

• перш за все виділіть особливості вашого продукту і ЦА та спирайтеся на них;
• дотримуйтесь основних правил створення розсилки;
• пам'ятайте, що мобільна і десктопна версії листів можуть відрізнятися відповідно до структури — робіть повідомлення адаптивними;
• враховуйте тренди дизайну email-листів;
• проводьте попереднє тестування верстки та дизайну листа і його окремих елементів.

Яким саме буде оформлення розсилки, вирішуєте ви. Втілюйте навіть найсміливіші рішення і створюйте стильні, впізнавані емейли за допомогою широкого і зручного функціоналу eSputnik!