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

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

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

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

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

 

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

 

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

Добавить комментарий

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