Мобильные телефоны прочно закрепились в статусе основного средства для приема и передачи информации. Согласно исследованию Hootsuite, 50,1% трафика приходится на мобильные устройства, и их доля продолжает расти. Это значит, что адаптация контента под мобильные — обязательное условие высоких конверсий.
По данным eMailmonday, примерно 3 из 5 пользователей проверяют электронную почту на ходу с помощью смартфонов. В целом, на мобильные устройства приходится от 26 до 78% всех открытий писем. Все зависит от целевой аудитории, сферы деятельности и продукта, который вы предлагаете.
В Unisender вы можете посмотреть, сколько ваших подписчиков читают письма с мобильных устройств. Для этого нужно открыть отчет о рассылке и перейти в раздел «Поведение получателей».
Email-маркетологам важно успеть перестроиться под потребности рынка и не просто формально подходить к адаптивности писем, но и сделать этот вопрос приоритетным. Такой подход к созданию рассылок называется mobile first.
Mobile First — это принцип, который подразумевает изначальное создание именно мобильной версии письма. Ей отдается предпочтение перед desktop-версией.
В этой статье мы дадим рекомендации по созданию mobile first рассылок.
Роль адаптивности в email-маркетинге
По данным исследования Adestra, до 50–75% получателей удаляют письмо, если оно некорректно отображается на мобильном устройстве или не адаптировано под смартфоны.
Если значительная часть подписчиков читает ваши письма на смартфонах, нужно уделять особое внимание мобильной версии рассылки.
Для примера возьмем письмо, ориентируясь на ПК версию. Вот так оно выглядит на компьютере.
А вот как это же письмо выглядит на мобильном телефоне.
Такое письмо не располагает к взаимодействию: отступы кажутся слишком большими, видна лишь часть фонового изображения, съехал текст. Это может повлиять как на лояльность клиентов, так и сказаться на результатах рассылки. Поэтому важно обращать внимание на мобильную версию письма при верстке.
Как создать mobile-версию письма в редакторе Unisender
Редактор Unisender автоматически создает адаптивную верстку для ваших писем. Перейдите на вкладку «Стили» — «Стили письма» и проверьте переключатель «Адаптировать письмо в моб. устройствах». Если он включен, ваши письма автоматически подстроятся под любой экран, сохраняя читаемость и дизайн.
Обратите внимание:
Функция доступна только в PRO-режиме для писем, созданных в визуальном редакторе с использованием готовых блоков. Если письмо импортировано из стороннего редактора или написано на HTML, опция будет недоступна.
Теперь можно создавать письмо, изначально опираясь на его мобильную версию.
Рекомендации по верстке мобильной версии письма
При создании письма для мобильных устройств нужно учитывать их особенности и требования к контенту. У телефона дисплей значительно меньше, чем у компьютера. Поэтому важно следить, чтобы все значимые элементы письма были легко различимы, читаемы и доступны для взаимодействия даже с небольших экранов.
Рассмотрим основные правила верстки мобильной версии письма.
Не делайте письмо слишком длинным
Контент на мобильных устройствах ограничен небольшим размером экрана, из-за чего его отображаемая часть будет меньше, чем на компьютерах.
Если в ваших письмах есть объемный текст или большое количество категорий товаров, создайте для мобильной версии сокращенный вариант этих блоков со ссылками на нужные разделы сайта (лишние блоки можно скрыть для мобильной версии письма). Это избавит получателей от необходимости бесконечно прокручивать перечень товаров в поисках нужной информации.
В письме всего несколько примеров товаров, но вначале есть кнопка, которая ведет в каталог на сайте
Расположите кнопки и заголовки по центру
Одна из особенностей мобильной верстки — центрирование контента. Владельцы смартфонов чаще всего используют их одной рукой, из-за чего активный контент письма должен быть равно доступен с любой стороны устройства.
Небольшие части текста и заголовки в письме также желательно центрировать, поскольку это положительно сказывается на визуальном восприятии письма из-за симметричности интерфейса мобильных устройств. Заголовки, списки и кнопки в конструкторе Unisender можно расположить по центру только для мобильной версии письма. При этом на декстопе они могут быть выровнены по-другому.
Абзацы и объемный текст центрировать необязательно.
Сравните два варианта письма, выравнивание контента в одном из них установлено по левой стороне, в другом — по центру.
Не используйте большое меню и разделы с множеством категорий
Если у вас в письме есть список или футер с перечислением отдельных категорий, то из-за небольшой ширины экрана есть вероятность, что они съедут вниз. Это может испортить внешний вид письма и нарушить логику размещения разделов.
Чтобы этого не произошло, добавьте в мобильную версию «AMP-аккордеон».
Как создать AMP-письмо в новом редакторе
В результате меню на мобильном устройстве будет свернуто в раскрывающееся меню, при нажатии на которое откроется горизонтальный список.
Обращайте внимание на первоначальный размер изображений
Не все владельцы мобильных устройств для работы с почтой используют специальные приложения или почтовые клиенты, которые учитывают адаптивную верстку. Некоторые пользователи просматривают письма в браузерной версии почты, где изображения (логотипы, баннеры, фоновые изображения) часто отображаются в оригинальном размере. Это может привести к «растягиванию» письма до первоначальной ширины изображения, даже если вы уменьшили его в редакторе.
Чтобы такого не происходило, добавляйте в письма изображения уже обрезанные до нужного размера.
Как создать креативы для рассылок в конструкторе писем
Сделайте кнопки и ссылки удобными
Кнопки и ссылки в письме должны быть удобными, чтобы у подписчиков не возникало трудностей с переходом на сайт.
Не делайте текст ссылки слишком коротким: она должна быть заметной, а её размер достаточным для нажатия. Если нужно добавить несколько ссылок, разделите их текстом или другими блоками, чтобы исключить возможность случайного перехода.
Кнопки лучше размещать по центру письма. Рекомендованная ширина — не менее 45px. Если текст на кнопке короткий и она занимает мало места, добавьте отступы по краям.
Не добавляйте баннеры, на которых есть мелкие элементы
Любой текст в письме должен быть легко читаем на устройстве с любым размером экрана. Текстовые блоки адаптируются под мобильное приложение, но элементы, размещенные на баннере, нет. Сам баннер в мобильной версии письма уменьшается до размера экрана устройства, поэтому все детали на нем становятся в несколько раз меньше.
Рассылка хорошо выглядит на компьютере, но в мобильной версии баннер становится меньше, поэтому часть текста плохо читается
Поэтому при создании баннера делайте текст и детали на нем крупнее, чтобы они были легко различимы на смартфонах. Всю объемную информацию лучше перенести в отдельные блоки.
Используйте специальные кнопки
Например, кнопка «Позвонить» при клике с телефона будет перенаправлять клиента на окно набора номера.
Если у вас есть call-центр или возможность принимать звонки клиентов, этот инструмент существенно облегчит процесс приема заказов и получения обратной связи.
В версии для компьютера кнопка «Позвонить» будет вести на выбор приложения и, вероятнее всего, будет проигнорирована получателями. Поэтому лучше скрыть эту кнопку для ПК версии письма, а вместо нее добавить кнопку «Перейти на сайт».
В конструкторе писем вы можете создавать рассылки, изначально ориентируясь на то, как они будут выглядеть на телефоне. Это позволит еще на этапе верстки избежать проблем с отображением письма на мобильных устройствах, улучшить внешний вид и юзабилити рассылки и в результате повысить ее показатели.
Полезные ссылки
Новый конструктор писем: основные возможности и особенности
Как создать и отправить рассылку в новом редакторе
Как адаптировать письмо под мобильные устройства
Как добавить подстановку для персонализации рассылки
Как изменить внешний вид письма за пару кликов
