Чому шаблон листа з ChatGPT ламається у скриньці

Ваш шаблон листа з ChatGPT чудово виглядає у вікні чату: акуратні колонки, велика кнопка, фірмові кольори. Потім ви надсилаєте тестовий лист, і Outlook розтягує його на весь екран, Gmail відкидає стилі, а замість логотипа — порожнє місце. Знайомо? Річ не лише в ChatGPT. Claude, Gemini, Copilot та інші інструменти ШІ роблять ті самі помилки, бо причина в них спільна.

У цій статті розберемо, чому HTML-лист, створений ШІ, часто погано відображається в поштових клієнтах, пройдемося типовими помилками з прикладами коду й покажемо, як перетворити такий HTML на лист, який дійде до підписників саме таким, яким ви його задумали.

Чому так стається: ШІ вчився верстати на сайтах

Модель ШІ пише HTML так, як найчастіше його бачила. А більшість HTML в інтернеті — це сайти: мільйони сторінок, зібраних за правилами сучасного вебу, з блоками <div>, гнучкими сітками, стилями в окремому файлі та зображеннями SVG. Для браузера це правильний код. І ШІ сумлінно відтворює його у вашому листі.

Але поштовий клієнт — не браузер. Пошта живе за власними правилами, і вони на роки відстають від вебу. Класичний Outlook для Windows досі відображає листи рушієм Microsoft Word, а не браузерним, і Microsoft пообіцяла підтримувати його щонайменше до 2029 року. Gmail вирізає частину ваших стилів. GMX і WEB.DE у Німеччині, La Poste і SFR у Франції ігнорують стилі, записані окремим блоком. Тож HTML5 і CSS3, на які спирається сучасний сайт, у розсилках не працюють.

Важлива деталь: кампанія йде всім вашим підписникам одночасно. Ви не обираєте, хто відкриє її в Gmail, а хто — в Outlook. Тож якщо прийом ламається хоча б в одному великому поштовому клієнті, для пошти він не годиться. Саме цією міркою ми й міряємо помилки нижче.

Помилка 1. Div-блоки і flexbox, як на сайті

Ось як зазвичай виглядає лист, згенерований ШІ: дві картки товарів поруч у блоці шириною 600 пікселів по центру сторінки.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

Для сайту тут усе правильно. Для листа майже кожен рядок — проблема. Класичний Outlook для Windows не розуміє display: flex, тож картки стають одна під одною, а не в ряд. max-width він враховує лише в таблицях, а центрування через margin: auto не підтримує взагалі, тому лист розтягується на всю ширину вікна. Тегів <main> і <section> Outlook теж не знає, а Gmail замінює деякі з цих тегів своїми.

Як задумано

Blocks Store

Як лист прийшов в Outlook для Windows

Blocks Store

Що це означає для вас: у листі макет будують таблицями, а не блоками. Це виглядає старомодно, зате таблиці всі клієнти розуміють однаково, зокрема й Outlook зі своїм рушієм Word. Ось ті самі дві картки в поштовій верстці:

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

ШІ вміє писати такий код, якщо попросити. Але за замовчуванням обирає верстку для сайтів — ту, яку бачив частіше. Якщо вам цікаво, як листи верстають таблицями вручну і чим тут допомагають фреймворки, загляньте в наше порівняння email-фреймворків.

Помилка 2. Стилі окремим блоком, а не в тегах

Сайт тримає оформлення окремо від вмісту: стилі описують один раз у блоці <style> або в окремому файлі, а елементи посилаються на них через класи. ШІ робить так само:

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Багато поштових клієнтів просто викидають цей блок. Мобільна вебверсія Gmail, GMX, WEB.DE, La Poste і SFR не читають <style> узагалі. Застосунок Gmail ігнорує його, коли скринька не належить до облікового запису Google, — наприклад, якщо це робоча адреса. Gmail у браузері приймає стилі лише в заголовку листа, <head>, і лише до 16 КБ. Варто блоку трохи підрости — і все оформлення зникає разом. Підключення зовнішньої таблиці стилів через <link> Gmail і Outlook.com не підтримують зовсім.

Як задумано

Blocks Store

Осінній розпродаж

Знижки до 50% на всю колекцію до неділі.

До розпродажу

Як лист прийшов без блоку стилів

Blocks Store

Осінній розпродаж

Знижки до 50% на всю колекцію до неділі.

До розпродажу

Що це означає для вас: у листі кожне правило оформлення записують прямо в тегу, в атрибуті style. Такі стилі називають вбудованими, або інлайн-стилями. Коду більше, зате стилі не губляться дорогою:

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

Але не радійте цій кнопці завчасно: в Outlook для Windows вона все одно зламається. Чому — пояснимо в четвертій помилці.

Помилка 3. Зображення в SVG і base64

ШІ не може прикріпити до відповіді файл зображення, тож шукає обхідний шлях. Логотип та іконки він малює прямо в коді у форматі SVG. А якщо ви дали йому картинку, вбудовує її в HTML як base64 — довгий рядок символів замість посилання на файл:

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

У браузері працює і те, і те. У пошті — ні те, ні інше. Gmail, Outlook і Yahoo не показують SVG, намальований у коді. SVG-файл, підключений як звичайне зображення, Gmail перетворює на PNG, тож той втрачає чіткість і анімацію. Gmail і новий Outlook для Windows не показують зображення в base64: на їхньому місці лишається порожнеча.

Як задумано

Blocks Store

Осінній розпродаж

Як лист прийшов у Gmail

У base64 є й другий недолік: він роздуває лист. Зображення, записане символами, займає в коді приблизно на третину більше місця, ніж сам файл. Кілька банерів — і лист стає таким важким, що Gmail його обрізає. Докладніше — у п’ятій помилці.

Що це означає для вас: зображення для листа мають лежати на сервері у файлах PNG, JPG або GIF, а в коді — тільки посилання на них із розмірами:

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Помилка 4. Outlook для Windows бачить ваш лист очима Word

Класичний Outlook для Windows заслуговує на окрему розмову. Він відображає лист не браузером, а рушієм текстового редактора Word. Тому не розуміє багато чого, що будь-який ШІ вважає азами. Ось типовий перший екран листа від ШІ — з фоновим зображенням, заголовком поверх нього і кнопкою:

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

В Outlook усе це ламається одразу:

• Фонове зображення, задане через background-image, він не показує. Білий заголовок опиняється на білому тлі й зникає.
• Outlook для Windows, Outlook для Mac і Outlook.com не підтримують у листах тег <button>.
• padding Outlook враховує лише в клітинках таблиці. Кнопка з посилання з відступами стискається до розміру тексту.
• border-radius він не малює, тож кути виходять прямими.

Як задумано

Осінній розпродаж

Знижки до 50% до неділі

Купити зараз

Як лист прийшов в Outlook для Windows

Осінній розпродаж

Знижки до 50% до неділі

Купити зараз

Що це означає для вас: для Outlook листи верстають особливими прийомами. Кнопку збирають із клітинки таблиці з кольором тла, і така кнопка вціліє будь-де:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

Для фонового зображення потрібен окремий код на VML — застарілій мові розмітки, яку розуміє лише Outlook. Інструменти ШІ про неї майже ніколи не згадують. А маркетологу вчити її й зовсім ні до чого.

Помилка 5. Важкий лист, який Gmail обрізає

Gmail показує лист повністю, лише якщо його код важить менше ніж приблизно 102 КБ. Усе, що не вмістилося, ховається за рядком «[Повідомлення обрізано] Переглянути повне повідомлення». Рахується саме код: текст, стилі, адреси посилань і зображень. Зображення, завантажені за посиланням, до цього розміру не входять, а зображення в base64 — входять.

Інструменти ШІ багатослівні. Вони повторюють ті самі стилі на кожному елементі, додають зайві обгортки й коментарі, вбудовують зображення в код. А обрізання б’є по найважливішому: у кінці листа зазвичай стоять посилання для відписки і невидимий піксель, яким ваш поштовий сервіс рахує відкриття. Підписник, який хоче відписатися, не знайде посилання й може натиснути «Спам». А відкриття цього листа не потраплять у вашу статистику.

Що це означає для вас: стежте за вагою коду. Якщо лист важчий за 100 КБ, його треба полегшити: прибрати повтори, перенести зображення на сервер, вирізати зайве.

Помилка 6. Немає прехедера

Прехедер — це короткий текст, який скринька показує поруч із темою листа. Якщо його немає, скринька бере перший текст, який знайде вгорі листа. Зазвичай це «Переглянути в браузері», пункти меню чи підпис під логотипом. Інструменти ШІ майже ніколи не додають прехедер, бо на сайтах такого елемента немає.

Що це означає для вас: прехедер — це друга тема листа, і від нього залежить, чи відкриють лист. Його додають прихованим блоком на самому початку коду:

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

Більше про те, що робить лист вдалим, читайте в нашому посібнику з дизайну листів.

Помилка 7. Скрипти, форми й відео

На сайті звично додавати інтерактивні елементи: слайдер на JavaScript, форму підписки, відео. За звичкою ШІ додає їх і в листи. У пошті нічого з цього не працює:

• Поштові клієнти не виконують скрипти й вирізають їх, щоб захиститися від шкідливого коду. Деякі поштові сервіси навіть не дадуть зберегти лист зі скриптом.
• Gmail замінює тег <video> порожньою заглушкою, а Outlook для Windows і Yahoo його не показують. Відтворюється відео переважно в Apple Mail.
• Форми не працюють в Outlook для Windows, Yahoo на iPhone, Proton Mail і GMX, а в Outlook.com і Outlook для Mac дані не надсилаються.

Що це означає для вас: замість відео в листі ставлять обкладинку з посиланням на нього, а замість форми — кнопку, яка веде на сторінку з формою. Якщо інтерактивність справді потрібна, для неї є особливі прийоми — ми розбирали їх у статті про анімовані листи.

Як попросити ШІ зверстати лист правильно

Багатьох із цих помилок можна уникнути, якщо одразу пояснити ШІ правила поштової верстки. Ось промпт, який можна додати до вашого запиту:

Зверстай HTML-лист для email-розсилки, а не вебсторінку. Для макета використовуй лише таблиці з role=“presentation”, без сіток на div, flex чи grid. Ширина листа — 600 пікселів. Усі стилі пиши прямо в атрибуті style, без блоку style і без класів. Не використовуй теги header, main, section, footer і button. Зображення — лише PNG або JPG з повною адресою, шириною, висотою та alt, без SVG і без base64. Кнопки роби з клітинки таблиці з кольором тла. Жодного JavaScript, форм чи відео. На початку листа додай прихований прехедер. Код має бути меншим за 100 KB.

З таким промптом результат помітно кращий. Але чесно скажімо, чого він не розв’язує.

По-перше, у довгому листі ШІ на півдорозі починає забувати правила. Перші блоки зверстані таблицями, а у футері знову з’являються <div> і flexbox. По-друге, ШІ не бачить, як лист виглядає у скриньці. Він упевнено напише «цей код сумісний з усіма поштовими клієнтами», але перевірити цього не може: він ніколи не відкривав лист в Outlook. І по-третє, ви теж не можете перевірити код самі, хіба що верстаєте листи професійно. Для цього потрібен набір тестових скриньок у різних клієнтах або платний сервіс тестування.

ШІ чудово допомагає спланувати структуру листа й написати тексти — про це наша стаття про ШІ в email-маркетингу. А фінальну верстку надійніше довірити інструменту, який знає правила пошти.

Як перетворити верстку від ШІ на робочий лист

Саме для цього в Blocks є конвертер HTML-листів. Він бере код, який написав ШІ, і перебудовує його за правилами поштової верстки. Усе, про що ми розповіли вище, він виправляє сам: перетворює блоки й flexbox на таблиці, переносить стилі в теги, дає раду зображенням, кнопкам і Outlook.

Ось як це відбувається:

1. Вставте код листа в Blocks або завантажте файл.
2. Blocks бачить, що лист створено деінде, і пропонує його конвертувати.
3. Конвертація зазвичай триває менше хвилини.
4. Лист відкривається в редакторі — готовий до експорту у ваш поштовий сервіс.

Є й друга перевага, яку легко проґавити. Після конвертації лист — уже не стіна коду, якої страшно торкатися. Він відкривається в редакторі у вигляді блоків: заголовок, зображення, текст, кнопка. Будь-яке місце можна виправити вручну, деталь за деталлю: замінити слово, поміняти картинку, перефарбувати кнопку — без коду й без нового запиту до ШІ. А під час експорту Blocks знову видає код, який розуміють поштові клієнти.

Якщо ви не певні, що HTML-лист узагалі вартий клопоту, порівняйте його з текстовим у нашій статті «HTML-лист чи простий текст».

Коротко

• Моделі ШІ вчилися верстати на сайтах, тому шаблон листа з ChatGPT, Claude чи Gemini зібраний як вебсторінка.
• Кампанія йде всім одночасно. Якщо прийом не працює хоча б в одному великому поштовому клієнті, для пошти він не годиться.
• Головні помилки: div-блоки й flexbox замість таблиць, окремий блок стилів замість вбудованих, зображення в SVG і base64, прийоми, яких не розуміє Outlook для Windows, надто важкий код, відсутній прехедер, а також скрипти, форми й відео.
• Докладний промпт допомагає, але не гарантує результату, а без тестування код не перевірити.
• Надійний шлях — пропустити верстку від ШІ через конвертер і доопрацювати деталі вручну в редакторі.