Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

NOTES 13.03.24 13.03.24 91
Бесплатные курсына главную сниппетов

Как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.

Что будет в статье

Зачем вообще нужны email-рассылки

У email-рассылки один из лучших ROI среди каналов диджитал-маркетинга — примерно 36:1.

Рассылка по почте даёт возможность наладить с представителями ЦА максимально близкий контакт. Ведь в ней можно обратиться к пользователю по имени и сделать персональное предложение. А вот, что ещё делают рассылки:

А теперь представим: ваш потенциальный или уже активный клиент открывает пришедшее от вас письмо, а в нем: поплывшая верстка, наполовину загрузившиеся шрифты и картинки, а в внизу вообще красуется надпись «открыть в отдельном окне», обрезающая половину письма. Неловко, не так ли?

Сделать письмо без ошибок поможет наша статья.

Зачем верстать письма вручную

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

Но если у вас нет специфических требований, а множество тонкостей пугают, советуем попробовать готовые решения, которые учтут все всё за вас — например, mosaico.io.

Что может пойти не так

Согласно caniemail.com, рейтинг поддержки всех доступных HTML- и CSS-элементов для вёрстки писем выглядит так:

Поддержка доступных 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 на новом движке. Теперь поддержка элементов гораздо шире, но проблема остаётся, и вот почему:

Если кратко: Microsoft Outlook поддерживает только от 19 до 65% доступной вёрстки и при этом по-прежнему очень распространён в РФ. Есть новая версия, но пока неизвестно, какие элементы она поддерживает. Поэтому если потенциальные читатели ваших писем пользуются Outlook — для надёжности стоит использовать все правила ниже.

Базовые принципы

Используйте табличную вёрстку. Когда Outlook перешёл на рендеринг через Microsoft Word, многие CSS- и HTML-возможности стали недоступны. Самым стабильным путём разработки стала табличная вёрстка — и остаётся до сих пор.

Новый Outlook практически полностью поддерживает разработку на div, но многие пользователи всё ещё используют старые версии клиента. Возможно, через 2-3 года большинство перейдёт на новый Outlook, и тогда таблицы станут менее актуальными — но пока так.

Максимальный размер документа с письмом — 100 Кб. Подгружаемые извне картинки и шрифты не считаются. Причин этому несколько:

Максимальная ширина — 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 , применяющий опредёленные стили при наведении на любой элемент.

Будьте внимательны! Вы можете добавить этот модификатор только через использование CSS-классов. Соответственно, на него распространяются все потеницальные проблемы, связанные с тегом <style>.
Будьте внимательны! Вы можете добавить этот модификатор только через использование CSS-классов. Соответственно, на него распространяются все потеницальные проблемы, связанные с тегом  <style>.

Для тестирования отправки писем можно использовать сервисы putsmail.commailtrap.io, emailonacid.com. Мы используем putsmail.com.

Для работы просто вставьте HTML-код в редактор и нажмите «Send Email».

Вёрстка в HTML

Прехедер. Это подзаголовок письма, который находится рядом с заголовком:

Текст, выделенный жирным — это заголовок, а после него серым текстом идёт прехедер. Видите, как часто он обрезается? Поэтому чем короче — тем надёжнее.
Текст, выделенный жирным — это заголовок, а после него серым текстом идёт прехедер. Видите, как часто он обрезается? Поэтому чем короче — тем надёжнее.

Пользователь видит прехедер до открытия. Он может повторять текст в письме, а может кратко его резюмировать. В целом, рекомендуемая длина для прехедера —  в пределах 30-80 символов. Но не забывайте, что клиенты бывают разные и всё надо предварительно тестировать.

Поскольку прехедер может показывать вплоть до 150 первых non-code символов, после него может внезапно показаться основная часть письма. Чтобы этого не было, нужно заполнить пустое пространство последовательностью спецсимволов, заканчивающейся пробелом (одна такая последовательность равняется одному пробелу на клиенте) “&#8199;&#65279;&#847; 

В теле письма прехедер в любом случае лучше скрыть, чтобы не дублировать информацию, которую получатель уже видел. Для этого навешивается довольно много стилей, чтобы скрыть наверняка.

Для скрытия прехедера мы используем такие настройки:

<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"

Для всех изображений прописывайте alt и border=”0”.

<img src="example.jpg" alt="Описание изображения">
<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> (заголовок ячейки).

<td valign="top">Содержимое ячейки</td>
<td align="center">Содержимое ячейки</td>

Пример

источник — caniemail.com
источник —  caniemail.com

Вёрстка в CSS

В качестве единиц измерения используйте пиксели и проценты, так как среди единиц измерения у них наибольшая поддержка, причём:

Если брать в расчёт только новые клиенты с высоким уровнем поддержки функционала CSS, то относительные единицы тоже можно использовать. Но мы действуем наверняка, поэтому рассчитываем сделать письмо, которое отрисует даже старая версия Outlook, поэтому этот вариант не берём.

Сразу верстайте резиново. Для всех ключевых элементов письма, которые должны занимать 100% ширины, нужно прописывать максимальную ширину через свойство max-width. Это может помочь избежать проблем при отображении на устройствах с очень широкими экранами.

Медиа-запросы для адаптивности поддерживаются только в 50% почтовых клиентов. Поэтому надо с самого начала рассчитывать, как будет заполнять пространство каждый элемент.

Откажитесь от таких стилей, как position: absolute. Есть ряд свойств, которые поддерживаются только в самых продвинутых клиентах, например Apple Mail. Абсолютное позиционирование элементов — одно из них.

Для позиционирования можно использовать только свойства таблиц valign и align — и экспериментировать с отступами, используя padding и margin.

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

Используйте 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
Результат ошибочного рендеринга в Outlook

Но если обернуть элементы таблицы в комментарий, он будет восприниматься только в десктопном Outlook версий 2007-2019 за счёт движка. Остальные просто не увидят эти закомментированные таблицы, отсюда и название.

Поэтому все дивы и таблицы с варьируемой шириной специально для Outlook надо оборачивать в фантомную табличку со статической шириной:

<!--[if mso | IE]>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
orig-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]-->

Пример письма от начала до конца

Как вы видите, помимо изложенного ранее здесь мы используем определенные мета-теги. Не будем детально описывать каждый из них, остановимся лишь на одном из самых важных — 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&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>

<!--[if (gte mso 9)|(IE)]>
<table orig-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"
>&nbsp;&nbsp;Join Us&nbsp;&nbsp;
</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.

 

на главную сниппетов
Курсы