Почему различные клиенты и ISP отображают письма по-разному
Вёрстка емейл-писем связана с определёнными особенностями. Каждое письмо требует проверки на корректное отображение в разных десктопных почтовых клиентах и веб-интерфейсах, а также на экранах планшетов и мобильных телефонов.
Письмо приходит на емейл-сервера почтовых клиентов, и после обработки его сервером оно может приобрести другой вид. Например, если пользователь откроет одно и то же письмо в веб-интерфейсе Gmail и мобильном интерфейсе Gmail — HTML-код письма будет выглядеть по-разному.
Это связано с разной предварительной обработкой емейла. Дело в том, что веб-интерфейс — это тоже набор HTML-тегов и CSS-стилей, и чтобы наша вёрстка не перезаписала CSS-стили и не «поломала» его, почтовые клиенты используют ряд ухищрений. Большинство из них удаляют все стили, прописанные в ‹head› и ‹body›. Например, Yahoo.com, Gmail.com и Outlook.com переписывают имена селекторов в письме — добавляют свои префиксы. Yahoo.com и Gmail.com также оборачивают элементы вёрстки письма в контейнеры со своими классами. Завершает картину Outlook, который использует для интерпретирования кода движок MS Word. А у таких клиентов, как Thunderbird, Apple Mail и Opera Mail, интерпретаторы построены на том же движке, что и браузеры.
Для примера давайте разберём вставку фоновых изображений в письма. HTML-код таблицы с фоном будет следующим:
<!-- bg_tbl -->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="max-width: 300px; min-width: 300px;"><tr>
<td background="img/back1.jpg" style="background-image:url(img/back2.jpg)" bgcolor="#e07b2d" height="100" valign="top" align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:100px;">
<v:fill type="tile" src="img/back3.jpg" color="#e07b2d" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td align="center" height="100" valign="middle">
<div style="line-height: 16px;">
<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; line-height: 16px;">
Тут должен быть текст</span>
</div>
</td>
</tr></table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr></table>
<!-- bg_tbl END -->
Обратите внимание, что фоновое изображение мы прописываем в трёх местах: в виде атрибута, в инлайновых стилях и в vml. Для чего это нужно? Именно такая структура обеспечит нам корректное отображение фонового изображения во всех почтовых клиентах и веб-интерфейсах.
Для примера в атрибуте, style и vml прописаны три разных изображения. Если мы посмотрим, что у нас отобразится в почтовых клиентах и веб-интерфейсах, то увидим следующую картину:
- изображение, прописанное в атрибуте background, отобразится в Yandex.ru, Outlook.com и Lotus Notes 8.5;
- изображение, прописанное в style, отобразится в Gmail.com, mail.ru, Yahoo.com, Rambler.ru, Outlook 2003 и в стандартных приложениях на Android и iOs;
- изображение, прописанное в vml, отобразится в Outlook 2010, Outlook 2013, Outlook 2016.
Если мы откажемся от использования атрибута background, то фоновое изображение совсем не отобразится в Outlook.com, так как Outlook.com игнорирует стилевое свойство background-image. Если не пропишем фоновое изображение в инлайновых стилях, то фона не будет в Rambler. А Outlook показывает фоновые изображения только если используется vml. Если мы, например, меняем правила повторения или позиционирования фона, то обязательно используем полную, а не сокращённую форму записи стилевых свойств (background-repeat, background-position).
Этот пример показывает, насколько вёрстка емейл писем отличается от обычной web-вёрстки. Тут можно провести аналогию с CSS-хаками — методами, позволяющими воспринимать CSS только определённому браузеру.
Например, можно было добавить фон отдельно для IE6:
* html .class {background: red}
А такой хак работает в IE6 и IE7 по аналогии со свойством !important:
.class {background: red !ie}
Таких хаков было множество, и не только для IE. CSS-хаки раньше активно использовали верстальщики, чтобы добиться идеальной кроссбраузерной вёрстки. В письмах сейчас похожая ситуация — необходимо учитывать особенности каждого почтового клиента и веб-интерфейса.
Стоит также упомянуть про скрипты в письмах — их использовать нельзя. Почтовые клиенты ведут себя по‑разному с тегом <script>. Многие удаляют всё, что находится внутри тега, другие просто отмечают письмо как потенциально опасное, и оно не дойдёт до пользователя.
Будьте внимательны к деталям и проводите тестирование тщательно. Подробно об особенностях вёрстки писем читайте в статье «Инсайты. Чем вёрстка писем отличается от вёрстки веб-страниц».
