Дизайн email-розсилки: де ламається верстка в отримувача
Дизайн email-розсилки перевіряється не в браузері, а в списку вхідних. Один і той самий макет рендерять кілька різних рушіїв: десь гнучке розкладання згортається, десь колонки з'їжджають під текст, а внутрішні відступи додаються до зовнішніх і блок розпирає за шириною.
Тому верстка листа будується на таблицях із явно заданою шириною та інлайн-стилями, а не на каскадних таблицях і медіазапитах, які підтримуються не скрізь.
Темна тема ламає контраст: клієнт інвертує фон і кольори автоматично, і кнопка з темним текстом на темному фоні стає нечитабельною. Півтони, напівпрозорі логотипи та картинки з білою підкладкою в інверсії виглядають як латки.
Ми проєктуємо шаблон так, щоб він витримував примусову інверсію: окремі пари «фон — текст», запасний контраст і окремий набір асетів під темний режим.
Прехедер — перше, що бачить отримувач, і він же першим обрізається. У списку вхідних вміщується від 40 до 90 знаків залежно від клієнта й ширини вікна, тому службовий текст-заповнювач і порожні символи перед ним з'їдають увесь рядок. Ми верстаємо прехедер керованим: смислова фраза на початку, добір символів — у кінці.
Картинки завантажуються не завжди: частина поштових клієнтів за замовчуванням блокує зовнішні зображення, і лист перетворюється на набір порожніх рамок.
Тут працюють альтернативний текст, що несе смисл, фоновий колір блоку замість фонового зображення та текстові кнопки там, де без них втрачається сама дія.
Усі чотири класи поломок — розкладка, контраст, обрізання, недоставлені асети — відтворюються на тестовому наборі скриньок до відправлення. Нижче розбираємо, як це закривається в нашому процесі.
Модульна верстка листів: доставлюваність, кліки, відписки
Модульна верстка листа — це збірка із заздалегідь зверстаних і перевірених блоків: шапка, текстовий абзац, картка товару, кнопка, підвал з відпискою.
Кожен блок — таблична основа із вбудованими стилями й медіазапросами під вузькі екрани та темну тему, тому розмітка не розвалюється в клієнтах, які вирізають частину каскадних стилів під час рендеру.
Перед випуском кожен шаблон проганяємо через Litmus: дивимося відображення в настільних, мобільних і вебклієнтах, поведінку темної теми та те, на якому місці обрізається лист.
Так іде технічна причина потрапляння в спам — незакриті таблиці, зображення без alt, посилання без тексту, роздута вага та пошкоджені службові заголовки.
Доставлюваність розсилки зростає не від «правильних слів», а від передбачуваної розмітки: фільтри отримують коректний лист, а не набір конструкцій.
За нею підтягуються переходи з листа — модулі тримають кнопку в зоні видимості на мобільному, текст читається в темній темі без інверсії, а блоки переставляються під мету кампанії без перезбирання шаблону.
Відписки й скарги падають, коли лист виглядає рівно так, як обіцяє тема, а підвал чесно і в один клік дозволяє відмовитися.
Ми ведемо облік за трьома метриками — частка потраплянь у спам, частка переходів, частка відписок — і змінюємо модулі раніше, ніж розсилка почне втрачати аудиторію.
Режими верстки: адаптивна, гібридна, фіксована
Поштові клієнти рендерять лист по-різному: одні вирізають блок стилів у шапці, інші ігнорують частину властивостей, корпоративні збірки Outlook на Windows збирають макет рушієм текстового редактора.
Тому таблична основа залишається спільним фундаментом для всіх режимів, а відрізняються вони тим, як лист поводиться при зміні ширини екрана і як переживає вирізані стилі.
Вибір режиму — це вибір класу відмов, який ви готові прийняти. Нижче — застосовність і обмеження кожного варіанта.
| Режим | Коли підходить | Обмеження |
|---|---|---|
| Фіксована ширина | Транзакційні листи, аудиторія переважно читає з комп'ютера | На телефоні масштабується цілком: дрібний текст і кнопки, іноді горизонтальне прокручування |
| Гумова | Одноколонкові листи зі списками й картинками на всю ширину | Рядки тягнуться без межі, на широких екранах текст читається важко |
| Адаптивна з медіазапросами | Багатоколонкові макети, різне наповнення для широких і вузьких екранів | Частина клієнтів вирізає медіазапроси — залишається версія для широких екранів |
| Гібридна | Масові розсилки зі змішаною аудиторією, де важлива передбачуваність | Вкладені таблиці, обмеження на позиціювання, довше супроводжувати |
Як обираємо режим
Спочатку дивимося статистику відкриттів за поштовими клієнтами та частку мобільних — вона й визначає базовий режим.
Далі перевіряємо макет у відображенні без медіазапитів: якщо лист читається і залишається робочим, гібридна верстка дає передбачуваний результат, а адаптивна розкриває макет на вузьких екранах.
Порядок роботи: аудит шаблонів, схема, верстка, приймання
Робота йде ітераціями: спочатку розбираємо те, що вже йде підписникам, потім фіксуємо структуру листа і лише потім пишемо код. Так правки на етапі верстки не перетворюються на переробку макетів, а приймання спирається на заздалегідь узгоджені критерії.
- Аудит шаблонів. Вивантажуємо поточні листи, дивимося розмітку, вагу, де ламається адаптив, як поводиться темна тема і які клієнти спотворюють верстку. На виході — список конкретних дефектів із пріоритетом.
- Схема блоків. Збираємо модульну сітку: шапка, контентні модулі, кнопки, підвал. Уніфікуємо відступи й типографіку, щоб блоки переставлялися місцями без правки коду.
- Дизайн під обмеження розсилок. Враховуємо одноколонкову сітку, обрізання довгого листа, вимкнені зображення та збільшений шрифт — макет одразу проєктується під ці умови.
- Верстка й адаптив. Таблична структура, вбудовані стилі, медіазапроси для вузьких екранів і окремі правила для темної теми. Текстові версії та підписи до картинок — частина шаблону, а не доробка.
- Тести в клієнтах. Проганяємо листи за списком поштових програм і вебінтерфейсів: темна тема, вимкнені картинки, масштабування шрифту. Знімаємо відображення до і після правок.
- Передача шаблонів. Віддаємо вихідники, зібрані шаблони в редакторі розсилок, змінні для підстановки даних і чек-лист перед відправленням. Додаємо регламент випуску: хто і як вносить правки, щоб верстка не роз'їжджалася після першого ж оновлення.
Що залишається в проєкті: шаблони, стилі, документація
Проєкт із розсилок закривається не в момент відправлення останнього листа, а коли ваша команда випускає наступний без нас. Тому в передачу йде не набір картинок із макетом, а робочі артефакти: їх відкривають, правлять і запускають у редакторі розсилок своїми руками.
- Дизайн-система листів — сітка, типографіка, шкала відступів, палітра та стани кнопок із посиланнями в одному файлі. Новий блок збирається з готових значень, а не підбирається на око.
- Бібліотека блоків — шапка, обкладинка, товарна картка, промо-смуга, блок соцмереж і підвал. Кожен у варіантах на одну, дві та три колонки, з готовими відступами під мобільні ширини.
- Шаблони під сценарії — вітальний, транзакційний, дайджест, реактиваційний. Усередині розмічені зони для підстановки тексту та зображень, змінювати їх можна без верстки.
- Окремі стилі для темної теми — прозорі фони замість білих плашок, логотип та іконки у двох версіях. Лист залишається читабельним у клієнтах, які перефарбовують фон.
- Документація щодо шаблонів — який блок обов'язковий, де ліміти на довжину теми, прехедера й заголовка, як підставляються альтернативні тексти і що робити з фолбеком зображень.
- Регламент випуску — контрольний список перед відправленням: тестові скриньки, перевірка посилань і полів підстановки, вага листа, відписка. Узгоджений порядок замість «хтось пам'ятає».
Плюс вихідники: файли макетів, шрифти, іконки та змінні теми. Далі ви правите тексти й збираєте нові листи в межах системи — ми підключаємося, лише коли потрібен новий тип блоку або сегмент сценарію.
Кейс: доставлюваність і переходи до та після переверстки
Клієнт — роздрібна мережа з базою підписників у кілька десятків тисяч адрес. Листи збирали у візуальному редакторі: одне полотно фіксованої ширини, весь смисл винесено в картинки, темна тема не враховувалася взагалі.
У клієнтах із темним оформленням логотип зникав на чорному фоні, білі блоки різали око, а без виразного текстового шару лист частіше потрапляв у промо-вкладку і спам. Прехедер не заповнювали — у списку вхідних лист виглядав порожнім, і відкриття падали.
Що переробили
Переверстали шаблони на адаптивну табличну сітку з інлайн-стилями: блоки перебудовуються від вузьких екранів до широких, кнопки та зображення не вилазять за поля.
Темну тему закрили окремими палітрами й прозорими логотипами, додали реальний текстовий шар, alt для картинок і заповнений прехедер.
Перед кожним випуском проганяємо шаблони через Litmus: розбіжності у відображенні ловимо до відправлення, а не за скаргами підписників.
Доставлюваність і переходи до та після
Доставлюваність піднялася з 92% до 99%, частка переходів з листа — з 1,6% до 4,8%. Скарги на спам пішли з 0,3% до сотих часток відсотка, відписки скоротилися майже вдвічі. Збирання випуску займає 40 хвилин проти шести годин ручної правки.
Зібрані шаблони стали бібліотекою блоків: новий випуск збирається з готових модулів, а правка верстки більше не ламає сусідні листи.
Чим відрізняється адаптивна верстка листа від гібридної
Різниця між цими підходами не в оформленні, а в тому, що саме керує перебудовою макета. В адаптивній верстці листа сітка описана в блоці стилів і змінюється за медіазапросами: за ширини менше точки перелому колонки згортаються в одну, зменшуються відступи й кегль.
Гібридна верстка будується інакше — гумові контейнери на відсоткових ширинах, інлайн-стили та умовні таблиці, які перебудовують макет без медіазапитів.
Звідси різниця у стійкості до поштових програм. Частина клієнтів вирізає блок стилів і медіазапроси цілком, і лист приходить широкою таблицею, яку читають із горизонтальним прокручуванням.
Outlook у настільній версії — найвідоміший такий випадок, той самий ефект дає пересилання листа всередині корпоративного контуру. Гібридна схема виграє саме тут: вміст залишається читабельним, навіть коли стилі не застосувалися.
Адаптивна верстка листа виграє в іншому. Якщо макет одноколонковий, а вміст простий — підтвердження замовлення, скидання пароля, повідомлення — перебудовувати нічого, вистачає гумової ширини й охайних відступів.
Медіазапроси тоді потрібні лише на тонкі правки: розмір кегля, порядок блоків, зони натискання під палець. Таку розмітку простіше підтримувати, і важить лист менше.
Вибір підходу зводиться до трьох питань: скільки колонок у макеті, які поштові програми в базі підписників і чи є вимоги до темної теми. Робоча практика — гібридна розмітка як основа плюс адаптивні уточнення поверх неї.
Перед відправленням проганяємо шаблон через реальні клієнти, пересилання та режим без завантаження зображень — лише так видно, де макет розвалюється.
Часті технічні питання щодо верстки листів
Сумніви до старту рідко стосуються оформлення — майже всі вони про те, як лист переживе чужі поштові клієнти. Нижче — питання, які найчастіше виринають під час узгодження макета розсилки, і короткі відповіді по суті.
Як лист виглядатиме в темній темі?
Темна тема в листі — це два різні сценарії. Частина клієнтів інвертує кольори автоматично, частина поважає вказані в розмітці.
Ми задаємо фони й колір тексту явно, щоб автоматична інверсія не перетворювала світлий макет на нечитабельну пляму, і окремо перевіряємо контраст логотипа та кнопок на темному фоні.
Що побачить отримувач із вимкненими зображеннями?
Вимкнені зображення — не рідкісний збій, а звичайний режим корпоративної пошти. Тому смисл кожного блоку дублюється текстом, кнопки залишаються читабельними без картинок, а до зображень прописаний альтернативний текст. Лист зберігає смисл і в «голому» вигляді.
Навіщо вбудовані стилі, якщо є зовнішні?
Вбудовані стилі в листі залишаються основним способом оформлення: частина клієнтів вирізає зовнішні таблиці стилів і блоки в заголовку документа. Збираємо розмітку так, щоб ключові властивості стояли всередині елементів, а зовнішні працювали лише як доповнення.
Що з перенесенням старих шаблонів і правками в макеті?
Старий шаблон переносимо частинами: спочатку дивимося, що в ньому тримає логіку, а що — випадкові накладення минулих правок. Правки в макеті після узгодження можливі, але кожна змінює розмітку, тому тримаємо модульну сітку блоків — заміна одного не зачіпає сусідні.
Обговоримо задачу: аудит розсилки та план переверстки
Старт проєкту впирається не в макети, а в доступи й дані: без вихідників шаблонів і статистики аудит розсилки перетворюється на здогадки.
Тому перший крок — коротка передача матеріалів, далі ми розбираємо верстку, рахуємо, що перевикористовуване, а що переписуємо з нуля, і повертаємося з оцінкою та планом переверстки за етапами.
Що потрібно від замовника:
- Вихідники поточних листів: HTML-код шаблонів, макети, тему оформлення — щоб побачити, у що збирається верстка і які блоки можна залишити.
- Вивантаження статистики за кілька місяців: відкриття, переходи, відписки, частка мобільних — за нею видно, де розсилка втрачає читача.
- Перелік поштових сервісів і клієнтів, через які йде відправлення, — щоб заздалегідь врахувати, де найчастіше розходиться верстка.
- Фірмові вимоги: логотип, палітра, шрифти, обов'язкові блоки в листі.
- Список типів листів та їхній пріоритет: вітальний, транзакційний, дайджест, реактивація.
- Вимоги до обов'язкових правових блоків: посилання на відписку, реквізити, контактні дані.
- Точку узгодження: хто приймає макет і верстку, хто відповідає за тексти та зображення.
Якщо частини матеріалів немає, це не стоп — починаємо з того, що є, і виносимо прогалини окремим пунктом у план.
Повертаємося з оцінкою, порядком робіт за шаблонами та картою перевірок перед відправленням: що робимо першим, що пізніше і на якому етапі підключаємо темну тему й адаптив.
