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

Правильно оформляем заголовок

Прежде всего,  внутри контейнера-заголовка <head> необходимо разместить важную информацию. Ниже заголовок, который уже стал чем-то вроде отраслевого стандарта:

 headtempl

 

 Размеры письма

Верстка в одну колонку с шириной 600-650px  оптимальна для отображения на любом устройстве.

Вложенные таблицы и фон

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

Создайте первую таблицу (главный контейнер) с шириной 100%  и поместите внутри нее ячейку также с шириной 100% , для которой пропишите желаемый цвет фона рассылки (bgcolor).

Все последующие таблицы-контейнеры, содержащие вложенные таблицы должны иметь  ширину в пикселях,  а вложенные таблицы – в процентах!  Это позволит им растягиваться и сжиматься внутри контейнеров в зависимости от отображающего устройства.

Присвойте атрибут class  для таблицы-контейнера, задав имя, например, «container» –  позже это поможет оформить медиа-запросы и задать правила отображения элементов вашего шаблона в зависимости от размера экрана. Классы мы присвоим всем элементам с абсолютными значениями стилей, которые мы хотим адаптировать – таблицам-контейнерам, картинкам, текстовым блокам…
Вот что должно у вас получиться:

 

 Размеры элементов

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

Важное замечание! Когда вы используете абсолютные значения,  указываете размер в пикселях, не используя  “px”, так  как это может вызвать проблемы с отображением в Outlook:

width=”600″ = да  ,   width=”600px” = нет

Если в дизайне вашего письма предусмотрены расстояния между элементами, незаполненные  области, то  либо нужно добавить соответствующие отступы, отделяющие ваш контент  от границы ячейки – padding, либо обозначить  свободные  зоны  пустыми ячейками.

CSS

 CSS в email сообщении не очень хорошо поддерживается, особенно это заметно в Gmail и его приложениях. Но если вы поклонник  CSS, прописывайте все стили in-line, то есть отдельно к каждому элементу в теле письма, а не в хэдере.

Тем не менее, следующие стили хорошо отображаются в большинстве клиентов:

Padding, font-family, font-size, font-weight, text-align, text-decoration, color

Данный список далеко не исчерпывающий, поэтому при желании поэкспериментируйте  с использованием других!

Медиа запросы

Адаптивный дизайн базируется на медиа-запросах, прописанных  в секции <style> в хедере вашего письма. Наиболее распространённой практикой создания адаптивного дизайна является его базирование на отображении письма  на экране настольного компьютера и его адаптация для экранов мобильных устройств  при помощи  @media. Недостатком адаптивного дизайна, построенного таким образом, является  тот факт, что медиа запросы пока не поддерживаются  Gmail  и его приложениями.

Медиа запросы автоматически определяют ширину экрана или окна (на настольном компьютере), в котором осуществляется просмотр.

Например, пропишем медиа запрос для стандартного  iPhone и других смартфонов с аналогичной шириной экрана. Для этого ограничим в запросе максимальную ширину экрана устройства 320 пикселями при помощи maxwidth:

 temp3

 

 Minwidth используется с обратной целью – ограничить минимальный размер экрана, для которого действует запрос. Например, так прописывается запрос для устройств с разрешением более 680 пикселей:

@media only screen (min-width 680px) {….}

На практике оба типа запросов комбинируются, чтобы избежать пересечения запросов и обеспечить желаемое отображение элементов письма для любого экрана:

@media only screen (maxwidth: 320px)
{Стили для экранов до 320 пикс}
@
media only screen (minwidth: 321px) and (maxwidth: 649px)
{Стили для экранов от 321 до 649 пикс}

Для адаптации дизайна к размеру экрана устройства нам достаточно изменить ширину таблиц-контейнеров и картинок, которые мы пометили ранее классами (например, сlass=”container”,“cell”, “desktop_image” и пр.) с помощью медиа запросов. Аналогично адаптируем и размер шрифта (fontsize) и отступы в ячейке таблицы (padding).
Важно ставить маркер приоритетности !important, когда вы задаете значения стилей для каждого запроса, чтобы они не игнорировались браузерами и имели приоритет над стилями, прописанными в теле письма

templ4

Использование этих простых приемов поможет сделать рассылку более удобной для чтения на любом устройстве, что, конечно, обязательно повысит конверсию.

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply