Вёрстка адаптивных email

Адаптивная вёрстка email – это вёрстка, которая обеспечивает корректное отображение письма на большинстве устройств. По данным компании campaignmonitor 41% email открываются на мобильных устройствах. Однако при первом открытии на мобильном устройстве, по ссылкам кликают только 78% подписчиков. Часто повторные открытия и клики происходят на десктопных устройствах [1].
Таким образом, адаптивная вёрстка может существенно повлиять на эффективность email-кампании [2].

Основные правила вёрстки адаптивных email-сообщений

Помимо основных правил вёрстки для email, нужно помнить об особенностях экранов мобильных устройств.
Основные требования к адаптивной вёрстке:

Использование одноколоночных шаблонов шире 500-600 пикселей.
Целевая область кнопок и ссылок должна быть не менее 44х44 пикселя.
Минимальный размер шрифта, отображаемый на устройствах Apple, должен быть не менее 11 кеглей. В противном случае он автоматически увеличивается до минимального размера, вёрстка может поехать [3]
При вёрстке желательно использовать свойство display:none, чтобы скрыть элементы вёрстки, которые невозможно адаптировать для мобильного экрана.
Всю важную информацию лучше располагать в верхней части экрана.
По возможности использовать меньше изображений и всегда адаптировать их под размер экрана [4] [5].

Некоторые специалисты советуют начинать вёрстку письма именно с мобильной версии, чтобы сразу учесть все нюансы [5]. При этом важно учитывать положение кнопок с призывом к действию: видны ли они сразу при открытии письма или его придется скроллить.

Отображение письма на экранах разного размера

Вместо отдельного файла стилей в вёрстке мобильных версий писем используются медиа запросы (media query). Код со стилями, адаптированными для мобильных устройств, может выглядеть так [5]:@media only screen and (max-device-width: 480px) { /* сюда пишутся стили для мобильных платформ */ } /* сюда пишется CSS для десктопа */

Чаще всего используется оператор @media only screen, для того чтобы почтовый клиент понимал, какие стили нужно использовать для данного экрана. Далее прописывается максимальный размер экрана:max-device-width: 480px.
Для экранов менее 480рх дополнительно можно использовать класс contenttable [5]:@media only screen and (max-device-width: 480px) { /* мобильные css-стили записываются здесь */ table[class=contenttable] { width: 320px !important; } } /* место для десктопных css-стилей*/ table.contenttable { width: 640px; }

Этот класс никак не влияет на отображение письма на экранах в 480px и больше, но, если экран меньше, класс contenttable сужает его.

Одноколоночная верстка для мобильных с применением медиа-запросов

Двух-трехколоночные шаблоны писем лучше читаются на десктопных устройствах. Так информация выглядит читабельнее. Однако применение такой вёрстки на мобильных устройствах затрудняется чтение письма – текст становится слишком мелким. Для мобильных устройств лучше применять одноколоночную вёрстку.
Чтобы превратить двухколоночную вёрстку в одноколоночну, для начала нужно создать таблицу-контейнер для десктопной версии размером 640px и вложенные таблицы размером 320px. Вложенные таблицы будут играть роль колонок. Так как это не веб-вёрстка, то использовать лучше атрибуты HTML вёрстки, а не их CSS-аналоги. Например, для выравнивания текста используют атрибуты align=”left” и cellpadding=”10” вместо float: left; и padding: 10px;.

Код для двухколоночного шаблона, в самом простом виде будет выглядеть так [5]:

<table width="640" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="320" border="0" cellspacing="0" cellpadding="20" align="left"> <tr> <td><p>Column Left Content</p></td> </tr> </table> <table width="320" border="0" cellspacing="0" cellpadding="20" align="right"> <tr> <td><p>Column Right Content</p></td> </tr> </table> </td> </tr> </table>

Если в этот код добавить медиа-запрос, то письмо будет отображаться как двухколоночное на экране десктопа и, как одноколоночное на экране мобилного телефона.
Медиа запрос будет выглядеть так [5]:@media only screen and (max-device-width: 480px) { table[class=contenttable] { width:320px !important; } }

Добиться одноколоночной вёрстки на мобильных устройствах можно и без применения медиа-запросов. Для этого нужно отдельно сверстать таблицы контентом для десктопной версии и для мобильной версии, а затем отрегулировать отображение элементов в этих двух версиях с помощью оператора display:none.
При этом стоит помнить – для мобильной версии важно, чтобы призыв к действию оставался на первом экране. Количество отображаемого контента для мобильных устройств можно также сократить, используя display:none. Вы можете выбрать только самые важные позиции и смысловые элементы письма, чтобы избежать лишнего скроллинга.
Для новостных рассылок где, например, перечисляются несколько статей для мобильных устройств удобно использовать интерактивные таблицы с разворачивающимся контентом. То есть в блоке прописывается только название статьи, при нажатии кнопки разворачивается ее аннотация и/или ссылка на полный текст.
Чтобы добиться такого эффекта, для начала следует сверстать шаблон заголовка и аннотация статьи, а также кнопку. Этот контент будет скрыт на десктопных устройствах и показан на мобильных.
Пример кода для создания шаблона заголовок+аннотация [5]:

<td> <h4><a href="http://yourdomain.com" class="link">Заголовок статьи</a></h4> <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a> <div class="article"> <p class="bodytext"> <img src="kitten.jpg" style="float: left;" >Текст аннотации </p> <a href="http://yourdomain.com">Читать далее...</a> </div> </td>

Далее нужно сверстать кнопку, которая будет отображаться на мобильных устройствах. Как сделать кнопку для мобильных, которая не будет отображаться на экране десктопа, можно подробно прочитать в статье Сampaignmonitor.

Вёрстка адаптивного письма без медиа-запросов

Применение медиа-запросов спасает не всегда. Во-первых, многие почтовые клиенты на Android и iOS не поддерживаю медиа-запросы. Во-вторых, такие почтовые службы, как gmail и Yahoo, не поддерживают медиа-запросы в принципе.
Вот еще несколько проблем, которы могут возникнуть при использовании медиа-запросов:

Количество возможных размеров экрана устройства практически неограниченно. Каждую неделю появляются новые устройства и предугадать, какие экраны станут популярны в ближайшее время – невозможно.
Использование тегов <code><td></code>, расположенных столбцом, не всегда помогает в создании адаптивного шаблона письма, так как работает не везде.
Метод aligned table не позволяет нормально выровнять таблицы в мобильных приложениях без поддержки медиа-запросов.

Решение этих проблем с примерами кода и подробными комментариями приведено в статье «Creating a Future-Proof Responsive Email Without Media Queries». Русский вариант статьи опубликован на ХабраХабре, в июне 2015 года. В основе методов, описанных в статье, лежит применение CSS-стилей, поддерживаемых большинством существующих устройств и почтовых клиентов. В июне-июле 2015 года вышли статьи-дополнения от Артура Коха, с учётом русских почтовиков и подробными комментариями (первая статья, вторая статья).
Вопрос о том, стоит ли использовать media queries (медиа-запросы) стоит решать с маркетологом. Именно он может дать информацию о том, на каких устройствах чаще всего просматривают почту клиенты вашей компании. Если большая часть рассылок просматривается на устройствах и в клиентах, которые не поддерживают медиа-запросы, стоит обходиться без них (по возможности) или использовать готовые протестированные шаблоны, которые с большой вероятностью будут правильно отображаться в большинстве почтовых клиентов.

Полезные ссылки

Подробная таблица стилей CSS поддерживаемых разными почтовыми клиентами
Заказать качественную вёрстку адаптивных писем