HTML-письмо ведёт себя совсем не как обычная веб-страница — почтовые клиенты поддерживают лишь малую часть CSS, и часть привычных приёмов вёрстки там просто не работает. Разберём, как сверстать шаблон почтового события в 1С-Битрикс так, чтобы он корректно отображался в разных почтовых клиентах.
Табличная вёрстка вместо flexbox и grid
Современные CSS-механизмы раскладки (flexbox, grid) не поддерживаются
большинством почтовых клиентов надёжно — рабочий стандарт
для писем остаётся вёрстка таблицами <table>,
как это было принято в вебе до появления современного CSS.
Это выглядит архаично, но остаётся единственным способом
гарантировать одинаковое отображение в Outlook, Gmail и других
распространённых клиентах одновременно.
Инлайн-стили вместо блока CSS
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 20px; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
Текст письма
</td>
</tr>
</table>
Многие почтовые клиенты (особенно Gmail) удаляют или игнорируют
стили, заданные в блоке <style> в head письма, —
надёжный способ применить стиль элементу — записать его напрямую
в атрибут style каждого тега. Это делает разметку
многословнее, чем обычный современный HTML, но необходимо для
предсказуемого отображения.
Нужна помощь с Битрикс?
Фиксированная ширина вместо адаптивных единиц
Ширина письма обычно задаётся фиксированной (около 600 пикселей) —
это универсальный компромисс, комфортно читаемый и на десктопе,
и в большинстве мобильных почтовых клиентов без необходимости
в сложной адаптивной логике, которая ненадёжно работает в почте.
Для действительно мобильно-адаптивного письма нужны отдельные
media-запросы внутри тега <style>, которые
поддерживаются не всеми клиентами, но деградируют предсказуемо
до фиксированной ширины там, где не поддерживаются.
Изображения с явными размерами и alt
Изображения в письмах часто блокируются почтовым клиентом
по умолчанию до явного разрешения получателя — атрибуты
width, height и alt
обязательны, чтобы письмо оставалось читаемым и не разваливалось
визуально даже до того, как получатель разрешит показ изображений.
Подстановка переменных Битрикса в HTML-шаблон
<table width="600">
<tr>
<td style="padding: 20px; font-family: Arial, sans-serif;">
Здравствуйте, #NAME#! Ваш заказ №#ORDER_ID# принят.
</td>
</tr>
</table>
Переменные почтового события (#NAME#,
#ORDER_ID# и другие, заданные при отправке события)
вставляются в HTML-разметку шаблона так же, как в обычный текстовый
шаблон, — сам механизм подстановки не зависит от того, простой
это текст или сложная HTML-вёрстка с таблицами.
Тестирование в разных почтовых клиентах
Письмо, корректно выглядящее в браузерном веб-интерфейсе Gmail, может отображаться иначе в Outlook на десктопе или в мобильном приложении почты, — перед массовой рассылкой шаблона стоит проверить отображение хотя бы в нескольких самых распространённых клиентах, не полагаясь на то, что "раз выглядит нормально в одном месте, значит выглядит нормально везде".
Текстовая альтернатива письма
Помимо HTML-версии, письмо стоит сопровождать простой текстовой альтернативой (multipart-письмо) — часть почтовых клиентов и антиспам-фильтров лучше воспринимают письма с обеими версиями одновременно, а не только HTML, что также улучшает доступность для получателей, читающих почту в клиентах без поддержки HTML вовсе.
Частые ошибки
- Стили заданы в блоке CSS, а не инлайн. Значительная часть стилей игнорируется в популярных почтовых клиентах.
- Использован flexbox или grid для раскладки письма. Непредсказуемое отображение или полная поломка вёрстки.
- Письмо протестировано только в одном почтовом клиенте. Отображение в остальных клиентах остаётся неизвестным до жалоб получателей.
Итог
Вёрстка HTML-письма для почтового события Битрикса требует отдельного, более консервативного подхода, чем обычная веб-разработка, — табличная структура, инлайн-стили, фиксированная ширина и явные размеры изображений. Тестирование в нескольких реальных почтовых клиентах перед массовой рассылкой остаётся обязательным шагом, поскольку поддержка CSS в почте заметно отличается от поддержки в современных браузерах.