Адаптивный дизайн рассылок: 24 совета

Адаптивный дизайн сайтов и e-mail рассылок становится хорошим тоном. Количество устройств, которые используют люди для доступа в сеть, растет стабильными темпами. Для многих мобильный интернет в первую очередь означает возможность оперативной проверки электронных почтовых ящиков. По миру в целом, 43% всех электронных писем открывается на мобильных устройствах. В России, электронная почта – однозначный лидер списка целей использования мобильного интернета. И количество счастливых обладателей смартфонов неизменно растет: аналитики предрекают, что к концу 2013 года в России будет 79 млн. пользователей этих устройств. Следует ли вам, владельцу интернет-магазина, использующему в своем арсенале инструменты e-mail маркетинга, озадачиться адаптивным дизайном рассылок? Решайте сами. А мы просто дадим 24 совета на эту тему.
Макет рассылки
1. Начинайте разработку макетов и дизайна рассылки с версии для мобильных устройств. В большинстве случаев, проще сначала сделать вариант для маленького экрана и от него «танцевать» к экрану большому. При этом, мобильная и обычная версии могут значительно отличаться друг от друга в том, что касается контента, функционала, навигации. И это нормально.
2. Упрощайте навигацию. Если в стандартный вариант рассылки вам удалось красиво ( с точки зрения дизайна) вписать дерево категорий, это не значит, что ему место в мобильной версии. Лучше отдать предпочтение самому главному сообщению, чем захламлять рассылку ссылками, которыми вряд ли кто-нибудь воспользуется. Также прикиньте, нужны ли в мобильном варианте кнопки соц. сетей и футер.
3. Используйте одну колонку. Верстайте мобильную версию рассылки в одну колонку. Так вы обеспечите простоту восприятия сообщения при его просмотре на устройстве, ориентированном вертикально. Любой контент, обычно размещаемый в две или три колонки, с некоторыми упрощениями и сокращениями вполне можно уместить в одну. Это будет выглядеть гораздо профессиональнее и удобнее для пользователя
Стиль рассылки
4. Используйте читабельный шрифт. Речь идет не просто о шрифте без засечек, а шрифте размером 13 пикселей минимум (это минимальный размер шрифта iPhone). Шрифт более мелкого размера может быть «насильно» увеличен мобильным клиентом эл. почты, что негативно отразится на верстке и дизайне.
5. Используйте высококонтрастные гаммы. Мобильные устройства могут использоваться в условиях низкой освещенности, так что высокий контраст между фоном и контентом заметно облегчит чтение мобильной версии рассылки.
Контент рассылки
6. Начинайте с самого важного. Видимая область на мобильных устройствах значительно меньше, чем на мониторах, так что при проектировании дизайна рассылки — все самое важное следует выносить вверх. Кроме того, вычитывая свое сообщение, подумайте, сподвигнет ли ваш первый призыв читателя к тому, чтобы елозить пальцем по экрану и читать ваше письмо дальше.
7. Избавьтесь от вступлений. Шапка с логотипом и т.п. – необязательные элементы дизайна в мобильной версии. Обычно они занимают много места в теле рассылки, не неся при этом самого важного (см. выше).
8. Пересмотрите набор и количество товаров. Если обычно вы включаете в письмо множество товаров (новинок, скидочных и т.п.), для мобильной версии стоит сделать выборку «самых-самых».
9. Используйте тексты и более лаконичный дизайн. В обычную версию рассылки можно вставить красивую картинку, которая будет призывать получателя к требуемому действию. Мобильная версия требует замены такой картинки на заманчивый и лаконичный текст, так как во многих имейл-клиентах показ изображений в письмах отключен по умолчанию.
10. Ориентируйтесь на текстовую версию. Приступая к дизайну сообщения, верстайте его так, чтобы оно было понятным и без загрузки изображений. Как отмечалось выше, часто клиенты не загружают их без разрешения пользователя (это касается не только мобильной версии).
11. Модифицируйте изображения. Речь идет не об уменьшении картинок, а об удалении лишнего, выборе самого подходящего фрагмента изображения. Простое уменьшение может привести к тому, что картинка потеряет свой смысл, станет непонятной.
12. Оптимизируйте размер (вес) изображений в рассылке. Объем картинок в килобайтах имеет большое значение, когда речь идет о мобильной версии письма. Далеко не везде пользователи наслаждаются высокими скоростями 3G. А многие вообще выходят в сеть только через wi-fi, причем гостевой, который редко радует скоростью. Дизайн может оказаться менее важным чем скорость загрузки. Не забывайте также, что многие пользователи платят за интернет.
13. Добавьте изображениям резкости. Экраны новых устройств – в частности, retina – требуют от картинок большой резкости. Кроме того, даже на обычных экранах ввиду их небольшого размера четкие изображения смотрятся лучше.
14. Избавьтесь от анимированных GIFов. На мобильных устройствах они не работают. Да и для дизайна десктопного варианта рассылки это черезчур.
Призывы к действию
15. Делайте дизайн кнопки крупными. Как минимум – 44 на 44 пикселя (согласно рекомендациям от Apple). Иначе попасть в них пальцем будет непросто.
16. Не бойтесь белого пространства в рассылке. Ссылки и кнопки лучше размещать подальше друг от друга, и обрамлять их белой пустотой, чтобы ими было проще воспользоваться.
17. Делайте кнопки еще больше! В рамках разумного, конечно.
18. Учитывайте горизонтальную ориентацию. Размещая кнопки и ссылки, которыми в идеальном сценарии должны воспользоваться получатели рассылки, учитывайте тот факт, что определенная часть пользователей будет просматривать ваше письмо на мобильном устройстве в горизонтальной его ориентации.
19. Размещайте контент и кнопки/ссылки логично. Каждая кнопка и ссылка – призыв к действию. Но сам по себе такой элемент может не сыграть так, как надо. В этой связи следует разъяснять объясняющий и мотивирующий контент в непосредственной близости от кнопок и ссылок, к которым он логично относится.
20. Не экспериментируйте без надобности. Например, ссылки должны выглядеть как ссылки, иначе как получатель письма догадается, что прикосновение к той или иной фразе может привести его в магазин?
21. Прописывайте текст к кнопкам. Кнопки это картинки, и без текста в режиме просмотра без изображений они просто исчезнут.
22. Учитывайте в дизайне рассылки функции мобильного телефона. Например, click to call, то есть звонок по касанию к номеру телефона непосредственно в письме.
23. Ставьте ссылку на мобильную версию интернет-магазина. Иначе поход пользователя на ваш сайт может закончиться, не успев начаться.
24. Автоматизируйте. Например, если в вашем письме фигурирует промо-код, применяйте его сразу, как только пользователь переходит в ваш интернет-магазин из мобильной версии письма.
По мотивам материала 24 Tips for Responsive Email Design