Уявіть: ви запускаєте промо-кампанію, лист іде 50 000 підписникам — а в Outlook він відображається білим прямокутником. Або в Gmail обрізається після першого екрана. Це типова ситуація, коли email-шаблон зверстаний без урахування обмежень поштових клієнтів. Правильно зверстаний лист дає конверсію в 2–3 рази вищу, ніж шаблон, створений без тестування. За 5 років ми розробили понад 100 шаблонів листів для інтернет-магазинів, новинних видань та SaaS-продуктів — і знаємо, як обійти підводні камені кожного клієнта.
Дизайн email-розсилки — це інженерія з жорсткими обмеженнями. Outlook рендерить через Word rendering engine, Gmail лімітує 102 КБ, Apple Mail підтримує prefers-color-scheme, а інші — ні. Наш досвід показує: коректно зверстаний лист відкривається на будь-якому пристрої. Щоб уникнути проблем з відображенням, зверніться до нас на етапі проєктування. Замовте розробку шаблону — і ми підготуємо макет, який не загубиться в папці «Спам».
Нещодавно ми робили шаблон для інтернет-магазину електроніки: після заміни табличної верстки на адаптивну відкриваність зросла на 25%, а число переходів за CTA — на 40%.
Які проблеми вирішуємо?
- Outlook: Word rendering engine ламає позиціонування, ігнорує багато CSS-властивостей. Рішення — таблична верстка з інлайн-стилями, основа Outlook-верстки. Таблиця в 2-3 рази надійніша за flexbox у поштових клієнтах.
- Gmail: ліміт 102 КБ на необроблений лист. Оптимізуємо зображення через CDN, виключаємо base64, мініфікуємо код. Економія трафіку — до 30%.
- Темна тема: Apple Mail коректно перефарбовує фон і текст, Gmail — ні. Без явних правил дизайн може інвертуватися в негатив.
- Адаптивність: мобільна версія має читатися без збільшення. Використовуємо fluid таблиці та медіа-запити.
Як забезпечити сумісність з Outlook?
Базова структура листа — таблична верстка з шириною 600px, інлайн-стилями для кожного елемента. Безпечні CSS-властивості: font-family, font-size, color, background-color, padding, margin, border, width. Flexbox, grid, position: absolute не працюють у більшості клієнтів, тому їх уникаємо.
Порівняння поштових клієнтів
| Клієнт | CSS inline | Темна тема | Макс. ширина | Особливості |
|---|---|---|---|---|
| Outlook 2016-2021 | Так (Word) | Ні | 600px | Word rendering engine |
| Gmail | Так | Ні | 600px | Ліміт 102 КБ |
| Apple Mail | Так | Так | Fluid | prefers-color-scheme |
| Яндекс.Пошта | Так | Частково | 600px | Обмежена підтримка |
Які CSS-властивості безпечні?
| Безпечні | Небезпечні |
|---|---|
| font-family | flexbox |
| font-size | grid |
| color | position: absolute |
| background-color | transform |
| padding | CSS-змінні |
Чому темна тема критична?
Понад 30% користувачів вмикають темний режим на пристроях. Без медіа-запиту @media (prefers-color-scheme: dark) клієнт автоматично інвертує кольори, і ваш логотип стає невидимим. Ми додаємо явні правила:
@media (prefers-color-scheme: dark) { .email-bg { background-color: #1a1a2e !important; } .email-text { color: #e0e0e0 !important; } } Докладніше про prefers-color-scheme на MDN
Preheader — прихований текст, що підвищує відкриваність
Preheader — прихований текст, який відображається у списку листів поруч із темою. Він збільшує відкриваність на 15–20%. Задається через display:none на самому початку body.
Склад робіт
- Дизайн шаблону листа в Figma (десктоп і мобільний прев'ю)
- Адаптивна верстка HTML-коду email (таблиці, інлайн-стилі)
- Тестування в 10+ поштових клієнтах (Outlook, Gmail, Apple Mail, Яндекс, Mail.ru, Rambler та ін.)
- Налаштування темної теми
- Preheader, CTA-кнопка, footer з відпискою
- Документація з використання шаблону (як вставляти зображення, змінювати текст)
- Вихідники Figma та готовий HTML-файл
Процес роботи
- Аналіз: визначаємо тип розсилки (транзакційна, новинна, промо) та цільову аудиторію.
- Дизайн: створюємо 1–2 прототипи в Figma, узгоджуємо.
- Верстка: табличний макет з інлайн-стилями, оптимізація зображень.
- Тестування: перевіряємо в Litmus або Email on Acid, фіксимо баги.
- Деплой: передаємо готовий шаблон та документацію.
Терміни та вартість
Термін розробки одного шаблону — від 2 до 5 робочих днів. Вартість розраховується індивідуально і залежить від складності дизайну, кількості ревізій та необхідних клієнтів для тестування. Зв'яжіться з нами, щоб обговорити ваш проєкт та отримати консультацію.
Замовте розробку шаблону — і ми підготуємо макет, який буде коректно відображатися у всіх поштових клієнтах.