Електронні листи, які відкривають і читають до кінця — це не магія, а результат грамотного верстки. Якщо ваші розсилки зливаються в один сірий текст або ламаються на мобільних, ви втрачаєте до 40% потенційних клієнтів ще до того, як вони дійдуть до кнопки “Купити”. У цьому керівництві розберемо, як зробити HTML-листи, які працюють на будь-якому пристрої, не потрапляють у спам і перетворюють читачів на покупців — без зайвих танців з бубном і типових помилок, через які 9 з 10 шаблонів виглядають як сторінка з 2005 року.
Що таке змістовний email-верстинг і чому він важливий
Email-верстка — це процес створення HTML-коду для електронних листів, який забезпечує коректне відображення контенту на будь-якому пристрої чи поштовому клієнті. На відміну від звичайної веб-верстки, тут діють суворіші обмеження: Outlook використовує движок Microsoft Word, Gmail обрізає CSS, а мобільні пристрої вимагають адаптивності під маленькі екрани. Якісний email-верстинг — це не просто “гарний дизайн”, а технічно грамотне рішення, яке гарантує, що ваше повідомлення дійде до одержувача саме в тому вигляді, в якому ви його задумали.
У маркетингу та комунікаціях з клієнтами email залишається одним з найефективніших каналів: за даними Litmus, кожен долар, вкладений в email-маркетинг, повертає в середньому $36. Але якщо лист “розвалюється” на мобільному або не завантажується в Outlook, ця цифра стрімко падає. Адаптивний дизайн — не примха, а необхідність: 46% користувачів відкривають листи на смартфонах, і якщо текст не читається без горизонтального скролінгу, 70% одразу видаляють повідомлення. Зручний користувацький досвід тут — це не про “красиві кнопки”, а про те, щоб кнопка “Купити” не перекривалася текстом на iPhone SE або не зникала в темній темі Gmail.
Погана верстка — це не лише втрачені продажі, а й репутаційні ризики. Лист, який “ламається” в клієнта, сприймається як недбалість бренду. Натомість якісний email-верстинг працює як тихий продавець: він не привертає уваги до себе, але робить так, щоб користувач зосередився на повідомленні, а не на тому, як його відображає пошта. Це і є змістовний підхід — коли технічні нюанси служать бізнес-цілям, а не заважають їм.
Основні відмінності email-верстки від веб-верстки
Email-верстка — це зовсім інша історія, ніж верстка для веб-сайтів. Якщо в браузері CSS підтримується майже повністю, то в поштових клієнтах ситуація нагадує дикий захід: Gmail, Outlook, Apple Mail і десятки інших програють HTML/CSS по-різному, а деякі взагалі його калічать. Наприклад, Outlook 2016–2019 використовує движок Word для рендерингу, через що флексбокси, гріди та навіть звичайні margin можуть зламатися. А Gmail обрізає стилі в <head>, тому всі CSS доводиться писати інлайн — вручну або через інструменти на кшталт Premailer.
- Обмеження HTML: забудьте про
<div>зfloat— в email основний інструмент це таблиці (<table>), бо вони стабільно відображаються навіть у найстаріших клієнтах. JavaScript? Його просто ігнорують. - CSS-підтримка: лише базовий набір властивостей працює скрізь:
font-size,color,background-color. Анімації, трансформації чиposition: fixed— це лотерея. Навітьpaddingможе зламатися в Outlook, тому верстальники часто використовують<td>з фіксованою шириною замість відступів. - Розмір і вага: багато поштових сервісів блокують зображення за замовчуванням, тому email має бути читабельним без них. Максимальна ширина листа — 600–650 пікселів, бо ширші версії не помістяться на екранах мобільних пристроїв. А вага HTML-коду не повинна перевищувати 102 КБ — інакше Gmail обріже лист і додасть посилання “Переглянути весь лист”.
Тестування — це половина роботи. Інструменти на кшталт Litmus чи Email on Acid покажуть, як лист виглядатиме в 90+ клієнтах, але навіть вони не гарантують ідеального результату. Тому верстальники часто вдаються до хаків: наприклад, додають невидимі символи в комірки таблиць, щоб Outlook не стискав їх, або використовують VML (Vector Markup Language) для градієнтів, бо стандартний CSS їх не підтримує. Email-верстка — це про компроміси, терпіння і постійне тестування на реальних пристроях.
Кроки створення якісного email-шаблону
Створення якісного email-шаблону починається з чіткого планування. Спершу визнач мету листа: продаж, інформування чи залучення? Наприклад, для промо-розсилки достатньо заголовка, банера, короткого тексту з CTA та футера. Для транзакційних листів (підтвердження замовлення, відновлення паролю) структура буде іншою — тут важливі лаконічність і чітка послідовність дій. Накидай макет на папері або в Figma: розбий контент на блоки, продумай ієрархію (заголовок > підзаголовок > текст > кнопка) і відстані між елементами. Пам’ятай про мобільні пристрої — 60% користувачів відкривають листи на смартфонах, тож ширина шаблону не повинна перевищувати 600-640 пікселів.
Далі — верстка з нуля. Використовуй таблиці (так, саме таблиці — вони найкраще підтримуються поштовими клієнтами) замість div-ів. Вкладай таблиці одна в одну для складних макетів, а для відступів застосовуй атрибути cellpadding і cellspacing, а не margin/padding — останні можуть зламатися в Outlook. Шрифти підключай через @font-face або використовуй web-safe варіанти (Arial, Verdana, Georgia), бо не всі клієнти підтримують кастомні шрифти. Зображення вставляй з атрибутом alt і завжди прописуй ширину/висоту, щоб уникнути “розвалювання” макета, якщо картинки не завантажаться. Для кнопок використовуй таблиці з background-color і padding — це надійніше, ніж CSS-властивості.
Оптимізація коду — фінальний етап, який багато хто пропускає. Перевір шаблон у Email on Acid або Litmus: ці сервіси покажуть, як лист відображається в 70+ клієнтах, від Gmail до старого Outlook. Видали зайві коментарі, мініфікуй CSS (вбудований у HTML, а не в окремий файл — зовнішні стилі ігноруються), переконайся, що всі посилання працюють і мають UTM-мітки. Зменш розмір зображень до 100-150 КБ (використовуй формат WebP для сучасних клієнтів, JPEG — для решти) і додай fallback на випадок блокування картинок. Насамкінець протестуй відправку на реальні адреси — іноді навіть дрібні помилки (наприклад, зайвий пробіл у тезі <a>) можуть призвести до потрапляння листа в спам.
Вибір інструментів для email-верстки
Вибір інструментів для email-верстки залежить від завдань, бюджету та рівня технічної підготовки. Найпопулярніші редактори — це Mailchimp Builder (зручний drag-and-drop, але обмежений у кастомізації), Stripo (підтримує AMP-емейли, має бібліотеку готових блоків, проте платна версія коштує від $15/місяць) та BeeFree (інтуїтивний інтерфейс, але без глибокої інтеграції з CRM). Для розробників підійдуть Foundation for Emails (фреймворк від ZURB з гнучкими компонентами) або MJML (синтаксис, що спрощує верстку, але вимагає знання основ HTML).
Тестування шаблонів — критичний етап. Сервіси на кшталт Litmus ($99/місяць) чи Email on Acid ($74/місяць) перевіряють відображення в 90+ клієнтах, але дорогі для стартапів. Безкоштовна альтернатива — PutsMail (простий відправник тестових листів) або BrowserStack (для перевірки на реальних пристроях). Для автоматизації підійде Premailer (очищає CSS, але не тестує рендеринг). Головне правило: жоден інструмент не замінить ручного тестування на ключових поштових клієнтах (Gmail, Outlook, Apple Mail — вони займають ~70% ринку).
- Переваги платних сервісів: швидке тестування, звіти про помилки, підтримка AMP.
- Недоліки: висока вартість, обмеження на кількість тестів у дешевих тарифах.
- Для фрілансерів: комбінуйте безкоштовні інструменти (MJML + PutsMail) з ручним тестуванням.
Особливості адаптивної email-верстки
Адаптивна email-верстка — це не просто тренд, а необхідність: понад 60% листів відкривають на мобільних пристроях, і якщо ваш шаблон “розповзається” на екрані смартфона, користувач його просто закриє. Основний інструмент тут — медіа-запити (media queries), які дозволяють змінювати стилі залежно від розміру екрана. Наприклад, для екранів шириною до 600px варто збільшити розмір шрифту з 14px до 16-18px (читабельність на мобільних критично важлива), зменшити відступи між блоками та перебудувати багатоколонковий макет в одноколонковий. Ось типовий приклад медіа-запиту для email:
@media only screen and (max-width: 600px) {.container { width: 100% !important; }— контейнер розтягується на всю ширину;.button { padding: 12px 24px !important; }— кнопки стають більшими для зручного тапу;.hide-mobile { display: none !important; }— приховує елементи, які не потрібні на мобільних.}
Але медіа-запити працюють не скрізь: деякі поштові клієнти (наприклад, Gmail на Android) їх ігнорують. Тому поряд з CSS-підходом використовуйте “мобільно-перший” дизайн: спочатку верстайте під маленькі екрани, а потім адаптуйте під десктоп. Ключові моменти: фіксована ширина контейнера (зазвичай 600-650px), гнучкі зображення (max-width: 100%), великі кнопки (мінімум 44x44px за рекомендаціями Apple) і достатні відступи між інтерактивними елементами, щоб уникнути випадкових натискань.
Тестування — це половина успіху. Використовуйте інструменти на кшталт Email on Acid або Litmus, які показують, як лист відображається в 90+ поштових клієнтах. Звертайте увагу на критичні баги: зламані макети в Outlook, невідображення фонових зображень у Gmail, проблеми з шрифтами в iOS Mail. Не покладайтеся лише на симулятори — обов’язково перевірте реальні пристрої: iPhone (різні моделі, бо версії iOS по-різному рендерять HTML), Android-смартфони (особливо Samsung з їхнім власним поштовим клієнтом) і планшети. Пам’ятайте: навіть один невідображений елемент може зіпсувати враження від листа.
Поширені помилки в email-верстці та як їх уникнути
Найчастіша помилка — неадаптивний дизайн. 58% користувачів відкривають листи на мобільних пристроях (Litmus, 2023), а фіксована ширина в 600px ламає верстку на екранах менше 375px. Виходьте з мобільного першого підходу: використовуйте fluid-верстку з max-width: 600px і min-width: 320px, а для колонок — таблиці з атрибутом dir=”rtl” для коректного відображення в Outlook. Забудьте про <div> — вони не підтримуються в Gmail і Yahoo, замінюйте на <table> навіть для простих блоків.
Зображення — друга болюча точка. 39% email-клієнтів блокують картинки за замовчуванням (HubSpot), тому завжди додавайте атрибут alt з описом і кольоровим фоном (наприклад, style=”background: #f5f5f5;”). Оптимізуйте зображення: JPEG для фотографій (якість 70-80%), PNG-8 для графіки з прозорістю, вага не більше 100-150 КБ на файл. Використовуйте srcset для ретіни: <img src=”image.jpg” srcset=”[email protected] 2x”>. І ніколи не вставляйте текст у зображення — його не прочитають скрінрідери, а Gmail обріже картинку до 600px.
- Проблеми з шрифтами: Outlook підтримує тільки системні шрифти (Arial, Times New Roman), а Gmail ігнорує @font-face. Виходьте з fallback-стеку: font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif. Тестуйте розмір шрифту — менше 14px на мобільних пристроях читати важко, а більше 16px на десктопі виглядає крикливо.
- Баги в Outlook: Він не підтримує background-image, тому для фонових зображень використовуйте VML (Vector Markup Language) або замінюйте на кольорові блоки. Також Outlook додає пробіли між таблицями — лікується додаванням style=”display: block; font-size: 0; line-height: 0;” до <td>.
- Проблеми з кнопками: Не використовуйте <button> — він не працює в 80% клієнтів. Замість цього верстайте кнопки як таблиці з border-radius і padding. Для коректного відображення в Outlook додайте mso-padding-alt: 0; до стилів.
Нарешті, тестуйте. Використовуйте Litmus або Email on Acid для перевірки на 90+ клієнтах, але не забувайте про реальні пристрої — особливо iPhone (iOS Mail має баги з line-height) і Gmail (обрізає листи після 102 КБ). Завжди додавайте посилання “Переглянути в браузері” — це врятує, якщо верстка зламається. І пам’ятайте: email-верстка — це не про ідеальний код, а про максимальну сумісність з мінімальними жертвами.
Тестування та оптимізація email-шаблонів
Тестування email-шаблонів — це не формальність, а необхідність, якщо хочете, щоб ваше повідомлення дійшло до одержувача саме так, як задумано. Почніть з перевірки відображення: використовуйте інструменти на кшталт Litmus або Email on Acid, які покажуть, як шаблон виглядає в різних клієнтах (Gmail, Outlook, Apple Mail) і на пристроях (десктоп, мобільні, планшети). Зверніть увагу на дрібниці: чи не з’їхали блоки, чи коректно відображаються шрифти, чи не обрізаються зображення. Наприклад, Outlook 2016 ігнорує max-width, тому без фіксованої ширини таблиць шаблон може “розповзтися” на весь екран. Перевірте також темний режим — багато клієнтів автоматично інвертують кольори, і ваш білий текст на чорному тлі може стати нечитабельним.
Оптимізація швидкості завантаження — це про те, щоб користувач не закрив лист, поки він “думає”. Зменште розмір зображень: стисніть їх до 72 dpi (для екранів цього достатньо) і використовуйте формати WebP або AVIF замість JPEG/PNG — вони важать на 30-50% менше при тій самій якості. Замініть фонові зображення на CSS-градієнти, де це можливо. Обмежте кількість зовнішніх скриптів: наприклад, соціальні кнопки часто тягнуть за собою десятки кілобайт коду, які блокують рендеринг. Якщо без них не обійтися, завантажуйте їх асинхронно або після основного контенту. Перевірте швидкість за допомогою Google PageSpeed Insights (так, він працює і для email) — ідеальний час завантаження не повинен перевищувати 2-3 секунди.
Аналітика допоможе зрозуміти, що працює, а що — ні. Вбудовуйте UTM-мітки в посилання, щоб відстежувати трафік з кожного листа в Google Analytics. Стежте за метриками: відкриття (чи приваблює тема?), кліки (чи ефективний CTA?), відмови (чи не потрапляєте в спам?). Наприклад, якщо відкривають 25% листів, а клікають лише 2%, проблема може бути в незрозумілому тексті або слабкому заклику до дії. Проводьте A/B-тести: змінюйте один елемент за раз (тему, колір кнопки, час відправки) і порівнюйте результати. Інструменти на кшталт Mailchimp або HubSpot автоматизують цей процес — вони покажуть, яка версія виграла, навіть якщо різниця в конверсії становить усього 0,5%.
- Чекліст для тестування: перевірка на спам (SpamAssassin), коректність посилань, альтернативний текст для зображень, адаптивність під мобільні.
- Лайфхак: відправте тестовий лист на реальні акаунти (не тільки на віртуальні тестери) — так побачите, як лист виглядає “в дикій природі”.
- Цифра: листи з персоналізованою темою відкривають на 26% частіше (дослідження Campaign Monitor).
Висновки: як створити ідеальний email-дизайн
Ідеальний email-дизайн — це не про красиві картинки, а про те, щоб повідомлення дочитали до кінця й натиснули кнопку. Нагадаємо головне: мобільна адаптація — не опція, а обов’язок (60% листів відкривають на смартфонах), а одноколонковий макет з шириною 600–640 пікселів працює найкраще. Використовуйте контрастні кольори для CTA (червоний або зелений збільшують конверсію на 21%), але не більше двох-трьох акцентних відтінків. Шрифт — не менше 14 пікселів для тексту, 22+ для заголовків, і тільки веб-безпечні (Arial, Helvetica, Georgia). Зображення — з атрибутом alt, щоб у разі блокування користувач зрозумів, про що йдеться. Тестуйте рендеринг у різних клієнтах (Litmus чи Email on Acid покажуть, де ламається верстка), і не забувайте про темну тему — 30% користувачів її вмикають. Майбутнє email-маркетингу — за інтерактивністю: анімовані кнопки, каруселі, вбудовані форми зворотного зв’язку. Але пам’ятайте: навіть найкрутіший дизайн провалиться, якщо немає чіткого меседжа та одного головного заклику до дії. Починайте з мокапу на папері, а не в редакторі — так ви уникнете зайвих правок і збережете нерви.
- Перевіряйте верстку на реальних пристроях — симулятори не покажуть всіх нюансів.
- Використовуйте інструменти типу PutsMail для швидкого тестування без відправки.
- Залишайте 40–50% простору під текст — зображення часто блокуються.
- Для складних макетів робіть fallback на табличну верстку — вона підтримується всіма клієнтами.
- Аналізуйте метрики: якщо CTR нижче 2%, переробляйте дизайн або копірайт.
Андрій Красовський — програміст і дата-сайєнтист з досвідом у створенні складних автоматизованих систем на базі Python, Google Colab та n8n. Його експертиза охоплює побудову SEO-екосистем, інтеграцію API (Ahrefs, Google Ads, Search Console) та побудову пайплайнів для контенту. Андрій поєднує технічну точність із підприємницьким баченням, допомагаючи створювати рішення, що працюють на результат.