Во всем мире все больше людей начинает пользоваться смартфонами, растет число владельцев таких устройств и в России — в Москве девайсами пользуется уже больше половины всех сотовых абонентов. При этом лидерами по продажам в нашей стране являются Samsung и Apple. В США у двух главных мобильных платформ почти равенство — 47,7% у iPhone, 47,6% у Android, в Европе Android впереди, а в Японии наоборот, на iOS приходится более 60% продаж.

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

Немного статистики

Из всех 50% процентов открытий писем на мобильных устройствах, большая часть (26%) приходится на iPhone, и только 7% — на Android-девайсы.

Во многом эта разница объясняется тем фактом, что в iOS по умолчанию включен показ изображений, а многие почтовые клиенты на Android их наоборот не показывают. Определить, было ли письмо открыто, можно с помощью специальных «следящих пикселей» — небольших изображений, подгружающихся со стороннего сервера. Если загрузка изображения блокируется, то и информация о том, было ли письмо открыто, не поступает компании, которая его отправила, а значит — в общей статистике возникает перекос.

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

По различным данным, одним из самых популярных типов контента у владельцев смартфонов является… электронная почта!



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

Дизайн писем для «мобайла» — сложных процесс, поскольку существует большое количество устройств и почтовых клиентов, каждый из которых обладает своими особенностями в отображении сообщений. В нативном Android-клиенте письмо может выглядеть совсем не так, как в приложении Gmail.



Нативное приложение Android 4.x (адаптивное) vs Android-приложение Gmail (не адаптивное)

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

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

Существующие ограничения

При верстке писем для iOS и Android важно помнить, что не все мобильные почтовые клиенты обладают одинаковой поддержкой HTML и CSS.

	Media Queries	Блокирование изображений	Текст ALT	Стилизованный ALT Text	Текст превью
Android 4.x (нативный почтовый кьиент)
Android-приложение Gmail
Android-приложение Yahoo! Mail
iOS Mail (нативный почтовый клиент)			*	*
iOS-приложение Gmail			*	*
iOS-приложение Yahoo! Mail

*Изображения включены по умолчанию в iOS, но были вручную отключены в ходе тестировании. В приложении Gmail для iOS отсутствует функция отключения изображений.

К примеру, в iOS и Android приложения в разной степени поддерживают адаптивный дизайн. Для создания адаптивных шаблонов применяется технология media queries, которая совершенно по-разному поддерживается.

Например, в «нативном» почтовом Android-клиенте media queries поддерживаются, однако на устрйоствах Samsung с той же ОС — нет (даже в нативном клиенте). Так происходит, поскольку Samsung заменила «дефолтное» почтовое приложение на клиент собственной разработки. Для того, чтобы сделать письма адаптивными в этом приложении используется техника гибридного программирования.

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

Упрощение контента и дизайна

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

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

Все должно быть большим

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

Неплохим вариантом будет использование минимального размера шрифта равного 14px для текста тела сообщения и 22px для заголовков. Использование размера в 14 пикселей позволит избежать «полоВмки» навигационных элементов в iOS, которая автоматически увеличивает шрифт до минимум 13 пикселей.

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

Защитный дизайн

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

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

Также не следует забывать о работе с текстом ALT, который отображается на месте заблокированного изображения в большинстве таких «агрессивных сценариях». К этому тексту можно даже применять стили, чтобы он эффектно «всплывал».

Оптимизация отображения во входящих

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

Все iOS и Android-приложения, упомянутые выше, поддерживают текст превью (preview text). Это дополнительные пару строчек текста, которые можно использовать, чтобы убедить читателя открыть письмо. Текст превью «подтягивается» из первых нескольких строк основного сообщения в HTML-шаблоне, так что нужно позаботиться о том, чтобы туда не попали служебные фразы вроде «просмотреть в виде веб-страницы» или «не отображается письмо?»

Все нужно тестировать, а потом еще раз тестировать

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

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