Дизайн email-рассылок — это не только про красоту, но и про функциональность. В письмах свои ограничения. Если дизайнер не будет им следовать, письмо отобразится некорректно: картинки будут не в том месте или не покажутся вообще, текст станет гигантским или очень мелким. Письмо станет непривлекательным и отталкивающим и ничего не продаст.
В этой статье мы поговорим о том, что не надо делать в дизайне рассылок, чтобы ваши письма работали.
Не используйте нестандартные шрифты
Стандартные шрифты — это шрифты, установленные на устройствах по умолчанию. Их всего девять:
В списке есть Comic Sans MS, но мы не используем его ни-ког-да. И вам не советуем :)
Если вы будете использовать другие шрифты, они могут замениться в обычный Arial. Изменится начертание, межбуквенное расстояние, и это повлияет на вёрстку и сетку в макете.
Сейчас нормальная практика — использовать Helvetica (стандартный на Mac OS) и Roboto (стандартный на Android). В других клиентах они заменятся на Arial (или то, что поставит верстальщик дополнительным шрифтом). Но если вы провели исследование и большинство вашей ЦА сидит с айфона, это перестаёт быть проблемой. Иногда это оправданный риск ради имиджа, тот же re:Store так делает.
Учитывайте ширину контента
Надо учитывать ограничения почтовых клиентов. Максимальная ширина контента — 600 px, если сделаете шире — он может не уместиться в экран и появится полоса прокрутки. Ширина фона может быть любой — вплоть до 1200 px.
Самая распространённая ширина экрана на мобильных — 320 px. Сделаем шире — могут возникнуть проблемы с корректным отображением и адаптивностью.
Не верстайте всё письмо картинкой
Верстальщик обрадуется простой работе, но есть риск, что картинки в письме не отобразятся или письмо будет долго загружаться из-за большого размера. В итоге на устройстве пользователя оно будет выглядеть так:
Не забывайте о мобильной версии. Письмо-картинку тяжело, а иногда практически невозможно сверстать адаптивно и одновременно позаботиться о читабельности текста.
А ещё советуем не увлекаться фоновыми изображениями, ведь в некоторых почтовых клиентах они не отображаются.
Оптимизируйте картинки в письмах
Сейчас популярно использовать в письмах 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. Не забывайте про экраны с высоким разрешением