Cверстать письмо mobile first

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

По данным eMailmonday, примерно 3 из 5 пользователей проверяют электронную почту на ходу с помощью смартфонов. В целом, на мобильные устройства приходится от 26 до 78% всех открытий писем. Все зависит от целевой аудитории, сферы деятельности и продукта, который вы предлагаете.

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

Отчет по рассылке с информацией об устройствах, с которых подписчики читали письмо

Email-маркетологам важно успеть перестроиться под потребности рынка и не просто формально подходить к адаптивности писем, но и сделать этот вопрос приоритетным. Такой подход к созданию рассылок называется mobile first.

Mobile First — это принцип, который подразумевает изначальное создание именно мобильной версии письма. Ей отдается предпочтение перед desktop-версией.

В этой статье мы дадим рекомендации по созданию mobile first рассылок.

Роль адаптивности в email-маркетинге

Согласно опросу Нила Пателя, соучредителя NP Digital, 89% получателей удаляют плохо адаптированное письмо при просмотре на мобильном телефоне, а 27% и вовсе отписываются от рассылки.

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

Для примера создадим письмо, ориентируясь на ПК версию. Вот так оно выглядит на компьютере.

Desktop-версия письма

А вот как это же письмо выглядит на мобильном телефоне.

Mobile-версия письма

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

Как создать mobile-версию письма в конструкторе Unisender

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

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

Переключение рабочей зоны конструктора на мобильную версию

Теперь можно создавать письмо, изначально опираясь на его мобильную версию.

Рекомендации по верстке мобильной версии письма

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

Рассмотрим основные правила верстки мобильной версии письма.

Не делайте письмо слишком длинным

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

Если в ваших письмах есть объемный текст или большое количество категорий товаров, создайте для мобильной версии сокращенный вариант этих блоков со ссылками на нужные разделы сайта (лишние блоки можно скрыть для мобильной версии письма). Это избавит получателей от необходимости бесконечно прокручивать перечень товаров в поисках нужной информации.

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

В письме всего несколько примеров товаров, но вначале есть кнопка, которая ведет в каталог на сайте

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

Расположите кнопки и заголовки по центру

Одна из особенностей мобильной верстки — центрирование контента. Владельцы смартфонов чаще всего используют их одной рукой, из-за чего активный контент письма должен быть равно доступен с любой стороны устройства.

Небольшие части текста и заголовки в письме также желательно центрировать, поскольку это положительно сказывается на визуальном восприятии письма из-за симметричности интерфейса мобильных устройств. Заголовки, списки и кнопки в конструкторе Unisender можно расположить по центру только для мобильной версии письма. При этом на декстопе они могут быть выровнены по-другому.

Абзацы и объемный текст центрировать необязательно.

Сравните два варианта письма, выравнивание контента в одном из них установлено по левой стороне, в другом — по центру.

Пример письма с выравниванием по левой стороне Пример письма с выравниванием по центру

Не используйте большое меню и разделы с множеством категорий

Если у вас в письме есть горизонтальное меню или футер с перечислением отдельных категорий, то из-за небольшой ширины экрана есть вероятность, что они съедут вниз. Это может испортить внешний вид письма и нарушить логику размещения разделов.

Пример мобильной версии письма с открытым меню

Чтобы этого не произошло, добавьте в мобильную версию меню-гамбургер. Для этого в настройках меню укажите свойство «Сворачивающееся меню». При этом на декстопе меню останется прежним.

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

 Выбор сворачиваемого меню в конструкторе писем

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

Пример использования сворачиваемого меню в мобильной версии письма

Обращайте внимание на первоначальный размер изображений

Не все владельцы мобильных устройств для работы с почтой используют специальные приложения или почтовые клиенты, которые учитывают адаптивную верстку. Некоторые пользователи просматривают письма в браузерной версии почты, где изображения (логотипы, баннеры, фоновые изображения) часто отображаются в оригинальном размере. Это может привести к «растягиванию» письма до первоначальной ширины изображения, даже если вы уменьшили его в редакторе.

Пример «растянутого» письма из-за оригинального размера изображения

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

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

Сделайте кнопки и ссылки удобными

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

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

Кнопки лучше размещать по центру письма. Рекомендованная ширина — не менее 45px. Если текст на кнопке короткий и она занимает мало места, добавьте отступы по краям.

Пример письма с удобно расположенной кнопкой

Не добавляйте баннеры, на которых есть мелкие элементы

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

Мобильная версия письма Skysmart

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

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

Как добавить и отредактировать текст в конструкторе

Используйте специальные кнопки

Например, кнопка «Позвонить» при клике с телефона будет перенаправлять клиента на окно набора номера.

использование кнопки «Позвонить» в мобильной версии письма

Если у вас есть call-центр или возможность принимать звонки клиентов, этот инструмент существенно облегчит процесс приема заказов и получения обратной связи.

Как добавить ссылку на телефон

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

Кнопка с переходом на сайт для desktop-версии письма

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

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

Как сверстать адаптивное письмо
Как адаптировать письмо под мобильные устройства
Отчёты: как узнать о поведении подписчиков больше
В каких почтовых клиентах и с каких устройств открывают письма в СНГ
Как работать с блоком меню

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

5
2

Ещё по теме «Как это сделать в Unisender»