Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Как адаптировать письмо под мобильные устройства

Вы здесь:

Согласно исследованию Hootsuite за 2020 год 50,1% трафика приходится на мобильные устройства. Это значит, что мобильные версии сайтов и писем — обязательное условие высоких конверсий.

Конструктор UniSender позволяет не просто адаптировать письмо под мобильные, а сделать для них отдельную версию письма. Рассказываем, как настроить разные блоки письма, чтобы оно было адаптивным.

Настроить размеры картинок
Свернуть меню
Выровнять карточки товаров
Скрыть блоки в мобильной версии
Настроить кнопку «Позвонить»
Полезные ссылки

Настроить размеры картинок

Ширина и расположение картинок на мобильной и десктопной версии отличаются.

Картинки на мобильной версии должны отображаться логично — не быть слишком большими и помещаться в один экран. Потому их нужно регулировать по размеру.

Чтобы изменить размер изображения в мобильной версии, кликаем по блоку с картинкой.

В свойствах блока есть 3 настройки, которые влияют на отображение картинки.

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

Ползунок показывает размер в процентах и пикселях.

Ползунок показывает размер в процентах и пикселях

Автоширина. Нажимаем — и картинка всегда занимает максимальную ширину. Применяется одновременно и для десктопа, и для телефона.

Картинка занимает 65% от всей ширины письма, но если выбрать «автоширину», она всегда будет занимать 100%.

Картинка занимает 65% от всей ширины письма, но если выбрать «автоширину», она всегда будет занимать 100%

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

Картинка на десктопе занимает 45% ширины, а на телефонах — 100%. Такое возможно, только если выбрать «Полная ширина на мобильном».

Картинка на десктопе занимает 45% ширины, а на телефонах — 100%. Такое возможно, только если выбрать «Полная ширина на мобильном»

Свернуть меню

В конструкторе есть блок «Меню». Он используется для того, чтобы в письме повторить меню сайта. Если не настроить мобильную версию для меню, на смартфоне оно будет выглядеть так:

Меню поломано, пункт «Бесплатные книги» перенесся на вторую строку.

Меню поломано, пункт «Бесплатные книги» перенесся на вторую строку

Чтобы это исправить, заходим в свойства блока «Меню» и включаем «Сворачивающееся меню». Вот как оно выглядит:

Картинки, тексты и кнопки стоят друг под другом.

 

На десктопе меню выглядит по-старому, как список пунктов. А вот на мобильном — сворачивается в аккуратный блок, открываемый по клику

В блоке «Сворачиващееся меню» есть 5 настроек внешнего вида.

  1. Размер иконки можно регулировать, выбрав из выпадающего меню варианты размеров.
  2. Иконка может быть круглая или квадратная.
  3. Цвет полосочек в сворачивающемся меню задается с помощью палитры или HEX-кода в настройке «Цвет переднего плана».
  4. Цвет самого блока сворачивающегося меню задается в настройке «Цвет фона».
  5. Превью блока сворачивающегося меню всегда доступно в блоке настроек. Можно посмотреть, как будет выглядеть этот блок.

Кликаем на «Сворачивающееся меню» и меняем его настройки.

Кликаем на «Сворачивающееся меню» и меняем его настройки

Выровнять карточки товаров

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

Три карточки товаров в ряд. Так они отображаются на десктопе.

Три карточки товаров в ряд. Так они отображаются на десктопе

На десктопе меню выглядит по-старому, как список пунктов.

Картинки, тексты и кнопки стоят друг под другом

Вы можете отключить адаптивность. Тогда блоки не будут вставать друг под друга на мобильном, а будут стоять в ряд. Это можно сделать с помощью настройки «Отключить адаптивность для мобильных устройств» в «Свойствах строки».

отключение адаптивности.

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

Адаптивность отключили, из-за этого кнопки слегка «прыгают».

Адаптивность отключили, из-за этого кнопки слегка «прыгают»

Скрыть блоки в мобильной версии

Некоторые блоки в мобильной версии отображаются некрасиво и занимают слишком много места. Другие же блоки, например кнопка «Позвонить» бесполезны в десктопной версии.

Для этого в новом конструкторе в каждом блоке есть настройка «Скрыть». Она располагается в «Свойствах блока» в самом низу.

В редакторе создаем 2 кнопки.

В редакторе создаем 2 кнопки и для каждой помечаем, где ее скрыть — первую на мобильном, а вторую — на десктопе

Можно выбрать, какие блоки скрыть на ПК или на мобильном. В одну строку можно поставить 2 блока: один отображать только на десктопе, а второй — только на мобильном.

В примере мы так сделали с кнопкой заказа. В режиме предпросмотра видим, что на каждой из версий стоят разные кнопки.

отличие кнопок.

Обратите внимание, на каждой из версий — своя кнопка. А в редакторе их две

Настроить кнопку «Позвонить»

Каждая ссылка при нажатии может работать несколькими способами: вести человека на сайт, перебрасывать к созданию письма, предлагать позвонить или отправить SMS.

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

Чтобы настроить кнопку со звонком, в выпадающем меню «Тип ссылки» выбираем «Позвонить». Если хотим, чтобы при нажатии на кнопку человек переходил на сайт, устанавливаем «Открыть ссылку».

Кнопка «Перейти в магазин» должна вести на сайт магазина.

Кнопка «Перейти в магазин» должна вести на сайт магазина. А в мобильной версии можно добавить ссылку, по которой человек будет сразу звонить менеджеру

Полезные ссылки

Как работать с блоком меню
Как вставить картинку
Как вставить кнопку

Оцените, на сколько вам показалась полезной статья «Как адаптировать письмо под мобильные устройства»
(2)