Привет! Меня зовут Егор Стеблин, я фронтенд-разработчик отдела спецпроектов в KTS.
В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.
Что будет в статье
Зачем вообще нужны email-рассылки
У email-рассылки один из лучших ROI среди каналов диджитал-маркетинга — примерно 36:1.
Рассылка по почте даёт возможность наладить с представителями ЦА максимально близкий контакт. Ведь в ней можно обратиться к пользователю по имени и сделать персональное предложение. А вот, что ещё делают рассылки:
удерживают активных клиентов и возвращают тех, кто уже перестал ими быть
стимулируют покупателей на повторные покупки
побуждают клиентов делать импульсивные покупки
А теперь представим: ваш потенциальный или уже активный клиент открывает пришедшее от вас письмо, а в нем: поплывшая верстка, наполовину загрузившиеся шрифты и картинки, а в внизу вообще красуется надпись «открыть в отдельном окне», обрезающая половину письма. Неловко, не так ли?
Сделать письмо без ошибок поможет наша статья.
Зачем верстать письма вручную
Верстать письма руками — задача нестандартная. Последний раз мне это понадобилось для вставки кода письма внутри обёртки, которую разрабатывали другие разработчики.
Но если у вас нет специфических требований, а множество тонкостей пугают, советуем попробовать готовые решения, которые учтут все всё за вас — например, mosaico.io.
Что может пойти не так
Согласно caniemail.com, рейтинг поддержки всех доступных HTML- и CSS-элементов для вёрстки писем выглядит так:
Apple Mail (iOS и MacOS) — 93%
Mail.ru (десктопная версия) — 67%
Outlook (iOS и MacOS) — 63-65%
Google Mail — от 37 до 52% в зависимости от платформы
Остальные версии Outlook — от 19 до 61% в зависимости от платформы
Поддержка доступных HTML- и CSS-элементов в остальных клиентах
Для статьи мы собрали опробованные на собственном опыте способы вёрстки писем, которые точно работают. Расскажем, почему надо использовать табличную вёрстку, в чём проблема Outlook и где проверять письма на поддерживаемость.
Проблема Outlook
Полная версия
Первый Outlook разработали в Microsoft в 1997 году как часть пакета Microsoft Office. Это был персональный информационный менеджер, преимущественно используемый для управления электронной почтой. С годами Outlook развивался и обретал новые функции, такие как календарь, задачи и контакты.
Первоначально Outlook использовал движок Word для генерации сообщений и движок Internet Explorer для отображения входящих. Это приводило к несоответствиям в отображении и сложностям в создании писем. Поэтому в 2007 году в Microsoft решили заменить Internet Explorer на Word для отображения входящих писем.
Так Outlook на 16 лет лишился поддержки большей части возможностей HTML и CSS, в результате чего разработчикам пришлось использовать разные практики для корректной поддержки писем в Outlook, о которых я расскажу ниже.
В сентябре 2023 г. Microsoft выпустили Outlook на новом движке. Теперь поддержка элементов гораздо шире, но проблема остаётся, и вот почему:
Во-первых, на сервисах вроде caniemail.com ещё не прописана поддержка для последней версии Outlook — до сих пор нет достоверных данных о том, что он поддерживает.
Во-вторых, не у всех пользователей стоит новая версия. Она полностью добавлена в Outlook Web, подписку Microsoft Office 365 и в Windows Mail. Но это — при условии автоматического обновления либо предустановленного приложения в Windows 11, начиная с 2024 года. Если на ПК стоит Office 2021-го года и ниже, Outlook будет на старом движке.
Если кратко: Microsoft Outlook поддерживает только от 19 до 65% доступной вёрстки и при этом по-прежнему очень распространён в РФ. Есть новая версия, но пока неизвестно, какие элементы она поддерживает. Поэтому если потенциальные читатели ваших писем пользуются Outlook — для надёжности стоит использовать все правила ниже.
Базовые принципы
Используйте табличную вёрстку. Когда Outlook перешёл на рендеринг через Microsoft Word, многие CSS- и HTML-возможности стали недоступны. Самым стабильным путём разработки стала табличная вёрстка — и остаётся до сих пор.
Новый Outlook практически полностью поддерживает разработку на div, но многие пользователи всё ещё используют старые версии клиента. Возможно, через 2-3 года большинство перейдёт на новый Outlook, и тогда таблицы станут менее актуальными — но пока так.
Максимальный размер документа с письмом — 100 Кб. Подгружаемые извне картинки и шрифты не считаются. Причин этому несколько:
Спам-фильтры или графические артефакты
Автоматическая обрезка в ряде клиентов, например Gmail. Вместо свёрстанного письма появляется кнопка «Открыть в отдельном окне» — и весь тщательно заготовленный UX коту под хвост:
Максимальная ширина — 800 пикселей. Раньше из-за Outlook и среднего размера экранов использовали стандарт в 600 пикселей. Сегодня максимальная ширина выросла до 800 пикселей. Если делать ещё шире, может возникнуть ряд проблем от появления горизонтального скролла до некорректной отрисовки.
Максимальная ширина письма для мобильных устройств — 400 пикселей. Без прописанных стилей почтовый клиент сам сожмёт письмо под экран, сохраняя пропорции.
Используйте только inline-стили, потому что их поддерживает большая часть клиентов. Тег style поддерживается не везде. Например, почтовый клиент Google воспринимает стили внутри тега style только в письмах с аккаунтов Google. Если вы привяжете к почте Google клиент Яндекса, то в письмах с Яндекс-почты стили в теге style вообще не дойдут до клиента. А ещё style-стили могут просто потеряться при пересылке.
Для ускорения разработки можно использовать css-классы. Но перед выкаткой в прод используйте сервис, который всё завернёт в inline, например templates.mailchimp.
Проверяйте поддержку элементов и свойств. Можно использовать сервис caniemail.com: каждый HTML-элемент, атрибут, CSS-свойство проверены сразу на 20-30 почтовых клиентах, для каждого из которых написана версия, которая поддерживает конкретный элемент. Если поддержка неполная или с багами, caniemail скажет, что именно не работает.
Что касается самого содержимого письма вам, разумеется, доступны базовые элементы:
Текст
Изображения
Ссылки
К сожалению, на данный момент использование видео и аудио не поддерживается в большинстве почтовых клиентов, но для добавления интерактивности вы можете использовать CSS-модификатор :hover , применяющий опредёленные стили при наведении на любой элемент.
<style>.Для тестирования отправки писем можно использовать сервисы putsmail.com, mailtrap.io, emailonacid.com. Мы используем putsmail.com.
Для работы просто вставьте HTML-код в редактор и нажмите «Send Email».
Вёрстка в HTML
Прехедер. Это подзаголовок письма, который находится рядом с заголовком:
Пользователь видит прехедер до открытия. Он может повторять текст в письме, а может кратко его резюмировать. В целом, рекомендуемая длина для прехедера — в пределах 30-80 символов. Но не забывайте, что клиенты бывают разные и всё надо предварительно тестировать.
Поскольку прехедер может показывать вплоть до 150 первых non-code символов, после него может внезапно показаться основная часть письма. Чтобы этого не было, нужно заполнить пустое пространство последовательностью спецсимволов, заканчивающейся пробелом (одна такая последовательность равняется одному пробелу на клиенте) “ ͏ ”
В теле письма прехедер в любом случае лучше скрыть, чтобы не дублировать информацию, которую получатель уже видел. Для этого навешивается довольно много стилей, чтобы скрыть наверняка.
Для скрытия прехедера мы используем такие настройки:
<div
style="
font-size: 0px;
color: #ffffff;
line-height: 1px;
mso-line-height-rule: exactly;
display: none;
max-width: 0px;
max-height: 0px;
opacity: 0;
overflow: hidden;
mso-hide: all;
"
>
Текст прехедера
</div>Для всех таблиц (<table>) нужно принудительно убрать дефолтные стили. Это нужно для идентичного воспроизведения на всех клиентах, если какой-то из них применяет стили:
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"border="0"устанавливает толщину границы ячеек таблицы в 0 пикселей, таким образом, убирает границы и линии между ячейкамиcellspacing="0"устанавливает расстояние между ячейками таблицы в 0 пикселей и убирает промежутки между ячейкамиcellpadding="0"устанавливает внутренние отступы в ячейках таблицы в 0 пикселей. Как и cellspacing, помогает убрать отступыrole="presentation"позволяет программам для чтения с экрана воспроизводить только содержимое таблицы без указания, в какой по счёту клетке оно находится
Для всех изображений прописывайте alt и border=”0”.
alt предназначен для предоставления альтернативного текста для изображения. Используется, если пользователь отключил загрузку изображений или у него есть ограничения в зрительных возможностях
<img src="example.jpg" alt="Описание изображения">border — обязательный атрибут для идентичного воспроизведения на всех клиентах, потому что некоторые почтовые клиенты могут автоматически добавлять границы к изображениям
<img src="example.jpg" alt="Описание изображения" border="0">Для всех ссылок требуется прописывать title. В первую очередь нужно по той же причине, что и атрибут alt из предыдущего раздела: если получатель письма пользуется скринридером, title даст информацию о ссылке.
<a style="text-decoration: none" href="https://kts.tech/" title="Join us">Ещё title может вызывать всплывающие подсказки при наведении указателя мыши, предоставляя пользователям дополнительную информацию о ссылке. Но помните, что не все почтовые клиенты и браузеры одинаково поддерживают и отображают подсказки.
Для выравнивания используйте valign и align. Они предназначены для управления вертикальным и горизонтальным выравниванием содержимого ячеек таблицы соответственно. Они применяются к тегам <td> (ячейка таблицы) или <th> (заголовок ячейки).
valignопределяет, как содержимое ячейки будет выравниваться по вертикали относительно высоты ячейки:
<td valign="top">Содержимое ячейки</td>alignопределяет, как содержимое ячейки будет выравниваться по горизонтали относительно ширины ячейки:
<td align="center">Содержимое ячейки</td>Пример
Вёрстка в CSS
В качестве единиц измерения используйте пиксели и проценты, так как среди единиц измерения у них наибольшая поддержка, причём:
Проценты можно применять только для высоты и ширины
Для всего остального, например стилей шрифтов, отступов — только пиксели
Если брать в расчёт только новые клиенты с высоким уровнем поддержки функционала CSS, то относительные единицы тоже можно использовать. Но мы действуем наверняка, поэтому рассчитываем сделать письмо, которое отрисует даже старая версия Outlook, поэтому этот вариант не берём.
Сразу верстайте резиново. Для всех ключевых элементов письма, которые должны занимать 100% ширины, нужно прописывать максимальную ширину через свойство max-width. Это может помочь избежать проблем при отображении на устройствах с очень широкими экранами.
Медиа-запросы для адаптивности поддерживаются только в 50% почтовых клиентов. Поэтому надо с самого начала рассчитывать, как будет заполнять пространство каждый элемент.
Откажитесь от таких стилей, как position: absolute. Есть ряд свойств, которые поддерживаются только в самых продвинутых клиентах, например Apple Mail. Абсолютное позиционирование элементов — одно из них.
Для позиционирования можно использовать только свойства таблиц valign и align — и экспериментировать с отступами, используя padding и margin.
Пишите стили полностью. Клиенты могут не поддерживать сокращённые стили вообще — или воспринять их не так, как ожидает разработчик. Поэтому:
Правильно:
padding: 5px 10px 5px 10pxилиpadding: 0 10px 0 10pxНеправильно:
padding: 5px 10px
Используйте padding у родительских компонентов вместо margin у дочерних. Padding имеет большую поддержку, поэтому так вы снизите количество возможных багов.
Background-image можно использовать только в крайнем случае. Он поддерживается в современных клиентах, но версии Outlook до 2023-го года не поймут, что это. Если использование background-image критически важно, лучше вообще пересмотреть всё решение и реализовать какую-то альтернативу, например попробовать background-color.
Шрифты
Используйте email-safe-шрифты. Они есть на абсолютном большинстве устройств, а значит, и в установленных на них почтовых клиентах, поэтому их использование безопасно. Вероятность того, что клиент будет полноценно поддерживать другой шрифт — 24%.
Ещё одна причина использовать email-safe-шрифты: пока кастомные шрифты загружаются, текст в письме не отображается.
Код интеграции email-safe-шрифта может отличаться от кода интеграции кастомного шрифта в электронном письме. Подключение может выглядеть примерно так:
body {
font-family: Arial, sans-serif;
}В случае кастомных шрифтов в веб-разработке часто используется правило @font-face для загрузки шрифтов. Оно определяет кастомный шрифт и его источники — пути к файлам шрифтов, форматы и другие параметры. Например:
@font-face {
font-family: "CustomFont";
src: url("path/to/custom-font.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}Но не все почтовые клиенты поддерживают загрузку шрифтов с помощью @font-face. Поэтому, если кастомный шрифт критически важен, всё равно обязательно пропишите полный фоллбэк на email-safe-шрифт:
body {
font-family: "CustomFont", "FallbackFont", Arial, sans-serif;
}Здесь “FallbackFont” — email-safe-шрифт. Если “CustomFont” недоступен, браузер или почтовый клиент будет искать следующий шрифт в списке.
Фантомные таблицы
Если есть какой-то блок с заданной в процентах шириной и ограничением в виде max-width, в 100% случаев Outlook пропустит ограничение, так как попросту не знает свойства max-width. В результате могут появиться дефекты в верстке.
Пример подобных дефектов:
Но если обернуть элементы таблицы в комментарий, он будет восприниматься только в десктопном Outlook версий 2007-2019 за счёт движка. Остальные просто не увидят эти закомментированные таблицы, отсюда и название.
Поэтому все дивы и таблицы с варьируемой шириной специально для Outlook надо оборачивать в фантомную табличку со статической шириной:
<!--[if mso | IE]>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
width="600"
style="width: 600px"
>
<tr>
<td>
<![endif]-->
<div style="width: 100%; max-width: 600px; margin: 0 auto">
<!-- Контент письма -->
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]--><!--[if mso | IE]>и<![endif]-->— это комментарии, которые будут восприниматься только старыми версиями Outlook. Внутри этих комментариев создается таблица с фиксированной ширинойПосле закрытия комментариев для Outlook добавляется любой блок, который использует относительные единицы измерения
Пример письма от начала до конца
Как вы видите, помимо изложенного ранее здесь мы используем определенные мета-теги. Не будем детально описывать каждый из них, остановимся лишь на одном из самых важных — viewport. Этот тег отвечает за масштабирование вашего документа на мобильных устройствах. Стандартными значениями для него являются: width=device-width и initial-scale=1 . Тогда содержимое документа масштабируется под ширину устройства и ставит параметр зума в исходную позицию.
Пример письма от начала до конца
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
lang="ru"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
</head>
<body
style="margin: 0; padding: 0; min-width: 100%; background-color: #dde0e1"
>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {
background-color: #dde0e1 !important;
}
body,
table,
td,
p,
a {
font-family: Arial, sans-serif, Helvetica !important;
}
</style>
<![endif]-->
<center style="width: 100%; table-layout: fixed; background-color: #dde0e1">
<div
style="
max-width: 600px;
background-color: #fafdfe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
"
>
<div
style="
font-size: 0px;
color: #fafdfe;
line-height: 1px;
mso-line-height-rule: exactly;
display: none;
max-width: 0px;
max-height: 0px;
opacity: 0;
overflow: hidden;
mso-hide: all;
"
>
Example
Preheader‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="color:#1C1E23;">
<tr>
<td>
<![endif]-->
<table
align="center"
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"
style="
color: #1c1e23;
background-color: #fafdfe;
font-family: Arial, Helvetica;
margin: 0;
padding: 0;
width: 100%;
max-width: 600px;
padding: 40px 0 40px 0;
"
>
<tr align="center">
<td>
<h1 style="margin: 0">Hello world</h1>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0" align="center">
<table
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"
style="max-width: 400px"
>
<tr>
<td>
<img
src="./example.jpeg"
alt="example"
border="0"
width="100%"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"
style="width: 100%"
>
<tr>
<td style="padding: 20px 0 0 40px">
<h2 style="margin: 0">Hello world but smaller</h2>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 40px">
<p>Become a part of hello world community for just $9.99</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 30px 0 0 0">
<table
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"
style="
border-spacing: 0;
mso-cellspacing: 0;
mso-padding-alt: 0;
"
>
<tr>
<td
style="
padding: 20px 20px 20px 20px;
background: #0d4cd3;
border-radius: 10px;
"
>
<a
href="https://kts.tech/"
target="_blank"
style="
text-align: center;
text-decoration: none;
color: #e8fbfa;
"
title="Join Us"
> Join Us
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>Заключение
Наш подход к вёрстке писем может показаться немного странным: несмотря на современное развитие технологий, даже Gmail поддерживает немногим больше половины всех возможностей HTML и CSS, не говоря уже про Outlook. Всё это напоминает почтальона Печкина, который живёт в 2024 году и до сих пор развозит письма на велосипеде, чтобы наверняка.
На самом деле новые клиенты с высокой поддержкой элементов уже используются, просто ещё не заменили старичков. Поэтому пока приходится ориентироваться на legacy.
А когда подходы сменятся, мы обязательно напишем новую версию статьи и расскажем о новых правилах вёрстки — stay tuned!
Другие статьи про frontend для начинающих:
Как работают браузеры: навигация и получение данных, парсинг и выполнение JS, деревья спец возможностей и рендеринга
Другие статьи про frontend для продвинутых:
