10+ особенностей почтовиков, о которых следует знать верстальщику

Елена Сеченых

верстальщик EMAILMATRIX

В идеальном мире отправленное и полученное пользователем письмо должны выглядеть одинаково. Но почтовые клиенты вносят свои изменения в отображение рассылок. Именно поэтому каждому верстальщику необходимо знать об особенностях сервисов.

В этой статье я рассмотрю некоторые особенности почтовых клиентов и способы их обхода.

Outlook

Чтобы понять, любит верстальщик свою работу или нет, достаточно узнать его отношение к Outlook. Это один из самых проблемных почтовиков, и добиться корректного отображения в нём — отдельный вид искусства. Рассмотрим несколько примеров.

Полосы

Самый непредсказуемый и сложноустранимый баг.

Эти полосы произвольно возникают в любой версии десктопного приложения Outlook. Убираешь полосу в одной версии — она может появиться в другой. Более того, у одного пользователя полосы могут появиться, а у другого с той же версией — нет.

Решение

Outlook «не любит» нечётные числа, поэтому первый шаг — изменить на чётные все размеры шрифтов, межстрочные интервалы и отступы в блоках вблизи полосы. Второй — поменять отступы вблизи полосы или разделить их на два.

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

Исчезающая правая рамка

Этот баг мы обнаружили только в Outlook 2019. Чаще всего правая рамка пропадает у двух или более блоков, стоящих в ряд.

Решение

Оберните проблемный блок в ещё одну таблицу с рамкой, цвет которой соответствует цвету фона. У исходной таблицы уберите упоминание о ширине, чтобы при удалении рамки внутренний блок растянулся на оставшееся пространство.

Пример кода с одной рамкой:

<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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>
</td></tr>
</table>
</td></tr>
</table>

Важный нюанс: фон белый, рамка тоже белая — казалось бы, в тёмной теме цвета должны инвертироваться одинаково. Но нет. На скриншоте ниже видно, что двойная рамка нижней карточки выглядит явно толще одинарной.

Можно обернуть все блоки с рамками, чтобы в тёмной теме все они выглядели одинаково. Либо использовать такой подход только для тех писем, где важно отображение в Outlook. Выбор за вами.

Одновременная вёрстка фона и кнопки или двух фонов

Для иллюстрации этого бага возьмём блок с промокодом, с которым дальше мы ещё не раз встретимся.

Outlook не поддерживает свойство background-image, поэтому для фоновых изображений используем специальный код на языке векторной разметки VML. Его же применяем при вёрстке кнопки для корректного отображения в Outlook.

У VML есть один досадный недостаток: один код нельзя вложить в другой. Что может случиться, видно на примере. Кнопка распалась на отдельные части, при этом её фон улетел в левый верхний угол.

Аналогичная проблема может возникнуть, если в письме несколько фоновых изображений, вложенных друг в друга.

Решение

Кнопку можно оформить картинкой, чтобы она корректно отображалась в Outlook любой версии. Минус только один: в Outlook по умолчанию отключена загрузка изображений. Поэтому не забывайте прописывать альтернативный текст у изображений в атрибуте alt (об одной особенности отображения альт-текста речь пойдёт ниже).

При наличии двух и более фонов в одном блоке следует выбрать тот, что приоритетней. Именно он и будет виден в Outlook.

Высота отступов

Что может быть проще и понятнее, чем отступы между блоками? Но и тут нас ждёт сюрприз от Outlook. Чаще всего такие отступы мы выполняем через div:

<div style="height: 10px; line-height: 10px; font-size: 8px;">&nbsp;</div>

Но чем выше отступ, сделанный таким образом, тем больше погрешность при рендеринге в Outlook.

Слева — отступы, выполненные через div. Справа — реальная высота.

Особенно это важно в письмах, где есть фоновое изображение. Для него используется код на основе языка VML, в котором необходимо указывать общую высоту блока. Погрешность в рендеринге отступов может обрезать контент снизу. И чем больше отступы, тем больше эта погрешность.

Например, в Outlook 2016 контент уместился, но еле-еле.

А в Outlook 2019 последний абзац вовсе не влез.

Решение

Отступы от 30 px задавайте с помощью таблиц. Такие отступы рендерятся без искажений.

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr><td align="left" valign="top" height="30" style="height: 30px;">
&nbsp;
</td></tr>
</table>

Особенно важно использовать такие отступы в блоках с фиксированной высотой. Например, с фоновым изображением.

Съезжает фоновое изображение

Даже если вы всё сделали правильно, радоваться рано. Иногда получается вот такой вот Пикассо:

Решение

В появившемся окне выполните все необходимые настройки. Сохранённое изображение будет корректно отображаться в любой версии Outlook.

Gmail

У нас в EMAILMATRIX подход к вёрстке таков: всё, что можно адаптировать, должно быть адаптивно. Напомню: под адаптацией понимается либо перестроение блоков в мобильной версии, либо их масштабирование. Но данный подход не подошёл для «ВкусВилла», которому было важно сохранить визуал в мобильной версии. Подробнее об этом можно прочитать в кейсе.

Перейдя на неадаптивную вёрстку, мы столкнулись с некоторыми особенностями Gmail на iOS.

Схлопывается ширина при неадаптивной вёрстке на iOS

Любая ширина устремлялась к минимально возможному значению. То есть иконки прижались к логотипу, а текст заполнил всё пространство, исключив боковые отступы.

Как получилось

Как должно быть

Решение

Добавьте хотя бы одно изображение, равное письму по ширине (учитывая рамки, если они есть). Оно «удержит» весь контент на нужной ширине и не даст ему уменьшиться.

Схлопывается высота при неадаптивной вёрстке на iOS

Обратите внимание, как изменились низ блока с зелёным фоном и высота товарных карточек:

Как получилось

Как должно быть

Решение

Оберните таблицу в div с указанием минимальной высоты.

<div style="min-height: 100px;">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr><td align="left" valign="top" height="100" style="height: 100px;">
    <div style="line-height: 14px;">
      <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
	   любой контент (картинка и/или текст)
      </span>
    </div>
  </td></tr>
  </table>
</div>

Mail.ru

Пропадает рамка в тёмной теме

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

На примере ниже — несколько версий одного и того же блока. Главное отличие по столбцам — прописан ли кодом фон у блока с рамкой:

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

По строкам рассматриваем варианты с белой, серой и чёрной рамками на соответствующих фонах.

Поведение, как видите, непредсказуемое. Рамка может исчезнуть, поменять цвет или вообще не инвертироваться.

Решение

Решение неоднозначное и в какой-то степени философское. Вам нужно определиться, быть рамке в тёмной теме в Mail.ru или не быть. Если она всё-таки нужна, то попробуйте:

• прописать цвет фона кодом — как, например, для серой рамки на белом фоне;
• отказаться от фона совсем — как, например, для белой рамки на цветном фоне;
• прописать свои значения для рамки в тёмной теме. Но стоит помнить, что это повлияет и на стандартный почтовик на macOS и iOS.

Все эти изменения, конечно же, нужно согласовать с дизайнером.

Яндекс

Исчезает прехедер

У каждого почтового клиента есть встроенный спам-фильтр, позволяющий оценивать надёжность писем. Этот фильтр анализирует различные факторы, в том числе стоп-слова. Особенно важно избегать их в теме письма, но не стоит забывать и о его контенте.

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

К сожалению, чтобы найти причину искажения, верстальщику часто приходится проводить бесчисленные тесты, так как не все слова очевидны:

И это только маленькая часть! Более того, в данном примере проблема оказалась в самой последней строке: Яндексу почему-то не понравилось сочетание слов в ней. Но тем и интереснее были поиски!

Так что во всех последующих рассылках проблемы больше не возникло.

Решение

• Переформулируйте фразу, содержащую стоп-слова, таким образом, чтобы исключить их, но не потерять смысл.
• Если переформулировать не получается, замените русские буквы на схожие английские (e, o, a, c), если они визуально совпадают в использованном семействе шрифтов. На примере выше мы заменили букву «с» в слове «если» на английскую — и проблема исчезла.

Rambler

Скругление рамки

Допустим, у вас есть блок с промокодом, у которого заданы цвет фона, рамка и скругление. Код такого блока выглядит так:

<table border="0" cellspacing="0" cellpadding="0" width="268" style="width: 268px;">
<tr><td align="center" valign="middle" height="54" bgcolor="#ffffff" style="border-radius: 50px; height: 54px; border-width: 1px; border-color: #359ebf; border-style: solid;">
  <div style="line-height: 20px;">
    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #252525;">XXXX</span>
  </div>
</td></tr>
</table>

В Rambler мы увидим следующее: у фона скругление работает, а у рамки — нет. Непорядок!

Решение

Чтобы у рамки срабатывало скругление, необходимо добавить тегу table в атрибуте style свойство border-collapse: separate. Наш блок примет следующий вид:

<table border="0" cellspacing="0" cellpadding="0" width="268" style="width: 268px; border-collapse: separate;">
<tr><td align="center" valign="middle" height="54" bgcolor="#ffffff" style="border-radius: 50px; height: 54px; border-width: 1px; border-color: #359ebf; border-style: solid;">
  <div style="line-height: 20px;">
    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #252525;">XXXX</span>
  </div>
</td></tr>
</table>

Остальное

Градиенты

Градиент кодом не поддерживается в Rambler, Yahoo и Outlook. Предположим, поддержка этих почтовиков вам не важна и вместо градиента вы прописали альтернативный цвет фона. Здесь вас поджидает другая напасть: в тёмной теме в Mail.ru градиент не инвертируется.

Оригинал

Тёмная тема в Gmail

Тёмная тема в Mail.ru

Решение

Возьмите исходный фон, в котором содержится градиент.

Продублируйте его. Добавьте заливку основным цветом. Слою с градиентом добавьте opacity (непрозрачность) 70%. Подберите новые значения для градиента таким образом, чтобы цвета не отличались от исходного градиента.

При экспорте не забудьте убрать сплошную заливку и выберите формат png, чтобы сохранить прозрачность изображения.

Сравним, что получилось: верхний блок — это градиент вёрсткой, нижний — градиент прозрачностью.

Отмечу, что такая кропотливая работа требуется не всегда. В большинстве случаев контраст между фоном и текстом такой, что при инвертировании текст всё равно виден. В таком случае фон можно экспортировать как есть, то есть с непрозрачностью 100%.

Такой способ подойдёт только для простых градиентов: линейных и не осложнённых разнообразием цветов.

Другой подход — учесть эту особенность при дизайне и подобрать такой контраст между текстом и фоном, чтобы в тёмной теме все было читабельно.

Светлая тема

Тёмная тема в Яндексе

Тёмная тема в Gmail на iOS

Суммы, время, даты и адреса превращаются в ссылки

В некоторых почтовых клиентах можно наблюдать, как текст почему-то преобразуется в ссылки. Чаще всего это видно в стандартном почтовике на iOS и в Яндексе. Причём некоторые преобразования явные (текст становится синим и обзаводится подчёркиванием), а некоторые — не очень. Обратите внимание, как выглядит время: цвет текста не изменился, а подчеркивание появилось.

iPhone 14 iOS 16

Яндекс

Решение

Оберните часть текста, который преобразуется в ссылку, в тег <a> без атрибута href. Если этот атрибут оставить, то стилизовать ссылку можно так, чтобы она не выделялась. Правда, при наличии атрибута href курсор превращается в «руку», что может сбить пользователя с толку. Не забудьте указать в свойствах цвет текста и убрать подчёркивание.

Пример кода для времени:

Время: <a style="color:#000000; text-decoration:none;">11:00</a>

Альтернативный текст

К сожалению, альтернативный текст, который прописывается в атрибуте alt у тега <img> на случай отключённых или незагруженных изображений, отображается не везде.

• Gmail и Outlook — альт-текст отображается и в мобильной, и в десктопной версиях.
• Yahoo — только в мобильной версии.
• Mail, Яндекс, Rambler — не отображается вообще нигде.

Заключение

Даже зарекомендовавшие себя блочные конструкторы писем не могут охватить все возможности ручной вёрстки. Поэтому она и остаётся такой востребованной.

Обязательно тестируйте вёрстку во всех почтовых клиентах, чтобы потом не было сюрпризов в отображении. Мы в EMAILMATRIX учитываем все особенности и баги почтовых клиентов, поэтому наша вёрстка радует заказчиков и собирает положительные отзывы 😀