Дизайн писем в 2020 году: 10 рекомендаций - Еmail маркетинг | Mailigen
Сервис Mailigen прошел проверку в Роскомнадзоре и полностью соответствует требованиям 152-ФЗ «О персональных данных»

Дизайн писем в 2020 году: 10 рекомендаций

Время чтения: 8 минут

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

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

Как сделать email-рассылки привлекательными и эффективными? Расскажем в статье и приведём хорошие и плохие примеры.

Добавляйте картинки

«Голый» текст в письме — это скучно. Такие рассылки можно отправлять редко, например, когда CEO компании хочет обратиться к подписчикам. Или если у вас текстовый стиль рассылки, как у Мосигры.

Грамотно подобранные изображения добавят сообщению перчинки, зададут тон и помогут передать настроение.

Что важно:

  • если накладываете текст на картинку, проверьте, чтобы он не сливался с фоном;
  • помните о размерах блока: если его ширина 300 px, не используйте картинку шириной 900 px;
  • оптимизируйте изображения, прежде чем вставить их в письмо. В этом помогут сервисы TinyPNG и Squoosh;
  • прописывайте Alt-текст для картинок. Так пользователи поймут смысл сообщения, даже если изображения не прогрузятся.

Используйте гифки

GIF-анимации — хороший способ привлечь внимание. 2020 можно смело назвать годом гифок — они встречаются в рассылках всё чаще.

Что важно:

  • чем меньше весит гифка, тем быстрее она прогрузится во всех устройствах. Тем больше шансов, что она сыграет роль вовлечения, а не вызовет раздражение;
  • собирайте макет в х2 размере: ширина контента 1200px, текст — 32px. В таком случае гифка не «поплывёт» в устройствах даже с самым нестандартным расширением экрана.

Не меняйте шаблон слишком часто

Подписчики привыкают к оформлению писем и соотносят его с образом вашего бренда. Если каждое новое письмо будет отличаться от предыдущего, запомнить вас не удастся. А зачем получать новости от компании, которая не может определиться даже с дизайном рассылок?

Что ещё важно: оформление сайта и письма должно быть выдержано в единой стилистике. Иначе пользователь может не понять, что рассылка в красных тонах пришла от вашей компании, корпоративный цвет которой — синий. Как в примере.

Не оформляйте текст картинкой

С одной стороны, так проще — вы будете уверены, что текст не «поедет». С другой, у такого оформления есть минусы:

  • картинка может не прогрузиться. Причин несколько. Само письмо может быть тяжёлым. Или возникли проблемы с передачей — во многих сервисах картинка подгружается из сервера, где она «лежит». Если в момент, когда пользователь открывает рассылку, упадёт интернет, изображение не прогрузится. Потому делать картинки лёгкими с сохранением качества — правило хорошего тона;
  • если в тексте есть промокод, пользователь не сможет его скопировать и вставить. Придётся набирать вручную — многим лень это делать даже за подарок;
  • дизайнеру придётся всё переделывать, если вдруг обнаружится опечатка в тексте;
  • почтовые сервисы могут отправить в спам рассылку, оформленную картинками, потому что мошенники любят прятать в них спамный текст.
Нельзя скопировать промокд, т.к. это картинка

Подбирайте цвета

Есть много красивых сочетаний цветов — например, фиолетовый с жёлтым, красный с чёрным, синий с жёлтым — которые не стоит использовать в рассылках. Можно, конечно, но тогда будьте осторожны. Потому что, если цвета будут слишком контрастными, текст будет трудно читать и глаза быстро устанут. А ещё почтовики не любят «кричащего» дизайна и кидают такие письма в спам.

Плохо подобраны цвета, письмо похоже на винегрет

Не все умеют подбирать цвета на глаз. Не страшно — помогут тематические ресурсы для дизайнеров. Самые простые и удобные:

  • Adobe Color CC. Помогает подобрать палитру к конкретному цвету. Просто введите значение, и кулер подберёт подходящие цвета и оттенки.
  • Color Hunt. В сервисе бесконечное количество сочетаний цветов. Поможет подобрать идеальную пару.
  • Khroma. Выберите 50 любимых цветов, и Хрома составит палитры, градиенты для работы. Зачем так много? Чтобы сервис не ошибся и предложил то, что вам   нужно.
Прекрасно подобраны цвета

Помните об одной цели для письма

В рассылках правило «чем больше, тем лучше» не работает. Как бы ни хотелось вставить в одно сообщение инфографику, полезные советы, гифки и анонс нового продукта, не делайте этого. Одно письмо — одна цель. Максимум две, например, подборка событий и анонс мероприятия.

Одна идея, кратко, чётко

Плохой пример: письмо обо всём и сразу, никакой сегментации. Кстати, промокод не копируется.

Форматируйте текст

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

Что важно:

  • не используйте сразу все инструменты оформления в одном письме;
  • не верстайте письмо сплошным текстом без абзацев;
  • не используйте больше двух (максимум трёх) шрифтов;
  • берите шрифты, которые «понимают» все сервисы рассылок: Arial, Tahoma, Verdana, Georgia, Times New Roman, Impact, Lucida Grande, Trebuchet, Palatino, Courier или Courier New. Никто не запрещает использовать другие шрифты, но, если конкретный почтовик их не поддерживает, вёрстка может «поплыть»;
  • если в компании есть корпоративные шрифты, используйте их при оформлении надписей на баннере и в тексте, который верстаете картинкой;
  • размер шрифта должен быть не менее 14px;
  • следите, чтобы по всему письму были одинаковые отступы.

Не перегружайте футер

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

Плохо, когда футер превращают в свалку: 

Ссылки на разделы, адрес, правовая информация, политика в отношении обработки персональных данных… Всё это полезно, да, но делает футер в два раза больше самого письма.

Что важно:

  • в футере должна быть видна ссылка на отписку;
  • если используете ссылки, сгруппируйте их по тематикам;
  • добавьте краткую подпись (по желанию).

Добавляйте CTA

В письме должна быть кнопка Call to action, призывающая пользователя выполнить целевое действие: перейти на сайт, оставить отзыв, скачать чек-лист, забронировать номер… Ошибки при оформлении кнопки могут привести к тому, что целевое действие не удастся выполнить.

Что важно:

  • в письме должна быть минимум одна кнопка CTA;
  • если их несколько, первая должна располагаться в первом экране;
  • в тексте кнопки должно быть указано чёткое действие: заказать, купить, посмотреть, скачать;
  • кнопка должна быть яркой. Даже если она оформлена в виде ссылки. Можно даже оформить её гифкой, как сделали Aviasales.
Пример кнопки в письме от Aviasales

Проверяйте вёрстку

Не ленитесь это делать перед отправкой КАЖДОГО ПИСЬМА. Отправьте себе тестовую рассылку.

Бывает, свёрстанное сообщение незначительно отличается от макета. Как в этом примере: в Google Chrome кнопка «расплылась», хотя письмо перед отправкой проверили.

Письмо Mailigen, поехала кнопка

Но случаются и более глобальные косяки. В примере рассылка «разъехалась».

Нужно учесть, что Google Chrome самый капризный. Иногда вёрстка «едет» при разном масштабировании. К примеру, это письмо при 90 и 110% отображается нормально, а при 100% появляются полосы. Исправить не получается.

Что в итоге?

Красивые письма с уникальным дизайном и адаптивом под все устройства легко создать в Mailigen. Попробуйте сейчас, если только планируете заняться рассылками. А если нужна помощь, напишите нам на team@mailigen.ru или позвоните 8 (800) 770-70-23. 

Читайте нас на Яндекс.Дзен


1 звезда2 звезды3 звезды4 звезды5 звезд (2 votes, average: 4,50 out of 5)
Загрузка...
,
, FB
,
, FB