Не все почтовики умеют поддерживать последние версии HTML и CSS. Так что выход один — таблицы.
Верстка начинается с создания основной таблицы, внутри которой размещаются дополнительные таблицы, строки и ячейки для организации содержимого. Структура такого письма создается с помощью тега
<table>, внутри которого размещаются строки (
<tr>) и ячейки (
<td>).
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>
</body> Необходимо использовать только те атрибуты и HTML-теги, которые одинаково хорошо воспринимают все почтовые клиенты.
При внедрении CSS стилей желательно использовать именно inline стили (атрибут стилей прописываются непосредственно в HTML-теге).
Это обеспечивает более широкую совместимость со старыми почтовыми клиентами.
Пример использования встроенных стилей:
<table>
<tr>
<td align="center"
style="color: #00C8F0; font-family: Arial; font-weight: 700; font-size: 20px; line-height: 130%;">
Hello world
</td>
</tr>
</table> Учитывая, что многие пользователи читают письма на мобильных устройствах, важно избегать горизонтальной прокрутки. Для этого ширина письма фиксируется. Обычно это значение 640px, но заказчик в индивидуальном порядке в праве изменять ширину письма, необходимо обращать внимание на макет письма в Figma и при несоответствии уточнять ширину у менеджера.
Пример разметки оберточной таблицы для фиксирования ширины письма:
<table border="0" cellpadding="0" cellspacing="0" style="color: #000000; min-width: 320px; max-width: 640px; width: 100%;" width="100%">
<tr>
<td>
...
</td>
</tr>
</table> Верстка писем требует использования HTML-тегов и их атрибутов:
Для таблиц:
- <border> – этот атрибут задает толщину границы таблицы. Часто для современной верстки писем устанавливают border="0", чтобы избежать видимых границ.
- <cellpadding> – определяет отступ между краями ячеек и их содержимым. Очень важен для контроля пространства внутри таблиц.
- <cellspacing> – задает расстояние между ячейками. В современной верстке часто используют cellspacing="0" для устранения промежутков между ячейками.
Пример использования обязательных атрибутов для таблиц:
<table style="margin: 0; padding: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
...
</td>
</tr>
</table> Для изображений:
- <src> – ссылка на изображение. Очень важно указывать правильный URL-адрес.
- <alt> – текстовое описание, которое отображается при невозможности загрузки изображения. Полезно для доступности и SEO.
- <width> и <height> – явное указание размеров изображения (высоты и ширины). По приоритету находится выше, чем свойство width в inline атрибуте style.
Пример использования обязательных атрибутов для изображений:
<img src="#" width="100" alt="image" border="0" style="width: 100px; height: auto; display: block; margin: 0px;"> Некоторые почтовики, такие как OutLook не поддерживают CSS стили, такие как padding и margin, поэтому при верстке следуют верстать отступы с помощью строк и столбцов:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0;">
<tr>
<td class="empty" height="30" width="5%"> </td>
<td class="empty"> </td>
<td class="empty" height="30" width="5%"> </td>
</tr>
</table> Выбор шрифтов в HTML-письмах ограничен из-за различий в поддержке почтовыми клиентами. Рекомендуется использовать универсальные веб-безопасные шрифты, такие как Arial, Helvetica, sans-serif. Также при верстке текста необходимо указывать размер шрифта, междустрочный интервал, цвет и жирность шрифта:
<td style="color: #5F6972; font-family: Arial; font-weight: 400; font-size: 16px; line-height: 130%">
Hello world
</td> 