Вёрстка адаптивных email — различия между версиями

Материал из Email Маркетинг Вики
Перейти к: навигация, поиск
Строка 18: Строка 18:
 
Вместо отдельного файла стилей в вёрстке мобильных версий писем используются медиа запросы (media query). Код со стилями, адаптированными для мобильных устройств, может выглядеть так<ref name="Вёрстка адаптивных email-писем: подробное руководство (часть 1) ">http://habrahabr.ru/company/pechkin/blog/256853/</ref>:<br>
 
Вместо отдельного файла стилей в вёрстке мобильных версий писем используются медиа запросы (media query). Код со стилями, адаптированными для мобильных устройств, может выглядеть так<ref name="Вёрстка адаптивных email-писем: подробное руководство (часть 1) ">http://habrahabr.ru/company/pechkin/blog/256853/</ref>:<br>
  
<code>
 
 
     @media only screen and (max-device-width: 480px) {
 
     @media only screen and (max-device-width: 480px) {
 
         /* сюда пишутся стили для мобильных платформ */
 
         /* сюда пишутся стили для мобильных платформ */
 
     }
 
     }
 
     /* сюда пишется CSS для десктопа */
 
     /* сюда пишется CSS для десктопа */
</code>
 
  
 
Чаще всего используется оператор @media only screen, для того чтобы почтовый клиент понимал, какие стили нужно использовать для данного экрана. Далее прописывается максимальный размер экрана:  max-device-width: 480px. <br>
 
Чаще всего используется оператор @media only screen, для того чтобы почтовый клиент понимал, какие стили нужно использовать для данного экрана. Далее прописывается максимальный размер экрана:  max-device-width: 480px. <br>

Версия 18:17, 10 декабря 2015

Адаптивная вёрстка 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]:

Column Left Content

Column Right Content

Если в этот код добавить медиа-запрос, то письмо будет отображаться как двухколоночное на экране десктопа и, как одноколоночное на экране мобилного телефона.

Медиа запрос будет выглядеть так[5]:

   @media only screen and (max-device-width: 480px) {
       table[class=contenttable] { 
           width:320px !important;
       }
   }

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

Для новостных рассылок где, например, перечисляются несколько статей для мобильных устройств удобно использовать интерактивные таблицы с разворачивающимся контентом. То есть в блоке прописывается только название статьи, при нажатии кнопки разворачивается ее аннтоация и/или ссылка на полный текст.

Чтобы добиться такого эффекта, для начала следует сверстать шаблон заголовка и аннотация статьи, а также кнопку. Этот контент будет скрыт на десктопных устройствах и показан на мобильных.

Пример кода для создания шаблона заголовок+аннотация[5]:
<td>

<a href="http://yourdomain.com" class="link">Заголовок статьи</a>

  <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>

<img src="kitten.jpg" style="float: left;" >Текст аннотации

     <a href="http://yourdomain.com">Читать далее...</a> 

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

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

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

Вот еще несколько проблем, которы могут возникнуть при использовании медиа-запросов:

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

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

Вопрос о том, стоит ли использовать media queries (медиа-запросы) стоит решать с маркетологом. Именно он может дать информацию о том, на каких устройствах чаще всего просматривают почту клиенты вашей компании. Если большая часть рассылок просматривается на устройствах и в клиентах, которые не поддерживают медиа-запросы, стоит обходиться без них (по возможности) или использовать готовые протестированные шаблоны, которые с большой вероятностью будут правильно отображаться в большинстве почтовых клиентов.

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

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

Примечания

  1. https://www.campaignmonitor.com/resources/guides/email-marketing-trends/
  2. http://netology.ru/kursy/adaptivnaya-verstka-email
  3. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ColorImagesText.html
  4. http://habrahabr.ru/post/190814/
  5. 5,0 5,1 5,2 5,3 5,4 5,5 5,6 http://habrahabr.ru/company/pechkin/blog/256853/