Посмотрите вокруг: в поезде, в кафе и даже в очереди в гастроном, можно увидеть тех, кто на своих смартфонах активно «зависает» в интернете. Потребители всё чаще используют в своём модном гаджете все возможные функции (иногда даже пытаются выжать из него ещё больше ☺) и популярность мобильной электронной почты всё время растёт. Почти все основные мобильные операционные системы поддерживают HTML и CSS, но есть много странностей и особенностей, о которых желательно побеспокоиться до отправки писем пользователям. В первую очередь, нужно сделать качественную верстку рассылки под мобильные платформы.

О чём следует помнить, составляя email рассылку для мобильных?

Важно отметить, что проблемы просмотра мобильной электронной почты могут быть связаны в первую очередь с браузером, а не устройством или ОС. Клиенты могут использовать любой из десятков популярных устройств на базе Android (Samsung Galaxy, HTC One и т.д.) и любой удобный браузер (Chrome, Opera mini и т.д.). IOS (операционная система на iPhone и IPad) также предлагает различные приложения, хотя они менее популярны, чем родной Mail клиент. Поэтому будет довольно сложно угодить всем, но можно попробовать.

Блокировка изображений

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

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

То же самое письмо, без картинок.

Можно было бы его немного доработать, но в принципе, совсем не страшно.

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

ALT текст

Альтернативный текст — отличный способ для оптимизации изображений в электронной почте. ALT текст даёт пользователю понять, что могло бы быть на изображении.

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

Прехидер

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

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

Шрифты на мобильных устройствах

Каждая мобильная ОС может изменять шрифты в письме, тем самым нарушая общую картину. Для чтения писем на мобильных устройствах лучше использовать шрифт не менее 13px.

Во-первых, очень тяжело читать письмо. У IOS минимальный размер шрифта для чтения почты 13px, все, что меньше — не очень читабельно на экране iPhone. Во-вторых, если почтовик посчитает, что шрифты слишком мелкие — он может автоматически их увеличить, тем самым нарушая структуру письма.

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

Автоматическое масштабирование

В то время как почтовые клиенты Mail.app и Gmail автоматически подгоняют размер письма под размер экрана, большинство браузеров чаще всего показывают только верхний левый угол email письма. Отсутствие автомасштабирования отрезает правую сторону при просмотре и пользователям приходится прокручивать влево и вправо, вверх и вниз, чтобы просмотреть всё сообщение. Адаптивный дизайн, лучше всего решает эту проблему.

Как бы вы ни крутили телефон — письмецо GloryModels примет размер дисплея, структура при этом не ломается.

Прокрутки

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

Небольшие изображения в письмах

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

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

Делайте письмо удобным

Сделайте письмо простым, насколько это возможно. Избегайте длинных форм заполнения данных и всего остального, чтобы не требовалось много печатать. Больше всего раздражает, когда понравилась в письме акция, хочешь перейти по ссылке и появляется окно «Цены только для зарегистрированных пользователей». Да если вы мне прислали письмо, логично, что я зарегистрированный пользователь. Начинается поиск своего пароля, а потом ещё нужно это всё ввести в форму на сайте. В общем, проще отложить письмо или вообще забыть о нём. Всё что вы делаете, делайте лёгким для подписчикам, хотя бы чтобы они видели ваш номер телефона и могли просто позвонить вам сделать заказ.

Допустим, новостная рассылка от Frehser включает удобную навигацию для клиента. Выбираем, нажимаем, получаем:

Но большинство сервисов рассылок не позволяет размещать этот код для массовых рассылок. Зато для простых RSS без табличного оформления это подойдёт.

Призыв к действию

Эта кнопка или ссылка должна быть заметной и удобной для нажатия пальцем. Хотите предложить поговорить с оператором? Дайте подписчикам кнопку для чата. Хотите привлечь больше людей к подписке? Сделайте «Переслать другу» более заметной. Не обязательно делать CTA с выедающими глаза цветами, достаточно выделить её на фоне основного текста.

Не размещайте несколько ссылок близко друг к другу. Если пользователь не сможет нажать по ссылке пальцем несколько раз к ряду — он просто закроет письмо. Просмотрите, как email рассылки выглядят на разных мобильных устройствах — попробуйте открыть письмо и кликнуть на все ссылки. Позаботьтесь и о том, чтобы целевая страница на сайта была адаптирована для мобильной версии.

Вложенные картинки

Из такого красочного и прекрасного письма на IPhone

Письмо в мобильном приложении Gmail на ОС Android превращается...

... в непонятную и странную вещь. После нажатия «Показать картинки» ничего не происходит. Почему-то Gmail решает, что пользователь просто обязан увидеть длинный список прикреплённых файлов. Единственное, что может спасти это письмо — почтовик mail.ru, в котором, практически все письма прогружаются без особых проблем.

Gif изображения

Возьмём хотя бы красочную рассылку от ivi.ru. На IPhone письмо выглядит отлично: дизайн письма сохранился, шрифты читабельны, Супербелка летит размахивая хвостиком.

Но при просмотре того же самомго письма в Google Chrome, Gif изображения могут не прогрузиться вообще, даже после нажатия «показать картинки» и длительного ожидания.

Согласитесь, что разница очевидна.

Контактные данные

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

Письма в виде одной картинки

На IPhone грузится всё, особенно если у читателя быстрый интернет и железные нервы:) Во время нашего «эксперемента» ссылка «Показать картинки» появлялась в почтовике IPhone крайне редко — собственно, где-то на 20 просмотренных писем 1 раз. В остальных случаях Mail свято верил, что он загрузит сам все картинки, если пользователь запасётся терпением.

Вот как выглядело письмо от Мобиллака.

.... после 5-7 минутного ожидания письмо загрузилось и выглядело довольно неплохо.

Возникает справедливый вопрос: а каждый пользователь упорно выжидал бы эти 5 минут? Или сразу же закрыл бы письмо? Раз не появилась ссылка «Показать картинки», логично предположить, что их нет.

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

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

И помните, клиенты просматривают письма на мобильном, чтобы меньше тратить времени на это дома. «Халявный» Wi-Fi не всегда будет оперативным, следовательно у читателя не будет желания сидеть и ждать пока письмо прогрузится. Делайте ваши письма лёгкими, чтобы они быстро загрузились. Так вы получите лучше результаты и сможете легко совершенствовать вашу рассылку. Успехов!;)