Вы можете кинуть мне донат на кофe, если нашли что-то полезное для себя на этом сайте. Спасибо 🙏
отсканируйте QR-код или нажмите на кнопку
Привет. Вы оказались на этой странице, значит скорее всего вам приходится верстать email рассылки, поэтому соболезную. Я составил памятку, чтобы не упустить важные моменты при верстке HTML писем, буду пополнять этот список. Вот он:
alt
атрибут, у картинок без текста пустой alt
<!-- padding --><div style="height: 10px; line-height: 10px; font-size: 8px;"></div>
padding
для отступов, верстаем по максимуму таблицами. Например: Есть иконка шириной 35px
и отступ до текста 15px
, значит делаем ячейку шириной 50px
, а не с помощью паддинга 35px + padding: 15px
19px
, то задаем его с помощью таблицы. Это связано с тем, что отступ заданный через таблицу не меняет своего размера, в то время как отступ через padding может увеличиваться в outlook тем больше, чем больше исходное значение. И чтобы контент в outlook не обрезался следует отступы задавать через таблицы<del>
, а <span>text-decoration: line-through;</span>
. В Outlook не тег del будет менять цвет шрифта и это поведение нельзя будет переопределить, поэтому используем span с css стилями<span>
, иначе на айфонах символ будет выглядеть не очень хорошо<span style="font-family: 'Helvetica Neue', Roboto, Arial, sans-serif;">₽</span>
При отправке письма любая платформа заменит адрес ссылки для отслеживания перехода. Если текст ссылки, который имеет вид url-адреса не будет совпадать с значением в href, почтовые сервисы могут принять это за мошенничество. Вместо этого лучше написать «подробнее», «перейти» или что-то в этом духе.
Например:
Так нельзя!
/* Платформа заменит эту ссылку и в href будет адрес, который не совпадает с текстом ссылки, из-за этого письмо может попасть в спам */
<a href="https://example.ru" target="_blank">https://example.ru</a>
/* вот такая ссылка получится после замены */
<a href=“https://click.esp.com/16d/qwhds7AHwye63sd73ndzc” target=“_blank”>https://example.ru</a>
Исключением являются ссылки с utm метками.
Так можно. Есть utm метки
<a href="https://example.ru?utm_source=yandex_direct&utm_medium=cpc&utm_campaign=knigi" target="_blank">https://example.ru</a>
Так можно. Отображаемый текст не похож на ссылку, которые начинаются с https или https
<a href="https://example.ru" target="_blank">перейти</a>
border="0"
<img src="https://exampleurl.ru/img/card-bg-bottom.png" width="600" alt="" border="0" style="display: block; max-width: 600px; width: 100%;">
Это нужно, чтобы избежать появления рамок в outlook и других древних почтовиках.
Темная тема протестирована в Яндекс Почте. В других почтовых клиентах цвета будут инвертироваться похожим образом. Если ваши подписчики чаще используют другую почту, например, Mail, то лучше проверить её.
Для аутлука отступы от 30px заданы с помощью таблиц. Такие отступы рендерятся без искажений.
Отступы в аутлук сделаны таблицей
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" height="30" style="height: 30px;">
</td>
</tr>
</table>
Очень важно делать такие отступы в элементах, которые имеют определённую высоту. Например, в блоках с фоном.
Outlook не любит нечётные числа. Поэтому нужно сделать все размеры шрифтов, расстояния между строчками и отступы четными. Можно попробовать разделить отступ около полосы на два.
Это происходит обычно у двух или более блоков, которые стоят рядом.
Нужно сделать так: Вокруг проблемного блока сделать ещё одну таблицу с рамкой. Цвет рамки должен быть таким же, как цвет фона. Убрать ширину у исходной таблицы, чтобы при удалении рамки проблемный блок занял всё свободное место.
Код исходной таблицы
<table border="0" cellspacing="0" cellpadding="0" width="288" style="width: 288px;">
<tr>
<td align="center" style="border-radius: 24px; border-width: 1px; border-color: #e8eaef; border-style: solid;">
<div style="height: 24px; line-height: 24px; font-size: 22px;"> </div>
<div style="line-height: 14px;">
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
тут текст
</span>
</div>
<div style="height: 24px; line-height: 24px; font-size: 22px;"> </div>
</td>
</tr>
</table>
Код таблицы с двумя рамками
<table border="0" cellspacing="0" cellpadding="0" width="290" style="width: 290px;">
<tr>
<td align="center" style="border-radius: 24px; border-width: 1px; border-color: #ffffff; border-style: solid;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"
style="border-radius: 24px; border-width: 1px; border-color: #e8eaef; border-style: solid;">
<div style="height: 24px; line-height: 24px; font-size: 22px;"> </div>
<div style="line-height: 14px;">
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
тут текст
</span>
</div>
<div style="height: 24px; line-height: 24px; font-size: 22px;"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Нужно обернуть часть текста в тег <a>
, но без атрибута href
, указать цвет текста и убрать подчёркивание.
Пример кода для времени
Время: <a style="color:#222222; text-decoration:none;">12:00</a>
Вы можете кинуть мне донат на кофe, если нашли что-то полезное для себя на этом сайте. Спасибо 🙏
отсканируйте QR-код или нажмите на кнопку