Професійна верстка HTML Email для email-розсилок

Верстка email-розсилки (HTML Email)

Ми забезпечуємо верстку HTML-листів для email-розсилок, які гарантовано відображаються в 10+ поштових клієнтах. Email верстка, таблична верстка, інлайнові стилі, Outlook хаки та тестування листів — наші спеціальності. Ми використовуємо кроссплатформенну верстку, адаптивну верстку листів та спам-тестування. Наша команда має 10+ років досвіду у верстці HTML Email. Ваш лист не потрапить у спам і виглядатиме ідеально на будь-якому пристрої.

Як MJML прискорює верстку?

MJML кращий за ручну верстку в 3 рази за швидкістю розробки. Використання MJML дозволяє заощадити $150–300 на проекті. Наприклад, вартість верстки одного шаблону становить $200–500, а економія при використанні MJML — до $300.

Як вирішуємо проблеми email-верстки

Проблема: несумісність з Outlook

Outlook 2007–2021 використовує Word для рендерингу (Microsoft Outlook), що ламає навіть прості CSS-правила. Ми застосовуємо умовні коментарі та VML для кнопок. Приклад:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.wikipedia.org"
  style="height:44px;width:200px;" arcsize="10%" fillcolor="#2563eb">
  <v:textbox inset="0,0,0,0">
<center style="color:#ffffff;font-size:16px;">Перейти</center>
</v:textbox></v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://www.wikipedia.org" style="...">Перейти</a>
<!--<![endif]-->

Проблема: спам-фільтри

Листи часто потрапляють у спам через важкий HTML, невірні заголовки або підозрілі посилання. Ми тестуємо кожен шаблон через Mail Tester та SpamAssassin. Перевіряємо заголовки MIME та кодування base64. Спам-тестування проводиться для кожного шаблону. Коригуємо код для проходження фільтрів. Додатково перевіряємо співвідношення тексту та зображень, уникаємо надмірного використання одних і тих самих посилань. 98% шаблонів проходять спам-фільтри після нашої оптимізації.

Як тестувати email у різних клієнтах та забезпечити темну тему

Сучасні поштові клієнти (Gmail, Apple Mail) підтримують темну тему. Для коректного відображення ми додаємо медіа-запит @media (prefers-color-scheme: dark) та інвертуємо кольори фону і тексту, замінюючи зображення на темні версії. Також використовуємо meta-тег <meta name="color-scheme" content="light dark"> та <meta name="supported-color-schemes" content="light dark">. Використовуємо UTF-8 кодування та MIME-типи. Це частина адаптивної верстки листів.

Ми використовуємо сервіси Litmus та Email on Acid для перевірки відображення на 50+ клієнтах. Кожен шаблон проходить перевірку на спам за стандартами SpamAssassin. Ручне тестування — на реальних акаунтах Gmail, Outlook, Apple Mail, Яндекс та Mail.ru. Регулярне тестування листів допомагає виявити проблеми. Відкриваність листів зростає на 25% після нашої верстки.

Інструменти: MJML та ручна верстка

Для прискорення розробки ми використовуємо препроцесори та фреймворки. Нижче порівняння популярних інструментів:

Ми найчастіше використовуємо MJML для базових шаблонів та ручну верстку для складних макетів. MJML дозволяє верстати у 3 рази швидше, ніж ручна верстка, що робить його кращим вибором. Використання MJML збільшує продуктивність у 3-4 рази порівняно з ручним написанням таблиць. MJML — це препроцесор, який скорочує час розробки в 3 рази.

Скільки коштує верстка email?

Вартість верстки одного шаблону починається від $200, а використання MJML дозволяє заощадити $150–300. MJML кращий за ручну верстку в 3 рази за швидкістю, що дозволяє зменшити витрати та прискорити запуск кампаній. Ми гарантуємо, що лист буде коректно відображатися в 95% клієнтів, а при виявленні помилок безкоштовно виправимо. Економія до $300 при використанні MJML.

Наші переваги

Ми верстаємо email більше 10 років. За цей час розробили більше 200 шаблонів для інтернет-магазинів, лендінгів та корпоративних розсилок. Середня вартість верстки одного шаблону становить $200–500, а використання MJML дозволяє заощадити до 70% часу, що еквівалентно $150–300 на проекті. Гарантуємо кроссплатформенну верстку та коректне відображення в 95% клієнтів.

Процес роботи

1. Аналіз макету – узгоджуємо вимоги, перевіряємо складні елементи.
2. Проектування структури – обираємо підхід (таблиці або MJML).
3. Верстка – створюємо HTML з інлайновими стилями, додаємо Outlook-хаки.
4. Тестування – прогін через Litmus та спам-тестери.
5. Деплой – передаємо готовий код, інструкцію по вставці в CRM.

Результат та строки

Що входить у результат

• Готовий HTML-файл з інлайновими стилями.
• Темна версія (dark mode) при необхідності.
• Інструкція по вставці в SendPulse, UniSender, MailChimp.
• Гарантія сумісності протягом 6 місяців.

Строки

Верстка одного шаблону (дизайн надано, desktop+mobile+темна тема): 1–2 робочі дні (8-16 годин). Тестування в 10+ клієнтах: ще 1 день. Повний цикл під ключ — до 4 днів.

Типові помилки новачків

Оцінимо ваш проект безкоштовно. Зв'яжіться з нами, і ми надішлемо приклади наших робіт. Замовте верстку — отримайте безкоштовне тестування в Litmus.

Інтеграція email розсилок: чому вона часто ламається?

Ми стикалися з тим, що тригерний лист через 10 хвилин після реєстрації конвертує в 4–5 разів краще, ніж той самий лист через 24 години. Це не маркетинговий міф — це механіка: поки користувач теплий, поки пам'ятає контекст. Але більшість інтеграцій з розсильниками зроблені так: форма сабмітиться → синхронний HTTP-запит до API → якщо API гальмує, користувач чекає 3 секунди → лист йде або не йде, ніхто не знає.

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

Провайдери та їх API

Unisender — російський провайдер, популярний у сегменті SMB. REST API, простий. Додавання контакту: importContacts, відправка транзакційного листа: sendEmail. Важливо: для транзакційних листів (підтвердження замовлення, скидання пароля) Unisender Go — окремий сервіс з іншим API та окремою ціною. Змішувати масові розсилки та транзакційні в одному потоці — погана ідея для репутації домену.

SendPulse — надає email, SMS, web push, Viber, Telegram-боти через єдиний API. Для проєктів, де потрібен омніканал, це зручно. Automation 360 — візуальний конструктор ланцюжків, можна запустити автоматизацію через API event. SDK для PHP (sendpulse/rest-api-php-sdk) підтримується, але оновлюється нерегулярно — краще використовувати напряму через Guzzle.

Mailchimp — вибір для міжнародної аудиторії та маркетингових команд, звиклих до екосистеми Mailchimp. Transactional email — через Mandrill (дочірній сервіс). Marketing API v3 для управління списками, тегами, кампаніями. Webhook для подій: відкриття, клік, відписка, bounce.

SMS. Для Росії: СМСЦ, МТС Exolve, Devino Telecom, SMS Aero. API у всіх схожий: метод send, параметри phone, message, sender (ім'я відправника — потрібно реєструвати окремо у оператора). Один нюанс: ім'я відправника має бути зареєстровано через агрегатора з договором — без цього SMS не відправляться на мережі МТС/МегаФон/Білайн.

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

Розділяємо транзакційні та маркетингові потоки

Транзакційні листи (підтвердження замовлення, скидання пароля, статус доставки) — через окремий домен-відправник або субдомен tx.example.com. Маркетингові розсилки — через mail.example.com або news.example.com. Якщо маркетингова розсилка отримає багато скарг на спам, це не повинно зачепити репутацію транзакційного потоку. Згідно з документацією SendGrid, транзакційні повідомлення слід відправляти через виділений IP-пул для запобігання перехресному впливу.

Черга та retry

Будь-який виклик до email API — через чергу (Laravel Queue, Bull, Celery). Якщо Unisender повернув 503 — задача йде в retry через 5 хвилин, потім 15, потім 60. Після 5 невдалих спроб — у dead letter queue з алертом. Користувач при цьому вже отримав свій 200 OK і не знає про проблему. Завдяки цьому підходу bounce rate на проєктах знижується до 0.5%.

Приклад job для Laravel:

public function handle(): void
{
    try {
        $response = Http::post(config('services.unisender.email_url'), $this->params);
        if ($response->failed()) {
            $this->release(300); // retry через 5 хв
        }
    } catch (\Throwable $e) {
        $this->release(300);
    }
}

Шаблони

Зберігаємо шаблони в коді (Blade, Twig, React Email), не в інтерфейсі провайдера. Причини: версіонування через Git, preview у браузері без відправки, можливість тестування. Для складних шаблонів з динамічним контентом — react-email з експортом в HTML через @react-email/render.

Валідація та згоди

Перед додаванням контакту до списку — double opt-in (лист з підтвердженням). Зберігати факт підтвердження з timestamp у своїй БД. При відписці — синхронно відписуємо і у провайдера, і в своїй базі. Ігнорувати webhook відписки — прямий шлях до блокування акаунта у провайдера. Всі процеси відповідають ФЗ-152 про персональні дані.

Моніторинг доставності

Підключаємо webhook від провайдера на події bounce (жорсткий і м'який), spam_complaint, unsubscribe. Жорсткий bounce — негайно позначаємо email як невалідний у своїй БД, більше не відправляємо. М'який bounce 3 рази поспіль — те саме. Метрики: open rate, click rate, bounce rate, unsubscribe rate — дивимося не рідше разу на тиждень. Наші сертифіковані інженери налаштовують алерти в Grafana/Prometheus.

Чому важливо розділяти потоки?

Якщо відправити маркетингову розсилку з того ж домену, що й транзакційні листи, отримавши скарги на спам, ви ризикуєте заблокувати домен — і користувачі перестануть отримувати навіть підтвердження замовлень. SPF, DKIM, DMARC (Wikipedia SPF, Wikipedia DKIM) повинні бути налаштовані окремо для кожного потоку. Ми використовуємо субдомени з різними DNS-записами.

Обсяг робіт з інтеграції

• Аудит поточних потоків комунікації та репутації домену (SPF, DKIM, DMARC)
• Вибір провайдера та схеми: транзакційний vs маркетинговий трафік
• Налаштування DNS-записів SPF, DKIM, DMARC (Wikipedia DMARC)
• Розробка шаблонів листів (HTML + динамічний контент)
• Інтеграція з бекендом через черги та API
• Налаштування webhook для доставності та скарг
• Документація з експлуатації та навчання команди
• Гарантія доставності та підтримка після запуску

Терміни та вартість

Вартість розраховується індивідуально після аудиту. Ми працюємо під ключ: від аналізу до моніторингу в продакшені. Отримайте консультацію інженера — оцінимо проєкт безкоштовно та скажемо точні терміни. Досвід більше 7 років в інтеграції поштових сервісів, реалізовано 50+ проєктів. Замовте безкоштовний аудит поточної інтеграції — отримайте звіт з рекомендаціями.