Чек-лист по технической стороне email-рассылок: Outlook, preheader и другие подводные камни

Почему письма попадают в спам: SPF, DKIM и DMARC

Представьте: вы получаете письмо якобы от банка с просьбой срочно подтвердить данные карты. Как почтовый сервис понимает, что это действительно банк, а не мошенники? Для этого существует система технических записей, которые подтверждают подлинность отправителя.

Без этих настроек ваши письма с высокой вероятностью будут отправляться прямиком в папку «Спам» — даже если контент абсолютно легальный, а подписчики сами просили вас писать.

SPF: разрешаем серверам отправлять письма от вашего имени

SPF (Sender Policy Framework) — это список серверов, которым разрешено отправлять письма от имени вашего домена. Вашего домена нет в “списке” – письмо не пройдет.

Как это работает

Когда почтовый сервис получает письмо от yourcompany.ru, он проверяет: «А есть ли у этого сервера разрешение отправлять почту от имени yourcompany.ru?» Если сервера нет в SPF-записи — письмо попадет в спам или вообще отклонится.

Как настроить SPF

SPF настраивается через DNS-записи вашего домена. Вам нужно зайти в панель управления у вашего хостинг-провайдера (там, где вы регистрировали домен) и добавить TXT-запись.

Вот как это выглядит:

| v=spf1 include:_spf.mail.ru include:spf.unisender.com ~all |

Эта запись состоит из нескольких частей: версия SPF, список разрешённых серверов (например, Mail.ru для корпоративной почты и Unisender для рассылок), и правило для всех остальных серверов.

DKIM: цифровая подпись для каждого письма

Если SPF говорит «этому серверу можно доверять», то DKIM (DomainKeys Identified Mail) идёт дальше и подтверждает: «это письмо точно не изменялось по дороге».

DKIM работает как цифровая подпись. К каждому письму добавляется уникальная метка, которую можно проверить с помощью публичного ключа, размещенного в DNS. Если письмо изменили — подпись не совпадет, и почтовый сервис насторожится.

Как настроить DKIM

Обычно сервис рассылок генерирует DKIM-ключ за вас. Вам нужно только добавить его в DNS. Это выглядит как длинная текстовая запись, которую вы копируете из настроек сервиса рассылок и вставляете в панель управления доменом.

DMARC: что делать с подозрительными письмами

SPF и DKIM проверяют подлинность, но что делать, если проверка провалилась? За это отвечает DMARC (Domain-based Message Authentication, Reporting and Conformance).

DMARC — это политика, которая говорит почтовым сервисам: «Если письмо не прошло проверку SPF или DKIM, вот что с ним нужно сделать».

Три варианта политики DMARC:

• none — ничего не делать, просто собирать статистику (подходит для тестирования)
• quarantine — отправить в спам
• reject — отклонить письмо полностью

Как проверить, всё ли настроено правильно

После настройки SPF, DKIM и DMARC обязательно проверьте их работу:

1. MXToolbox — проверяет SPF, DKIM, DMARC
2. Mail-Tester — отправьте тестовое письмо и получите оценку по 10-балльной шкале
3. Отправьте письмо на свою личную почту в Gmail, Mail.ru, Яндекс и проверьте, попало ли оно в спам

Preheader: что видит пользователь до открытия письма

Вы наверняка замечали: в списке входящих писем отображается не только тема, но и небольшой текст после нее. Это и есть preheader (прехедер или предзаголовок).

Пример того, что видит пользователь в почте:

• От: YourShop
• Тема: Скидка 30% на новую коллекцию
• Preheader: Только сегодня — успейте купить до конца дня

Preheader — это ваш второй шанс убедить человека открыть письмо. Если тема зацепила внимание, preheader должен дожать и объяснить, зачем открывать.

У прехедера есть 2 типа:

• Видимый preheader отображается и в списке писем, и внутри самого письма (обычно в самом верху, перед основным контентом).
• Скрытый preheader показывается только в списке писем, но не виден при открытии. Его используют, чтобы не занимать место в письме, но при этом контролировать текст в превью.

Как добавить preheader в письмо

Для видимого preheader просто добавьте текст в самом начале письма, до основного контента, оформив его как обычный текстовый блок.

Для скрытого preheader существует специальный способ: текст добавляется в код письма, но скрывается с помощью стилей так, чтобы он показывался только в превью, но не в самом письме.

Какой длины должен быть preheader

Разные почтовые клиенты показывают разное количество символов:

Золотое правило: самое важное пишите в первых 30-40 символах — тогда оно точно отобразится везде.

Что писать в preheader: 4 рабочих приёма

1. Дополняйте тему, а не дублируйте ее

