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

Адаптивный дизайн рассылок: 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

Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

Когнитивные особенности проектирования интерфейсов

Расположенные рядом объекты воспринимаются пользователем как связанные — именно так звучит теория близости. Наряду с другими поведенческими паттернами этот принцип позволяет проектировать удобные, понятные и логичные интерфейсы.

Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

далее →

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

Работа с цветом — важнейший навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а даже небольшая ошибка в создании гаммы доставить много хлопот в будущем. В этой статье специалисты сервиса AskUsers разберут 10 ошибок, которые дизайнеры допускают при работе с цветом на сайте, и расскажут вам, как их избежать. 

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook