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

Как включить адаптивность письма?

В первую очередь необходимо в настройках вашего шаблона включить адаптивность. Сделать это можно во вкладке "Оформление" - "Общие настройки":

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

1. Адаптивность картинок

Самая простая функция для любого редактора - адаптивность изображений. Стандартно все изображения адаптивны и корректно отображаются на мобильном экране:

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

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

Чтобы избавиться от такого размытия картинки, необходимо ОТКЛЮЧИТЬ АДАПТАЦИЮ У НЕБОЛЬШОГО ИЗОБРАЖЕНИЯ:

2. Скрытие элементов

Некоторые блоки/картинки/текст и пр. могут быть "лишними" для мобильного устройства. Наша задача - не перегружать первый экран, поэтому в качестве примера скроем изображение в шапке рассылки. Для скрытия необходимо выбрать нужный элемент и перейти в настройки:

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

В итоге адаптированное письмо выглядит следующим образом:

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

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

Чтобы ваши письма были легко читаемыми на всех устройствах, вы можете отдельно настроить шрифты текста и кнопок для мобильной версии.

Настройка доступна в разделе "Общие настройки" - "Адаптивность":

Создавая адаптивные письма с помощью нашего онлайн-редактора, вы можете настроить размер заголовков – то есть задать разные размеры шрифта для собственно текста и для заголовков H1, H2, H3.

Оптимальный размер шрифта для кнопок на мобильном — 18 или крупнее, но не меньше.

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

При создании модулей контента товаров мы можем инвертировать некоторые элементы этих модулей. Обычно мы это делаем, чтобы разнообразить email:

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

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

5. Настройка отступов

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

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

Вы нашли ответ?