16 Янв 2018
Адаптивность писем, картинок, блоков

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

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

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

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

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

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

Адаптивные структруры

 

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

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

Код письма

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

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

 

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

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

Кнопка "Адаптировать"

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

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

Пример перестраивания блоков

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

 

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

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

Скрытие картинок на мобильных

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

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

Пример меню в письме

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

Меню на телефоне

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

 

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

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

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

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

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

Кнопки на всю ширину

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

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

Адаптивность под Gmail

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

Адаптация под гмейл

 

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

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

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

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

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

Отображение шрифтов в письме

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

Адаптивность шрифтов

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

“ .text-m-small {

     font-size: 10pt !important;

 }”

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

Адаптивность под разные устройства


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

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

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

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

Отображение иконок соцсетей

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

Отступы в иконках

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

Центрирование иконок

 

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

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

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

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

Инструкция

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

Подмена изображений в письме

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

2. Находим тег, в котором хранится каждая картинка, он будет выглядеть следующим образом: “<td class=»esd-block-image es-p20b» align=»center»>”. В поле класс прописываем соответствующие требованиям теги и получаем в итоге такой код:

Замена картинок

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” на мобильном отображаться не будут. В итоге мы имеем письмо, в котором для телефона и компьютера подтягиваются разные картинки и читабельность сохраняется на любом устройстве:

Замена картинок

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

Вам понравился материал? Оцените:

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 0 средняя оценка: 0 (Рейтинг: 0%)

С этим читают:

973
4
Даша Зенченко | сентября 5, 2018
1
75
Наталья Устименко | июня 30, 2018
1
1
Кирилл Холопкин | декабря 8, 2017

Смотрите также: