Дизайн email-розсилки: як створити лист, що читається в будь-якій пошті

Крок 1

Одна мета й структура листа

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

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

💡 Напишіть тексти до дизайну. Коли текст готовий, стає видно, скільки блоків насправді потрібно, а скільки — «щоб було».

Крок 2

Ширина, сітка й модулі

Поштові програми показують HTML по-різному: Mailchimp у довідці зазначає, що вони використовують різні способи відображення, зокрема рушій Microsoft Word, тому складна верстка може відображатися не так, як задумано. Звідси головні правила email-дизайну. Робіть лист шириною до 600 px — так радить Mailchimp, бо листи часто читають у вузькій панелі перегляду. Тримайтеся однієї колонки: на телефоні вона читається найкраще. За даними Can I email, Outlook для Windows (версії 2007–2019) не підтримує display: flex, тому складні багатоколонкові сітки — ризик.

• •збирайте лист із модулів: заголовок, текст, зображення з підписом, кнопка, роздільник;
• •тримайте однакові відступи між модулями;
• •якщо потрібні дві колонки (наприклад, обкладинка й опис книжки), продумайте, як вони стануть однією на телефоні.

Крок 3

Шрифти, кольори й темна тема

Кастомні веб-шрифти в пошті працюють погано: за оцінкою Can I email, правило @font-face підтримує лише меншість поштових клієнтів. Тому або використовуйте системні шрифти, або задавайте веб-шрифт із запасним системним, і перевіряйте, як лист виглядає з запасним. Медіазапит для темної теми (prefers-color-scheme), за даними Can I email, теж підтримує лише частина поштових клієнтів, тож перевіряйте лист і в темній темі.

• •основний текст — достатньо великий, щоб читатися на телефоні без збільшення;
• •контраст: для звичайного тексту WCAG (рівень AA) вимагає співвідношення щонайменше 4.5:1;
• •логотип на прозорому фоні перевірте і на білому, і на темному тлі: темний логотип може «зникнути» в темній темі.

💡 Зробіть у макеті два варіанти листа — світлий і темний — і подивіться, чи не губиться щось важливе. Це швидше, ніж ловити проблему після відправки.

Крок 4

Зображення, кнопки й доступність

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

• •кожному змістовному зображенню — короткий alt-текст: «Обкладинка книжки ...», а не «image1»;
• •кнопка — текстова, великого розміру, щоб у неї було легко влучити пальцем;
• •текст кнопки описує дію: «Зареєструватися на зустріч», а не «Натисніть тут»;
• •стискайте зображення: великі файли довго вантажаться на мобільному інтернеті.

Крок 5

Футер, тест і фідбек

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

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

💡 Для портфоліо покажіть не лише фінальний лист, а й обмеження: ширину, запасні шрифти, вигляд у темній темі й без зображень. Це відрізняє email-дизайн від «гарної картинки».