Почему различные клиенты и ISP отображают письма по-разному

Екатерина Маслова

HTML-специалист, EMAILMATRIX

Вёрстка емейл-писем связана с определёнными особенностями. Каждое письмо требует проверки на корректное отображение в разных десктопных почтовых клиентах и веб-интерфейсах, а также на экранах планшетов и мобильных телефонов.

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

Будьте внимательны к деталям и проводите тестирование тщательно. Подробно об особенностях вёрстки писем читайте в статье «Инсайты. Чем вёрстка писем отличается от вёрстки веб-страниц».