Адаптивность письма. О чем следует помнить?

На сегодняшний день адаптивный дизайн емейл-рассылок становится не роскошью, а необходимостью. Мобильные устройства постепенно вытесняют десктопные: по данным компании Campaignmonitor, 41% email открываются с мобильных девайсов.

Следует помнить основные правила писем для корректного отображения:

• Ширина письма не должна превышать 500-600 пикселей.

• Важная информация в письме должна располагаться в верхней части экрана.

• Используйте небольшое количество изображений и адаптируйте их под размер экрана

В eSputnik мы позаботились о корректном отображении Ваших писем и подготовили библиотеку адаптивных шаблонов:

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

За наличие адаптивности в коде письма отвечает следующий участок на вкладке CSS:

@media only screen and (max-width: 600px) { – это и есть начало адаптивности. Для корректного отображения письма на телефоне лучше ничего не удалять из этого кода.

Сейчас мы поговорим о возможностях адаптации нашего редактора:

Адаптивная картинка

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

Когда применять?

Когда Вы хотите подать карточку товара во всей красе: при включенной опции картинка будет на весь экран.

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

Скрытие блоков

Эта функция запрещает отображение выбранного блока в мобильной версии

Когда применять?

Когда вам нужно сократить письмо, например в части меню:

Отображение на телефоне, когда остаётся только три пункта менюиз пяти:

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

Настройка шрифтов и кнопок

Отображение этих пунктов настраивается на отдельной вкладке:

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

Отдельно можно задать размер шрифта кнопки и возможность ее отображения на всю ширину экрана телефона:

Адаптация под Gmail App

Самым популярным приложением для смартфонов в последнее время становится Gmail App. Gmail App под Android имеет встроенную функцию по адаптированию писем для мобильных устройств, но разные версии приложения показывают разные результаты с одним и тем же емейлом.

Для корректного отображения писем мы рекомендуем включать эту функцию.

Кастомная настройка шрифтов

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

В рассматриваемом примере нам нужно было получить вот такой результат:

Проблема заключалась в том, что текст на промокоде и кнопке рядом наследует размер общего текста и при мобильном отображении ломает внешний вид письма:

Решение вписывается всего в несколько строчек кода. Для начала вам нужно добавить к тегу, который содержит текст, класс "text-m-small", по которому мы поймем, что он применяется к тексту, на мобильном и делает текст меньше.

А во вкладке CSS, сразу после строчки @media only screen and (max-width: 600px) { добавляем следующий код:

 .text-m-small {

     font-size: 10pt !important;

 }

Этот код задает размер текста в 10 пунктов, что позволяет превратить съехавший и некрасивый блок в ровный и без переносов:

Регулирование отступов

При добавлении ссылок на социальные сети может случится так, что все ссылки съедут немного вправо или влево. Это случается из-за параметра "Отступы между иконками":

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

Нужно убрать у последней иконки отступ в 30 пикселей вправо:

В таком случае иконки будут отображаться ровно по центру экрана:

Подмена картинки для мобильных устройств

Бывают ситуации, когда текст на баннере несет важную информацию, но в мобильной версии выглядит слишком мелким. Единственный выход из такой ситуации – рисовать еще один баннер специально под мобильные устройства. Конечно, можно обрезать и большой баннер, если его размеры позволяют это сделать, нo это может ухудшить восприятие вашей рассылки. Итак, мы получили 2 баннера для мобильной и десктопной версий Вашего письма. Теперь разберемся, что с ними делать.

Есть два пути добавления отдельного баннера для мобильных устройств:

1. Воспользоваться инструкцией ниже;
2. Немного подождать и с новым обновлением eSputnik вы сможете делать это в два клика.

Инструкция

Создаем новую полосу с двумя блоками с изображением. В один загружаем картинку для просмотра на компьютерах, в другой – для телефонов. Письмо примет немного странный вид:

1) Все манипуляции будут проводиться только внутри полосы с картинками. Нам нужно придумать 2 класса: один будет описывать поведение картинки для телефонов, второй для компьютеров. Назовем их mobile-view и desktop-view соответственно.

2) Находим тег, в котором хранится каждая картинка, он будет выглядеть следующим образом: "

3) Переходим во вкладку CSS и по аналогии с пунктом об изменении размера текста ищем строчку @media only screen and (max-width: 600px) {. Прямо над ней добавляем следующий код:

.mobile-view {

     display: none;

 }

Так мы запрещаем отображения элементов с классом mobile-view для компьютеров и приводим письмо к нормальному виду:

Теперь нужно сделать так, чтобы нужный баннер отображался на телефоне. Для этого переходим в самый низ кода CSS и добавляем код:

.mobile-view {

     display: table-cell !important;

  }

 .desktop-view {

   display: none;

 }

Этот код говорит, что элементы с классом mobile-view будут отображаться на мобильном устройстве в обычном режиме, а с классом desktop-view на мобильном отображаться не будут. В итоге мы имеем письмо, в котором для телефона и компьютера подтягиваются разные картинки и читабельность сохраняется на любом устройстве:

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