20 января 2014

Верстка 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 и большинство других)

Комментарии  

Грачья02 июня 09:06
gmail-ловское приложение на андройде не поддерживает медиа запросы! Попробовал уже несколько раз.
Tod02 июня 07:06
Цитирую Грачья:
gmail-ловское приложение на андройде не поддерживает медиа запросы! Попробовал уже несколько раз.


Цитата:

Наиболее популярные мобильные почтовые клиенты (стандартное приложение Adroid и iOS) поддерживают медиа-запросы
Нестандартные клиенты не поддерживают медиа-запросы. в их числе gmail, приложение от mail.ruб yandex.ru и т.д.

Я на этом отдельно останавливался в рамках вебинара. Рекомендую посмотреть материалы: emailmatrix.ru/.../htmlcoder
При необходимости вы также сможете найти его запись.
Евгений18 декабря 07:12
А зачем создавать плавающий DIV? Почему нельзя сразу в TABLE прописать эти стили? И почему у этого DIV ширина 300px, а не 320? Ведь всё равно вложенная таблица его расширит... По идее этому DIV вообще смысла нет ширину указывать... Нет?
Tod18 декабря 08:12
Евгений
Веб интерфейс utlook.com вырезает стилевое свойство float. а у таблицы не может быть inline-block отображение. Да, тут правда спасает атрибут align, но использование именно блоков обеспечивает бОльшую свободу при перестроении, например, после перестроения без использования медиа-запросов блоки можно выровнять по центру. Также значительно удобнее вешать дополнительные стилевые свойства через медиазапросы именно на блоки, а не таблицы.
Размеры вложенных блоков в данном примере, действительно были указаны неверные, спасибо - поправил.
Евгений19 декабря 06:12
Спасибо. Пожалуйста, подскажите еще какими сервисами вы пользуетесь для проверки верстки писем? Ведь довольно проблематично ставить на пк все почтовые клиенты... Я нашел в инете несколько, но они платные...
Tod19 декабря 11:12
для тестирование использую
www.emailonacid.com/
litmus.com/
чаще первый.
Также отображение проверяется на реальных устройствах: главным образом основные веб-интерфейсы (Mail.ru, Yandex, gmail и тд), почтовые клиенты (outlook 2010\2013) и мобильные почтовые клиенты - на iOS и Android в стандартных приложениях и в gmail.
Полностью полагаться на тесты "Асида" или "Литмуса" не стоит, всегда следует делать контрольные тесты.

Данная статья, также как и 2 другие по этой теме несколько устарели и в новогодние праздники будут актуализированы , но все же рекомендую ознакомиться со статьей "Верстка писем. Полная версия"
tj-s.ru/.../...
Евгений19 декабря 12:12
Спасибо! Почитаю. А я вот такое нашел www.campaignmonitor.com/css/ тут таблица по поддержке некоторых свойств CSS, тегов и их атрибутов разными почтовиками.

У вас нет прав для комментирования