Профессиональная вёрстка HTML Email для email-рассылок

Вёрстка email-рассылки (HTML Email)

Мы обеспечиваем вёрстку HTML-писем для email-рассылок, которые гарантированно отображаются в 10+ почтовых клиентах, обеспечивая кроссплатформенную вёрстку. Ваше письмо не попадёт в спам и будет выглядеть идеально на любом устройстве. Часто клиенты сталкиваются с тем, что письмо, свёрстанное обычным способом, ломается в Outlook или неадаптивно на мобильных. Наш опыт — более 10 лет в вёрстке email — позволяет избежать этих проблем. Ошибки в вёрстке email приводят к потере клиентов — письмо либо не открывается, либо выглядит непрезентабельно. Мы гарантируем, что ваше письмо дойдёт до адресата и будет выглядеть так, как задумано.

Как решаем проблемы email-вёрстки

Проблема: несовместимость с Outlook

Outlook 2007–2021 использует Word для рендеринга, что ломает даже простые CSS-правила. Мы применяем условные комментарии и VML (Vector Markup Language) для кнопок. Пример: для круглых кнопок используем v:roundrect вместо стандартных <a> с padding.

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com"
  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://example.com" style="...">Перейти</a>
<!--<![endif]-->

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

Письма часто попадают в спам из-за тяжёлого HTML, неверных заголовков или подозрительных ссылок. Мы тестируем каждый шаблон через Mail Tester и SpamAssassin, корректируем код для прохождения фильтров. Дополнительно проверяем соотношение текста и изображений, избегаем чрезмерного использования одних и тех же ссылок.

Как обеспечить тёмную тему в 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">. Это часть адаптивной верстки писем.

Какие инструменты ускоряют вёрстку email?

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

Мы чаще всего используем MJML для базовых шаблонов и ручную вёрстку для сложных нестандартных макетов.

MJML против ручной вёрстки

Ручная вёрстка на таблицах требует 2–3 дня на сложный шаблон. MJML (препроцессор) сокращает это время в 3 раза. Наш опыт показывает, что MJML позволяет быстро генерировать кроссклиентный HTML без ручных хаков. Сравнение:

Как тестировать email в разных клиентах?

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

Почему стоит доверить вёрстку нам?

Мы вёрстаем email более 10 лет. За это время разработали более 200 шаблонов для интернет-магазинов, лендингов и корпоративных рассылок. Гарантируем, что письмо будет корректно отображаться в 95% клиентов, а при обнаружении ошибок бесплатно исправим. Получите консультацию по вашему макету — мы оценим сложность и предложим оптимальный подход.

Процесс работы

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

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

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

Сроки

Вёрстка одного шаблона (дизайн предоставлен, desktop+mobile+тёмная тема): 1–2 рабочих дня. Тестирование в 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+ проектов. Закажите бесплатный аудит текущей интеграции — получите отчёт с рекомендациями.