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

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

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

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

Вы хотите увеличить количество конверсий на своем сайте? Многие знают, что дизайн оказывает на это значительное влияние. В этой статье мы поделимся 11 принципами веб-дизайна, которые повышают коэффициент конверсии.

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

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