{"id":13753,"url":"\/distributions\/13753\/click?bit=1&hash=71c4aec1d0d36c3e02bbee27c7077bb451b2e126ca03b4970b80229e13d4831f","title":"\u0420\u0430\u0437\u0431\u043e\u0440: \u0431\u0440\u0430\u0437\u0438\u043b\u044c\u0441\u043a\u0430\u044f \u0431\u0438\u0440\u0436\u0430 \u0434\u043b\u044f \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u0430","buttonText":"\u0427\u0438\u0442\u0430\u0442\u044c","imageUuid":"ba7ce226-a103-5c8d-a1ed-0b3694458099","isPaidAndBannersEnabled":false}

Дизайн email-рассылок: что делать не надо

Дизайн email-рассылок — это не только про красоту, но и про функциональность. В письмах свои ограничения. Если дизайнер не будет им следовать, письмо отобразится некорректно: картинки будут не в том месте или не покажутся вообще, текст станет гигантским или очень мелким. Письмо станет непривлекательным и отталкивающим и ничего не продаст.

В этой статье мы поговорим о том, что не надо делать в дизайне рассылок, чтобы ваши письма работали.

Не используйте нестандартные шрифты

Стандартные шрифты — это шрифты, установленные на устройствах по умолчанию. Их всего девять:

В списке есть Comic Sans MS, но мы не используем его ни-ког-да. И вам не советуем :)

Если вы будете использовать другие шрифты, они могут замениться в обычный Arial. Изменится начертание, межбуквенное расстояние, и это повлияет на вёрстку и сетку в макете.

Сейчас нормальная практика — использовать Helvetica (стандартный на Mac OS) и Roboto (стандартный на Android). В других клиентах они заменятся на Arial (или то, что поставит верстальщик дополнительным шрифтом). Но если вы провели исследование и большинство вашей ЦА сидит с айфона, это перестаёт быть проблемой. Иногда это оправданный риск ради имиджа, тот же re:Store так делает.

Учитывайте ширину контента

Надо учитывать ограничения почтовых клиентов. Максимальная ширина контента — 600 px, если сделаете шире — он может не уместиться в экран и появится полоса прокрутки. Ширина фона может быть любой — вплоть до 1200 px.

Самая распространённая ширина экрана на мобильных — 320 px. Сделаем шире — могут возникнуть проблемы с корректным отображением и адаптивностью.

Не верстайте всё письмо картинкой

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

Не забывайте о мобильной версии. Письмо-картинку тяжело, а иногда практически невозможно сверстать адаптивно и одновременно позаботиться о читабельности текста.

А ещё советуем не увлекаться фоновыми изображениями, ведь в некоторых почтовых клиентах они не отображаются.

Потерянная фоновая картинка в Outlook

Оптимизируйте картинки в письмах

Сейчас популярно использовать в письмах gif-анимацию и креативные баннеры. Чтобы пользователь точно увидел результат ваших трудов, необходимо оптимизировать изображения для веб — сжать их, чтобы они весили не больше 1 Мб. Это можно сделать через compresspng.com или www.iloveimg.com.

Иногда картинки в письмах на iPhone или Mac немного замылены. Это не значит, что картинки плохого качества. Просто дизайнер не предусмотрел, что вы будете смотреть письмо на устройстве с экраном Retina. Чтобы макет не «плыл», мы выгружаем их из «Фигмы» в х2 размере, то есть ширина контента не 600px, а 1200, текст не 16px, а 32.

Не забывайте делать кнопку контрастной

Получая десятки писем в день, пользователь может прочитать наше письмо по диагонали, заметив только заголовок и кнопку. А это значит, что если нет яркой кнопки — нет конверсии. Важно создать на ней акцент и побудить нажать на неё. При этом пользователь должен понимать, что он получит после нажатия. Грустно, когда он открыл письмо, прочитал, но так и не понял, что должен сделать.

Средняя ширина указательного пальца — 45 px. Чтобы пользователю было удобно нажимать на кнопку, она должна быть примерно такого размера. Но точно не меньше 35 px.

Не отрицайте важность адаптивности

Результаты исследования Adobe показали, что 75% пользователей проверяют почту через смартфон, ещё 26% — через планшет. Поэтому важность адаптации писем под мобильные устройства отрицать нельзя.

Ответы пользователей на вопрос «На каком устройстве вы обычно проверяете почту» (можно было давать несколько вариантов ответа)

Но! Сейчас у большинства современных смартфоном экраны с высоким разрешением. На них удобно читать книги, смотреть фильмы, проверять почту. Если вы забыли об адаптации, но ваше письмо аккуратно свёрстано и контент интересный, пользователь всё равно сможет (и захочет) прочитать ваше письмо.

Шпаргалка по дизайну писем

  • Используем стандартные шрифтов: Arial, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS, Verdana.
  • Картинки адаптируем для веба с помощью compresspng.com или www.iloveimg.com.
  • Вставляем гиф или иллюстрации весом не более 1 Мб.
  • Оптимальная ширина контента для писем — 600 px, фонового изображения — не больше 1200 px. Не забывайте про экраны с высоким разрешением
0
Комментарии
Читать все 0 комментариев
null