Як правильно верстати електронні листи: ТОП-поради для email-маркетолога

Основні проблеми, що виникають при верстці листа

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

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

А тепер давайте розберемо, чому виникають такі проблеми:

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

1. Велика кількість програм та інтернет-сервісів для читання пошти.
2. Не всі CSS- і HTML-теги працюють в імейлах.
3. Різна ширина екрану на телефоні та комп'ютері.

А зараз ми розберемо основні правила, які варто знати і пам'ятати email-маркетологам, щоб розуміти, що не так із розсилкою та як коректно скласти ТЗ.

Що варто знати про верстку листа

Макет листів

Будь-які листи складаються з чотирьох блоків:

• прехедер;
• шапка;
• тіло;
• футер (підвал).

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

Ширина контентної частини, бажано, повинна бути не більше 600 пікселів — це найзручніший розмір для більшості пристроїв, що легко підлаштовується під кожен лист. Якщо неправильно вибудувати ширину, то лист може «розпливтися». Фон може бути абсолютно будь-якого кольору і розміру — тут немає жодних обмежень.

Не варто використовувати JavaScript, Flash і Active X — часто такі листи потрапляють в спам. Для коректного відображення користуйтеся універсальними тегами і атрибутами .

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

Таблична верстка

Насправді, це застарілий метод. Але під час створення email-розсилки — це найвдаліший метод для нормального відображення листа.

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

Адаптація листів

Для коректного відображення листів на різних екранах або різних пристроях потрібно використовувати блокову адаптацію.

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

Оформлення тексту

Для того, щоб успішно заверстати лист, необхідно використовувати стандартні шрифти, такі як - Arial, Verdana, Tahoma, Times New Roman. Ці шрифти підтримуються на всіх пристроях і саме від них залежить читабельність тексту.

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

При редагуванні коду вкажіть стильові параметри тексту для кожного текстового блоку: колір та інтерліньяж (line-height), розмір шрифту (font-size в px або pt) та гарнітуру (font-family) - це допоможе відобразити лист так, як було заплановано початково.

За правилами друкарні, прийменники і союзи краще перенести на наступний рядок, тому використовуйте нерозривний пробіл.

Оформлення посилань

Не використовуйте в якості пояснювального тексту URL — такі посилання можуть виглядати як шкідливі копії сайтів, а лист — як шахрайський. Пояснювальний текст повинен бути у вигляді тексту.

Поштові сервіси погано визначають редирект або скорочені посилання. Через неточності URL і кінцевої адреси листи потрапляють в спам.

Про зображення

Необхідно використовувати зображення у форматі JPEG, PNG, BMP і стискати їх для швидкого завантаження.

Вказуйте висоту, ширину зображення і альтернативний текст — це важливо враховувати, щоб зображення і банери не з'їхали.

Щоб лист не потрапив у спам, додайте plain text версію листа (лист, який складається з одного тексту). Це необхідно для поштових клієнтів, які не відображають HTML. І не забувайте вставляти посилання в зображення — респонденти часто клацають по картинці.

Якщо у вас немає верстальника

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

SendPulse

У сервісі SendPulse є понад 130 готових шаблонів під різні сфери та завдання, наприклад, для освітніх платформ, туризму, інтернет-магазину, на розпродаж, для дайджесту або реєстрації на вебінар. Шаблони можна редагувати та змінювати їх дизайн під стиль свого бренду.

Також у блочному конструкторі листів від SendPulse ви можете зібрати email з нуля, просто перетягуючи потрібні елементи в робочу область. У цьому конструкторі гнучкі налаштування: дизайн всіх елементів листа можна вибрати самому, додати відео з Youtube – достатньо вставити посилання та SendPulse згенерує прев'ю. Є ще можливість додати кнопку для швидкої оплати прямо в email-шаблон. Всі створені листи в SendPulse адаптивні — вони однаково добре відображаються у всіх email клієнтах на ПК і смартфонах.

Letteros

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

GetResponse

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

Unisender

У цьому сервісі можна підлаштувати шаблон під себе, а під час відправки зробити статистичний аналіз в особистому кабінеті. Також тут є понад 100 готових безкоштовних шаблонів і можна персоналізувати листи.

Що головне у верстці листів?

1. Ширина листа повинна бути не більше 600 пікселів.
2. Кожен лист верстається таблицею або будується модулями.
3. Варто використовувати блокову адаптацію.
4. Користуйтеся універсальними тегами і атрибутами.
5. Тільки стандартні шрифти.
6. Розставляйте посилання в зображенні.
7. Використовуйте макет однієї колонки, де блоки будуються послідовно один під одним .
8. Використовуйте зображення в форматах JPEG, PNG, BMP, GIF і не забувайте їх стискати.
9. Пояснювальний текст пишіть текстом — не використовуйте URL.
10. Якщо у вас немає верстальника — використовуйте конструктор листів.
11. Не варто використовувати JavaScript, Flash-анімацію, скорочені посилання і редирект.

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