Верстка email розсилок: повний гайд для 2026 року

Верстка email-розсилок залишається однією з найспецифічніших задач у digital-маркетингу. Навіть у 2026 році поштові клієнти обробляють HTML інакше, ніж браузери, і ігнорують більшість сучасних CSS-властивостей. Через це лист, який ідеально виглядає в Figma, може роз’їхатися в Outlook або Gmail на Android.

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

Окрему увагу приділено трендам 2026 року: темному режиму, доступності та тому, коли варто відмовитися від ручної верстки на користь конструкторів або фахівця.

Чому верстка email досі живе за правилами 2000-х

Головна причина — рендеринг. Outlook для Windows досі використовує рушій Microsoft Word. Gmail на iOS і Android частково інвертує кольори в темній темі, а Яндекс.Пошта довгий час майже не підтримувала медіа-запити. Тому класичні інструменти веб-верстки — flexbox, grid, зовнішні стилі — або не працюють, або працюють нестабільно.

На практиці це означає три обов’язкові обмеження. Перше — таблична структура. Лист будується як набір вкладених таблиць з атрибутами width, cellpadding, cellspacing і border. Друге — інлайнові стилі. Критичні властивості (колір, розмір шрифту, відступи, фон) прописуються безпосередньо в тегах. Третє — обмежена ширина. Оптимальною залишається 600 пікселів для десктопної версії. Ширше — з’являється горизонтальний скрол або сильне стиснення на мобільних.

Додатково варто враховувати вагу листа. Gmail обрізає повідомлення понад приблизно 102 КБ і показує посилання «Показати повністю». Більшість сервісів рекомендують тримати HTML у межах 80–100 КБ. З практики видно, що листи з надмірною кількістю вкладених таблиць і дубльованими стилями часто перевищують цей поріг навіть при скромному дизайні.

Основи табличної верстки: як збудувати надійний каркас

Базова структура майже завжди однакова. Зовнішня таблиця на 100 % ширини задає фон і центрує контент. Внутрішня таблиця фіксованої ширини 600 пікселів містить увесь контент. Кожен логічний блок (шапка, основний текст, кнопка, футер) — окремий рядок або вкладена таблиця.

Типовий каркас виглядає так:

• зовнішня таблиця role=”presentation” з background-color;
• комірка з align=”center”;
• внутрішня таблиця width=”600″ (або max-width через медіа-запити);
• рядки для логотипа, заголовка, тексту, CTA і футера.

Важливі атрибути, які часто забувають: cellpadding=”0″, cellspacing=”0″, border=”0″ і border-collapse: collapse. Без них Outlook додає зайві відступи. Для зображень обов’язкові атрибути width і height, а також style=”display: block;”, інакше з’являються прозорі щілини.

Шрифти варто обирати лише з системного стеку: Arial, Helvetica, Georgia, Verdana, Tahoma. Нестандартні шрифти або підключаються через @import (що багато клієнтів ігнорують), або замінюються на fallback. Кольори краще задавати в hex і дублювати через bgcolor там, де це критично для Outlook.

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

Адаптивність і mobile-first підхід на практиці

Більше половини відкриттів відбувається з мобільних пристроїв. Тому сучасна верстка будується за принципом mobile-first або принаймні з обов’язковою адаптацією. Основний інструмент — медіа-запити в блоці у . Найчастіше використовують max-width: 600px або 480px.

Типові прийоми:

• колонки перетворюються на 100 % ширини і стають один під одним;
• зображення отримують max-width: 100 % і height: auto;
• кнопки збільшуються до зручного для пальця розміру (мінімум 44×44 пікселі);
• шрифти основного тексту тримають на рівні 16 px, заголовки — 22–28 px.

Не всі клієнти підтримують медіа-запити. Яндекс.Пошта довгий час була одним із найпроблемніших. Тому надійніше робити «гібридну» верстку: таблиці з фіксованою шириною + fluid-елементи (width=”100%”) + медіа-запити як покращення. У багатьох випадках одноколонковий макет на всіх екранах виявляється стабільнішим, ніж складні багатоколонкові рішення.

З практики: якщо лист містить каталог товарів у три колонки, на мобільному їх краще складати вертикально і збільшувати кнопки «Купити». Інакше CTR падає через незручність.

Підводні камені поштових клієнтів: Outlook, Gmail та інші

Найбільше сюрпризів дає Outlook. Він не підтримує max-width, border-radius, багато padding-властивостей і фонові зображення без VML. Рішення — умовні коментарі

Конструктори vs ручна HTML-верстка: порівняння підходів

Блочні конструктори (Unisender, Stripo, EmailMaker, Sendsay та інші) дозволяють зібрати лист за годину без знання коду. Вони автоматично генерують табличну структуру, додають адаптивність і часто мають готові модулі. Для більшості маркетингових розсилок цього достатньо.

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

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

Джерело: узагальнення практик сервісів Unisender, Stripo та Email on Acid станом на 2025–2026 роки.

Темний режим, доступність і тренди 2026 року

У 2026 році темний режим став стандартом очікування. Більше половини користувачів смартфонів тримають його увімкненим. Тому в додають meta name=”color-scheme” content=”light dark” і підтримку prefers-color-scheme. Кольори фону і тексту задають парами — світлий і темний варіант з достатнім контрастом (мінімум 4.5:1 за WCAG).

Доступність досі залишається слабким місцем більшості розсилок. Згідно з дослідженнями Email Markup Consortium, майже всі листи мають критичні помилки: відсутність lang і dir атрибутів, поганий контраст, відсутність alt-текстів. Для українських листів обов’язково вказувати lang=”uk” і перевіряти, як читають скрінрідери кнопки і заголовки.

Серед інших трендів — мінімалізм з одним чітким CTA, модульність шаблонів і використання AI-асистентів у конструкторах для швидкого наповнення. AMP-листи залишаються нішевим рішенням: вони працюють лише в Gmail і Yahoo і вимагають окремого fallback.

Зображення краще стискати до розумних розмірів і завжди додавати змістовний alt. Співвідношення тексту до зображень варто тримати ближче до 60/40 або вище, інакше зростає ризик потрапляння в спам.

Чек-лист тестування та що робити, якщо верстка «поїхала»

Перед відправкою обов’язково перевіряйте:

1. Відображення в Outlook (десктоп і веб), Gmail (веб, iOS, Android), Apple Mail, Яндекс.Пошта та Mail.ru.
2. Темну і світлу тему.
3. Мобільну ширину 320–375 пікселів.
4. Вагу HTML і загальний розмір з зображеннями.
5. Наявність прехедера, коректних посилань і кнопки відписки.
6. Alt-тексти і контраст.

Якщо лист роз’їхався в Outlook — перевірте наявність умовних коментарів і атрибутів width. Якщо з’явилися білі смужки — подивіться на padding і line-height. Якщо зображення не видно в темній темі — замініть їх на варіанти з кращим контрастом або додайте фоновий колір комірки.

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

Коли варто звернутися до фахівця

Ручна верстка або глибоке доопрацювання потрібні, якщо:

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

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

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