Верстка HTML писем. Часть 2

Верстка HTML писем для мобильных устройств

При создании профессиональных рассылок следует учитывать особенности своей аудитории. Как показывает статистика, чем она моложе, тем больше процент открытий писем с мобильных устройств. В среднем, около 30% всех подписчиков используют мобильные устройства для просмотра своей корреспонденции. Это весьма значимая доля, а значит нужно учитывать сей факт при создании своих рассылок.
Сегодня речь пойдет о верстке адаптивных писем.

Для начала следует сказать как себя ведут обычные письма на экранах мобильников: на устройствах под управлением iOS все письмо масштабируется, чтобы уместить письмо в ширину устройства (поэтому письма становятся нечитабельным и требуют ручного масштабирования).
Устройства же на Android отображают письмо в масштабе 100%, в связи с чем, мы видим лишь малюсенький фрагмент письма и не можем в полной мере оценить ни дизайна, ни контента.

При создании адаптивной верстке мы должны поставить следующие цели:

1. добиться корректного отображения письма в почтовых клиентах (MS Outlook 2003/2007/2010/2013, Mozilla thunderbird)
2. добиться корректного отображения в веб-интерфейсах основных почтовых провайдеров (mail.ru, yandex, gmail, rambler)
3. добиться корректного отображения на мобильных устройствах под управлением ОС Android и iOS.

К основным приемам верстки писем (см. предыдущую статью) добавляются новые, чтобы добиться поставленных целей.

Размеры

Теперь мы не может однозначно сказать, какая будет ширина у нашего письма, поэтому все параметры width следует указывать в процентах.
Бывают случаи, когда нам необходимо разместить, например, таблицу товаров, где ширина каждого блока фиксирована. Тогда на маленьких экранах они должны перестраиваться друг под друга (примерно как при адаптации обычных веб-страниц).

Это реализуется следующим образом:

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr><td align="left"><!-- 
        
        Item1 --><div style="float: left; display: inline-block; vertical-align:top; width: 300px;">
    <table width="300" border="0" cellspacing="0" cellpadding="0"  align="left" style="border-collapse:collapse;">
    <tr><td align="left" valign="top">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" >
            <tr><td align="center" valign="middle">
                Товар 1
            </td></tr>
        </table> 
    </td></tr></table></div><!-- 
    
    Item1 END --><!--[if gte mso 9]>
    </td><td>
    <![endif]--><!-- 
        
        Item2 --><div style="float: left; display: inline-block; vertical-align:top; width: 300px;">
    <table width="300" border="0" cellspacing="0" cellpadding="0"  align="left" style="border-collapse:collapse;">
    <tr><td align="left" valign="top">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" >
            <tr><td align="center" valign="middle">
                Товар 2
            </td></tr>
        </table> 
    </td></tr></table></div><!-- 
    
    Item2 END --></td></tr>
</table>

Рассмотрим каждый фрагмент кода подробнее.

Сначала мы создаем таблицу шириной 100%, в которой и размещаем блоки. Это сделано для того, чтобы все прочие объекты не пытались обтекать наши блоки с товарами.

Следует обратить внимание еще на пару моментов: параметр display у нашего блока следует указывать как inline-block, также следует указывать параметр float. Сами блоки следует писать без пробелов и переносов строк (они могут быть внутри комментариев, для бОльшего удобства восприятия). Это решит проблему в веб интерфейсе Outlook.com (hotmail.com), где блоки отображаются как "инлайновые".
Если в outlook 2010/2013 возникает проблема с лишними отступами, ее можно решить, заключив контент блока в

<div style="mso-table-lspace:-5px;mso-table-rspace:-5px;"> ... </div>

Но это может вызвать проблемы в outlook 2007.

Между блоков следует код в <!--[if gte mso 9]> - этот код предназначен исключительно для Outlook 2007/2010/2013. Он не поддерживает блочные теги, поэтому специально для него мы формируем вспомогательные ячейки таблицы.

При объявлении блоков можно комбинировать значения ширины указанной в процентах и ограничением минимальной ширины (чтобы блоки перескакивали, достигнув какой-то минимальной ширины)

Родительская таблица

В любом случае, максимальную ширину письма следует ограничивать.
Для большинства веб интерфейсов достаточно указать параметр max-width, который и решит данную задачу. Но Outlook данный параметр игнорирует. Поэтому для версий Outlook 2003-2013, а также Lotus следует все обернуть в таблицу созданную специально для него, а также чтобы исключить проблем в устаревшей версии Safari, необходимо добавить div с ограничением максимальной ширины:

    <!--[if (gte mso 9)|(IE)]>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr><td><![endif]-->
      <div style="max-width:600px;">
        ...
      </div>    
    <!--[if (gte mso 9)|(IE)]>
     </td></tr>
    </table><![endif]-->

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

<style type="text/css">
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) { 
table[class="table600"]{
    width:100% !important;
    max-width:700px;
}
}
.table600{
    width:600px;
}
</style>

Как вы видите, это несколько противоречит тому, что было написано в предыдущей статье об использовании style. Дело в том, что почти все веб-интерфейсы игнорируют данный параметр (вернее - вырезают), а вот мобильные почтовые клиенты по-умолчанию  интерпретируют корректно (приложение Почта на Android до версии 5.0 и приложение Mail на iOS).
Это нам дает некоторую свободу в использовании дополнительных плюшек для мобильных устройств.

Изображения в тексте

Часто необходимо вставить изображение с обтеканием. Для корректного отображения в outlook следует использовать следующую конструкцию:

<table width="104" border="0" cellspacing="0" align="left" cellpadding="0" style="float:left;mso-table-rspace:5pt;border-collapse:collapse;">
    <tr><td height="95" width="104" align="left" valign="top">
        <a href="#" target="_blank"><img src="/img/image.png" width="93" height="89" alt="" border="0" style="display: block;" /></a>
    </td></tr>
</table>

Медиа запросы(@media)

Наиболее популярные мобильные почтовые клиенты (стандартное приложение Android и iOS) поддерживают медиа-запросы, так что можно использовать стандартные приемы, применяемые при верстке адаптивных сайтов:

<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) { 
	table[class="table600"]{
		width: auto !important;
		max-width:600px;
	}
	td[class="mob_center"]{
		text-align: center !important;
	}
	div[class="mob_center_bl"]{
		float:none !important;
		display: block !important;
		margin: 0 auto;
	}	
	
}
.table600{
	width:600px;
}
</style>

Обратите внимание на первую строку - стиль -webkit-text-size-adjust:none; позволяет предотвратить увеличение шрифта на iOS-устройствах, это в значительной степени сделает отображение более аккуратным.

Также, вы, наверное, обратили внимание, что в качестве селекторов используются не классы, а атрибуты. Это критично для веб-интервейса yahoo.com

И так, подведем небольшой итог по данной статье:

Верстая адаптивное письмо следует помнить:

1. параметры ширины должны быть указаны в процентах (если блок не является "плавающим")
2. максимальная ширина блока, вместе со всеми внешними рамками и отступами не должна превышать 320px
3. Outlook не воспринимает блочную структуру, для него нужно прописывать спец.теги, где описывать табличную структуру.
4. Outlook.com(hotmail) плавающие блоки интерпретирует как инлайновые. поэтому не следует оставлять лишние пробелы и символы переноса строки
5. приложение Gmail не поддерживает медиа-запросы (также как приложение от mail.ru, yandex.ru и большинство других)