• Тема: «Скидка 30% на новую коллекцию»
• Плохой preheader: «Скидка 30% на новую коллекцию в нашем магазине»
• Хороший preheader: «Только сегодня — более 200 моделей со скидкой»

2. Создавайте срочность

• «До конца акции осталось 3 часа»
• «Последние 10 мест на вебинар»

3. Добавляйте конкретику

• «Бесплатная доставка при заказе от 2000₽»
• «Подборка из 15 книг для предпринимателей»

4. Интригуйте

• «Вы не поверите, что мы для вас приготовили!»
• «Этот секрет изменит ваш подход к email»

Что НЕ должно попадать в preheader:

• «Не отображается? Откройте в браузере»
• «Отписаться от рассылки»
• Alt-текст от логотипа
• Ссылки на соцсети

Если вы не настроите preheader, почтовый клиент автоматически подтянет туда первый текст из письма — и часто это именно служебные ссылки, которые убивают всю интригу.

Outlook и его особенности: почему у писем едет верстка

Если вы когда-либо открывали своё красиво сверстанное письмо в Outlook и видели там кашу из текста и картинок — добро пожаловать в клуб. Outlook на Windows использует движок Microsoft Word для отображения HTML, и это создает массу проблем.

Почему Outlook такой капризный

В отличие от современных браузеров и большинства почтовых клиентов, Outlook 2007–2019 на Windows рендерит HTML через Word. Да, тот самый Word, который вы используете для документов. Это значит, что многие современные возможности CSS просто не работают.

Что НЕ поддерживает Outlook:

• Flexbox и CSS Grid
• Media queries (адаптивность)
• Скругленные углы
• Тени
• Фоновые изображения в некоторых случаях
• Многие CSS-свойства для позиционирования

Главное правило верстки для Outlook

Забудьте про современные подходы к верстке. Для email-писем используется табличная верстка — как в 90-х годах. Это единственный способ гарантировать, что письмо будет выглядеть одинаково во всех почтовых клиентах, включая капризный Outlook.

Вот как выглядит базовая структура письма:

Почему табличная вёрстка:

1. Таблицы одинаково отображаются во всех почтовых клиентах
2. Outlook понимает таблицы без проблем
3. Структуру легко контролировать

Проблема высоты таблиц в Outlook

Outlook 2007/2010 имеет странную особенность: если высота таблицы превышает 1800 пикселей, появляются «разрывы» — белые полосы, разрезающие ваше письмо.

Решение: Закрывайте таблицу и открывайте новую каждые 1700-1800 пикселей. Это технически выглядит как несколько отдельных таблиц, но визуально воспринимается как единое письмо.

Изображения в Outlook: обязательно указывайте размеры

Outlook не всегда корректно определяет размер изображений, поэтому всегда прописывайте ширину и высоту напрямую в теге изображения. Также обязательно добавляйте альтернативный текст — он показывается, если картинка не загрузилась.

Важные моменты:

• Используйте блочное отображение для изображений — это убирает лишние отступы
• Всегда указывайте alt-текст
• Размеры прописывайте и в HTML-атрибутах, и в стилях

Фон в Outlook: используйте VML

Если нужен фоновый рисунок, обычный способ установки фона в Outlook не сработает. Для этого используется VML (Vector Markup Language) — специальный код, который понимает только Outlook. Выглядит это пугающе, но работает надёжно.

Тестирование в Outlook

Не у всех есть Outlook под рукой, но проверить отображение можно:

• Litmus — платный сервис, показывает письмо в 90+ клиентах
• Email on Acid — аналог Litmus, тоже платный, есть тестовый период
• Попросить коллегу с Outlook отправить скриншот

Адаптивность: письма, которые хорошо выглядят на телефоне

Более 60% писем открывают на мобильных устройствах. Если ваше письмо не адаптировано под смартфон — вы теряете больше половины аудитории.

Два подхода к адаптивной вёрстке

1. Резиновая верстка (fluid layout)

Размеры задаются в процентах, письмо само подстраивается под ширину экрана. Ключевой момент: задать максимальную ширину на десктопе (обычно 600px) и разрешить письму растягиваться на 100% ширины на мобильных.

2. Адаптивная верстка с media queries

Media queries позволяют менять стили в зависимости от ширины экрана. Например, на мобильных можно увеличить размер шрифта, скрыть второстепенные элементы или растянуть колонки на всю ширину.

Проблема: Gmail долгое время не поддерживал media queries, но сейчас уже поддерживает. Outlook на десктопе — нет.

Шрифты на мобильных: размер имеет значение

На маленьких экранах мелкий текст нечитаем. Минимальный размер шрифта для мобильных — 14-16px для основного текста. Также важен межстрочный интервал — рекомендуется 1.5-1.6 для комфортного чтения.

Кнопки: делайте их большими для мобильных

На смартфоне сложно попасть пальцем по маленькой кнопке. Минимальный размер кликабельного элемента — 44x44 пикселя. Кнопки должны быть оформлены как таблицы с достаточным внутренним отступом, чтобы по ним было удобно кликать.

Изображения: делайте их адаптивными

Изображения должны масштабироваться под ширину экрана. Для этого задаётся максимальная ширина 100% и автоматическая высота, чтобы сохранить пропорции.

Частые технические ошибки и как их избежать

Ошибка №1: Забыли про alt-текст для изображений

Многие почтовые клиенты по умолчанию не загружают картинки. Если у изображения нет alt-текста, пользователь увидит пустое место. Всегда добавляйте описательный альтернативный текст, который объясняет, что на изображении.

Ошибка №2: Внешние CSS-файлы

Многие почтовые клиенты игнорируют внешние стили. Все стили должны быть инлайновыми — прописанными непосредственно в атрибуте style каждого элемента.

Есть инструменты, которые автоматически переводят CSS в инлайн-стили:

• Premailer
• CSS Inliner Tool

Ошибка №3: Стоп-слова в тексте письма

Некоторые слова и фразы повышают вероятность попадания в спам:

• «Бесплатно», «кредит», «займ»
• «100% гарантия»
• «Срочно», «немедленно»
• «Заработок без вложений»
• CAPS LOCK и множество восклицательных знаков!!!

Яндекс и Mail.ru особенно чувствительны к таким словам. Если нельзя избежать стоп-слова, попробуйте переформулировать.

Ошибка №4: Слишком много картинок, мало текста

Если в письме 90% картинок и 10% текста, спам-фильтры насторожатся. Оптимальное соотношение — 60% текста, 40% изображений.

Ошибка №5: Не указали кодировку

Всегда указывайте UTF-8 в начале письма, чтобы избежать проблем с отображением русских букв и спецсимволов.

Чек-лист перед отправкой: проверьте все пункты

Перед запуском рассылки пройдитесь по этому списку:

Доставляемость:

• Настроены SPF, DKIM и DMARC
• Проверили настройки через MXToolbox
• Отправили тестовое письмо на Mail-Tester (оценка 8/10 и выше)

Preheader:

• Preheader заполнен и не дублирует тему
• Самое важное в первых 40 символах
• Нет служебных ссылок в preheader

Верстка:

• Использована табличная вёрстка
• Ширина письма не более 600px
• Все изображения с указанными размерами и alt-текстом
• Стили инлайновые

Адаптивность:

• Письмо адаптировано под мобильные
• Размер шрифта на мобильных не меньше 14px
• Кнопки достаточно большие (минимум 44x44px)

Тестирование:

• Проверили в Gmail, Mail.ru, Яндекс.Почте
• Проверили на десктопе и смартфоне
• Открыли в Outlook (или проверили через Litmus)
• Все ссылки работают
• Отписка работает корректно

Контент:

• Нет переизбытка стоп-слов
• Соотношение текста и картинок примерно 60/40
• Указана кодировка UTF-8

Инструменты, которые упростят жизнь

Проверка настроек:

• MXToolbox — проверка SPF, DKIM, DMARC
• Mail-Tester — комплексная оценка письма
• Google Postmaster Tools — мониторинг репутации домена

Тестирование отображения:

• Litmus — просмотр в 90+ почтовых клиентах (платно)
• Email on Acid — аналог Litmus
• Testi@ от Mail.ru — бесплатная проверка в российских почтовиках

Верстка:

• Premailer — перевод CSS в инлайн-стили
• MJML — фреймворк для адаптивной вёрстки писем
• Litmus Builder — редактор и тестирование в одном

Конструкторы: Если ручная верстка кажется слишком сложной, используйте конструкторы писем с готовыми адаптивными шаблонами: Unisender, SendPulse, Mailchimp, Stripo.

Заключение

Техническая сторона email-рассылок может показаться сложной, но большинство настроек делается один раз. После правильной настройки SPF, DKIM и DMARC ваши письма будут стабильно доходить до получателей. Освоив основы адаптивной верстки и особенности Outlook, вы сможете создавать письма, которые хорошо выглядят везде.

Главное — не пренебрегать тестированием. Отправляйте тестовые письма на разные почтовые сервисы и устройства перед каждой крупной рассылкой. Лучше потратить 15 минут на проверку, чем потерять половину аудитории из-за технических проблем.

И если ваши письма до сих пор теряются в спаме или «ломаются» в Outlook — пора пересмотреть техническую базу. Adequo поможет навести порядок и выстроить систему рассылок, которая действительно работает. Оставьте заявку и мы обсудим, как улучшить ваши рассылки.