,

Гид по созданию адаптивного шаблона

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

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

Прежде всего,  внутри контейнера-заголовка <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