Содержание

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

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

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

    Outlook

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

    Полосы

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

    баг Outlook с полосой

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

    Решение

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

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

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

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

    баг 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;">&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. Выбор за вами.

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

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

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

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

    Баг Outlook с фоном

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

    Решение

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

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

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

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

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

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

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

    Баг Outlook с отступами

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

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

    Баг Outlook с отступами и фоном

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

    Баг Outlook с отступами и фоном

    Решение

    Отступы от 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 с фоновым изображением

    Решение

    Открываем изображение в Photoshop и сохраняем для web.

    Windows: Ctrl+Alt+Shift+S
    macOS: Option+Command+Shift+S

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

    Решение бага Outlook с фоновыми изображениями

    Gmail

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

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

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

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

    баг Gmail со схлопыванием ширин

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

    баг Gmail со схлопыванием ширин

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

    Решение

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

    решение бага Gmail со схлопыванием ширин

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

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

    баг Gmail со схлопыванием высот

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

    баг Gmail со схлопыванием высот

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

    Решение

    Оберните таблицу в 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 с тёмной темой
    баг 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 мы увидим следующее: у фона скругление работает, а у рамки — нет. Непорядок!

    Баг 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

    Решение

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

    Решение бага отображения писем с градиентом

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

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

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

    Скринридер — программа для преобразования контента интерфейсов в речь или шрифт Брайля.

    Заключение

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

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

    Всё, что нужно знать о тёмной теме в письмах
    Дарим удобный гайд
    Имя
    Email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 665
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 665
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку