,

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

Smart phone with mobile website concept

Мобильные устройства по своим возможностям приближаются к компьютерам и все больше электронных писем просматривается на мобильном экране. Процент открытий на смартфонах и планшетах по наблюдениям Intelligent Emails составляет от 20 до 40% и показывает положительную динамику, поэтому вопросы оптимизации дизайна становятся все популярнее.

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

Различные версии писем
Можно создавать различные версии письма, чтобы идеально соответствовать всем целевым устройствам. Однако, этот метод, предполагает предварительный запрос подписчика о его предпочтениях.
Эту информацию можно получить, размещая в письмах соответствующие ссылки: “Получать мобильную версию” и “Получать десктопную версию”. Выбранную версию пользователь получит при отправке следующей кампании.
Ofsys позволяет легко реализовать такой механизм, создавая динамические сегменты в зависимости от предпочтений получателя (подробнее смотрите здесь)

Две в одном
Другой вариант – создать дизайн, обеспечивающий комфортное чтение как на десктопных, так и на мобильных устройствах. Но тут возникает серьезная проблема – Верстка HTML рассылки, которая отображалась бы корректно во всех основных почтовых клиентах, может быть долгим и трудозатратным делом. Поддержка даже простого CSS значительно отличается между клиентами и даже между разными версиями одного и того же почтового клиента. Но соблюдение общих рекомендаций для подготовки макета все же позволяет достичь приемлемых результатов:

1. Макет письма

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

2. Кнопки, ссылки, элементы

Удобно ли пользоваться Вашими кнопками и ссылками на тачскрине? Apple предполагает, что удобное пиксельное пространство для выбора элемента 29 × 44. То есть придётся привыкнуть к созданию больших кнопок, чем обычно.
Более важным, чем фактический размер области, может быть пространство вокруг. 10 пикселей между интерактивными элементами должно дать достаточно свободы действий для пальцев.
Важно также помнить, что чаще всего письмо просматривается вертикально, поэтому логичнее располагать кнопки и ссылки под тем контентом, к которому они относятся.
Не забывайте про возможности мобильного телефона, например кнопка click-to-call (мгновенный вызов номера, указанного в письме) позволит узнать все детали Вашего предложения, не посещая сайт.

3. Изображения

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

4. Шрифты

Когда дело доходит до контента, лучше взять пример с детской книги: меньше слов, короткие предложения, крупный шрифт без засечек. Для iPhone и iPad минимальным размером шрифта является 13 px, меньший будет увеличен до нормального читаемого размера. Такая автоматическая подгонка может не угадать с вашим дизайном, поэтому во многих случаях ее рекомендуется отключить:

<body style=”-webkit-text-size-adjust:none;”>

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

@media screen only and (max-device-width: 480px)
{
div, td {-webkit-text-size-adjust:none;”}
}

5. Не останавливайтесь на E-mail

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

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply