Адаптивность письма для мобильных устройств уже не уникальная возможность, а часть необходимого функционала, поэтому в Stripo вы можете использовать библиотеку адаптивных шаблонов, которые уже готовы к использованию, и письма на их основе будут корректно отображаться на любом устройстве.
Но часто бывает, что нужно решить нестандартную задачу по отображению на мобильном устройстве. Именно о возможностях адаптации пойдет речь ниже.
1. Адаптивная картинка
Самая простая функция, которую вы можете использовать — “Адаптивная картинка”.
Включив эту опцию, вы обезопасите себя от ненужного горизонтального скролла и неимоверно огромных логотипов. Функция адаптирует картинку под размер экрана и не дает выйти за его границы.
Важно! Если вы хотите, чтобы ваша картинка отображалась и на телефоне, и на компьютере в одном и том же размере — включать “Адаптивность картинки” не нужно.
Еще важно! Если ваша картинка имеет маленький размер — “Адаптивность картинки” должна быть отключена, иначе маленькая картинка растянется на всю ширину письма.
2. Скрытие блоков
Если вам нужно, чтобы какой-то элемент не отображался на мобильном устройстве — работать с кодом больше не нужно — есть простая функция “Скрыть на мобильном устройстве”
Включив эту функцию на одном из блоков вы буквально запрещаете его отображение в мобильной версии письма.
На правом скриншоте показано, как для ускорения открытия письма при медленном интернете была скрыта анимация, которую видно на скриншоте слева.
Однако, скрывать можно не только целые блоки, но и отдельные элементы меню. Для этого функция “Скрыть на мобильном устройстве” была реализована для каждого пункта меню. Таким образом вы можете решать, что показывать на маленьких экранах, а что нет.
3. Настройка шрифтов и кнопок
Отдельно вы можете настроить отображение шрифтов и кнопок для мобильных устройств. Для этого вам нужно:
1. перейти в раздел “Оформление”
2. раскрыть блок “Адаптивность”
Чтобы создать максимально комфортный вид вашего письма, доступно редактирование размера общего текста и заголовков — вы можете задавать отдельно размер основного текста и заголовков H1, H2, H3.
Для кнопок все немного интереснее: тут помимо размера текста вы можете выбрать также отображение кнопки на всю ширину письма и задать нужные отступы.
4. Адаптация под Gmail App
Одним из самых популярных почтовых клиентов для смартфонов является — Gmail App. Разработчики Google стараются сделать использование их приложения максимально комфортным и, как ни парадоксально, но это создает определенные трудности при создании писем вне самого приложения или его веб-версии.
В Stripo вы можете использовать функцию “Адаптировать под Gmail App”, чтобы заранее предотвратить возможные проблемы с отображением вашего письма.
Для этого нужно:
1. перейти в раздел “Оформление”
2. включить переключатель “Адаптировать под Gmail App”
Важно! Использование старых версий Gmail App может привести к некорректному отображению вашей рассылки.
5. Кастомная настройка шрифтов
Не всегда хватает стандартных настроек адаптивности и иногда нужно смотреть в код письма. Но не дайте этим мелочам себя испугать.
Для начала нужно понять, где находится адаптивность в коде. Тут все просто — открываем редактор кода и переходим во вкладку CSS. Тут вам доступна вся таблица стилей, но сейчас самое интересное начинается после строчки “@media only screen and (max-width: 600px) {“ — это и есть начало адаптивности.
Важно! Если вы хотите красивое письмо для телефона — лучше ничего не удалять из этого кода.
В примере нужно добиться вот такого результата:
Проблема заключалась в том, что текст на промокоде и кнопке рядом наследует размер общего текста и при мобильном отображении ломает внешний вид письма:
Решение вписывается всего в несколько строчек кода. Для начала вам нужно добавить к тегу, который содержит текст, класс “text-m-small”, по которому мы поймем, что он применяется к тексту, на мобильном и делает текст меньше.
А во вкладке CSS, сразу после строчки “@media only screen and (max-width: 600px) {“ добавляем следующий код:
“ .text-m-small {
font-size: 10pt !important;
}”
Этот код задает размер текста в 10 пунктов, что позволяет превратить съехавший и некрасивый блок в ровный и без переносов:
6. Регулирование отступов
При добавлении ссылок на социальные сети может случится так, что все ссылки съедут немного вправо или влево. Это случается из-за параметра “Отступы между иконками”:
Отступ добавляется ко всем иконкам и, чтобы отображение социальных иконок не выглядело покосившимся:
Нужно убрать у последней иконки отступ в 30 пикселей вправо:
В таком случае иконки будут отображаться ровно по центру экрана:
7. Подмена картинки для мобильных устройств
Как уже было описано выше, чтобы картинка корректно отображалась на мобильном устройстве, достаточно просто включить пункт “Адаптивная картинка”. Но как быть, если текст на баннере выглядит слишком мелким?
Единственный выход из такой ситуации — рисовать еще один баннер специально под мобильные устройства. Конечно, можно обрезать и большой баннер, если его размеры позволяют это сделать, но качество вашей рассылки и заинтересованность получателей будут выше, если вы постараетесь и нарисуете отдельный баннер.
У вас уже есть два баннера, которые идеально подходят для десктопной и мобильной версии вашей рассылки. Теперь разберемся, что с ними делать.
Есть два пути добавления отдельного баннера для мобильных устройств:
1. воспользоваться инструкцией ниже;
2. немного подождать и с новым обновлением Stripo вы сможете делать это в два клика.
Разберем первый способ. Для начала, как обычно, нужно создать новую полосу и поместить в нее два подряд блока с изображением. В один загружаем картинку для просмотра на компьютерах, в другой — для телефонов.
Письмо примет немного странный вид:
Последующие манипуляции будут проводиться только внутри полосы с картинками. Придумываем два класса — один будет описывать поведение картинки для телефонов, второй для компьютеров. Назовем их “mobile-view” и “desktop-view” соответственно.
Находим тег, в котором хранится каждая картинка, он будет выглядеть следующим образом: “<td class=»esd-block-image es-p20b» align=»center»>”
В поле класс прописываем соответствующие требованиям теги и получаем в итоге такой код:
Дальше все довольно просто — переходим во вкладку 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” на мобильном отображаться не будут.
В итоге мы имеем письмо, в котором для телефона и компьютера подтягиваются разные картинки и читабельность сохраняется на любом устройстве:
Вывод
В семь нехитрых приемов полностью адаптивное письмо готово. В Stripo ведется постоянная работа для упрощения и улучшения этого процесса и в скором времени вы сможете создавать красивые и продающие шаблоны вообще не открывая вкладку кода и количество необходимых шагов для создания адаптивности нестандартных элементов значительно сократится.
