Email-дизайн: ТОП-8 рекомендаций для создания идеального письма

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

1. Адаптивный email-дизайн

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

Редактор Stripo позволяет скрывать некоторые элементы письма на мобильных устройствах и одновременно с этим прятать другие элементы на десктопах. Это значит, что вы можете выбирать, какие из элементов будут показаны только на мобильных гаджетах, а какие — только на ПК.

2. Размер письма

Конечно же, высота письма безгранична. Вы можете использовать столько строк, сколько необходимо для отображения всего нужного контента. Но стоит помнить: чем длиннее письмо, тем меньше шансы, что его дочитают до конца.

Общая высота веб-страницы составляет 960 px, и этого, как правило, недостаточно для предоставления всей необходимой пользователям информации, которую нужно донести через email-канал. Увы, от скроллинга не уйти. Обычно в среднем длина писем составляет порядка 1500-2000 px. Этого хватает для размещения контента, и юзерам при этом не трудно сделать 1-2 скролла. Также помните, что на мобильных устройствах, в связи с перестановкой блоков, длина email-шаблона может сильно увеличиться.

Важно отметить: во многих email-клиентах типа Outlook, Apple Mail, Thunderbird есть окно превью с ограниченным размером — 600 px в ширину и 300-500 px в высоту. Они не отображают уменьшенную копию всего письма, но захватывают верхнее его поле с соответствующим размеру окна превью. Поэтому вам следует убедиться, что первые 300-500 px содержат важную и вовлекающую информацию, которая заинтересует пользователя прочитать его до конца.

3. Не забывайте о весе письма

Не нужно говорить громких слов о важности маленького веса письма — даже в нашем современном мире множество людей сталкивается с проблемой плохого интернет-соединения.

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

Хочется также отметить, что вес кода для полного отображения в почтовом клиенте Gmail не должен превышать 102 KB, и этого стоит придерживаться.

4. Разнообразьте стандартные кнопки призыва к действию

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

  • выбор правильного цвета кнопки. Мы знаем, что все элементы письма должны дополнять друг друга, поэтому следует придерживаться выбранной цветовой гаммы. НО, в случае с кнопкой CTA — можно поиграть;
  • выбор правильной формы. Делайте свои кнопки призыва к действию квадратными, закругленными, овальными — все на ваше усмотрение. Согласно многочисленным исследованиям, форма таких кнопок абсолютно не важна;
  • выбор правильного типа кнопок: затененных, CSS-анимированных, со стрелками, жирным текстом в email-дайджестах, с фейковыми триггерами, с добавлением в кнопки картинок.

Так много способов сделать кнопки привлекательными! Не бойтесь использовать любую из перечисленных идей.

5. Повышайте вовлечение с помощью АМР-компонентов и геймификации

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

Так что же можно сотворить с помощью технологии AMP?

  • Запуск квизов.
  • Размещение нескольких баннеров на одном скрине (т. н. карусель).
  • Предоставление актуальных данных в реальном времени — очень важно показывать юзерам самую свежую информацию в своих брендовых дайджестах, приветственных письмах и т. д.
  • Обновление триггеров с подтверждением почтового адреса — почему бы не дать юзерам закончить регистрацию и посмотреть результат этого действия в том же письме?
  • Предоставление клиентам возможности выбирать элементы в письмах.
  • Назначение встреч прямо в письмах.
  • Сбор отзывов.

Звучит прикольно, и это может повысить конверсию, не правда ли?

6. Позвольте всем подписчикам прочувствовать красоту письма

Только представьте, 285 миллионов людей по всему миру имеют проблемы со зрением, даже когда носят очки. Это равно более половине населения Евросоюза и 87% жителей США.

А вы знали, что люди со слепотой и проблемами со зрением используют так называемые скрин-ридеры (VoiceOver для Mac, Microsoft Narrator для Windows, и т. д.), когда хотят прочитать письмо?

Так что же нужно делать, чтобы помочь этой аудитории ощутить все совершенство ваших рассылок?

Давайте начнем с малого. Просто следуйте правилам ниже:

  • размер шрифта должен быть не менее 14px, но 16px более предпочтительны для нормального восприятия письма;
  • избегайте использования зеленого и красного цветов в качестве контрастных. Например, не применяйте зеленый к тексту на красном фоне, и наоборот. То же самое касается цветов, которые путают люди, страдающие дальтонизмом различной формы;
  • никогда не используйте зеленые кнопки на красных картинках и наоборот, иначе некоторые получатели их просто не заметят;
  • всегда указывайте название цвета одежды в скобках — люди могут плохо различать цвета, но могут знать, что красный им к лицу;
  • делайте текст ссылок жирным;.
  • строки темы должны быть краткими и описательными. Иными словами, понятная строка темы отражает общую идею письма;
  • при верстке писем со специальными возможностями стоит использовать элементы хедера типа <h1> и <p> в HTML-коде. Теги <h1>, <h2> будут иметь преимущество над обычным текстом и будут считаны ридером первыми.

Если у вас возникают какие-либо сложности в процессе создания писем, отвечающим всем этим требованиям, всегда можно обратиться напрямую к специалистам Stripo на официальной странице компании в Facebook. Мы с радостью поможем вам создавать рассылки с любовью и заботой обо всех людях.

7. Не рассылайтесь, не протестив.

Не забывайте тестировать письма перед отправкой своим пользователям.

Да, вы вложили все силы и душу в рассылку. Да, она выглядит идеально. Но это же совсем не сложно — проверить ее в самом конце.

Особенно, когда в хороших редакторах есть специальная кнопка с такой функцией. Нажмите ее и точно убедитесь, что письмо вышло супер-пупер.

8. Пользуйтесь шаблонами, чтобы избежать рутины.

Большую часть времени компаниям нужно отправлять очень похожие письма, говорящие о скидках, новых коллекциях, информации о регистрации, о смене пароля и т. п. С большой коллекцией готовых к отправке шаблонов, такой как в Stripo, вы можете отредактировать письмо под себя буквально за пару минут — изменить картинки, описание, цену, — просто делайте все, что позволяет воображение и план продаж. Затем экспортируйте в свои ESP и почтовые клиенты и дайте миру увидеть ваши адаптивные, привлекательные и эффективные рассылки.

0
11 комментариев
Написать комментарий...
Dmitry Spuntik

Вот тут amp.dev google опубликовал один наш пример: https://blog.amp.dev/2020/05/21/stripo-amp-dynamic-email-boost-customer-engagement/ 

Ответить
Развернуть ветку
Сергей Карасюк

Великолепно!!!

Ответить
Развернуть ветку
Данила Епишин

Без кейсов с результатами не все рекомендации убедительны. Например, было бы интересно почитать реальные примеры роста KPI email-маркетинга за счет использования AMP.

Спасибо за материал, в любом случае.

Ответить
Развернуть ветку
Hanna Kuznietsova

Данила,
Спасибо )
Действительно, с примерами убедительнее. 
Мы в начале этого года сделали рассылку на 22К получателей. В рассылке была встроенная форма АМР, т.е. пользователи могли отвечать/ставить оценку/давать отзыв нашей работе прямо в письме. У тех получатели, чей почтовик не поддерживает АМР, в письме была ссылка на стороннюю форму (в нашем случае, Google Form). Результаты рассылки показали, что АМР-форма принесла в 5.2 раза больше ответов.
Более подробно свой кейс мы описывали здесь. Но он, к сожалению, на англ.

Как создавать эти формы, мы описали в своем блоге.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Hanna Kuznietsova

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

А если попробовать сделать выделение и жирным, синим? Тогда ссылка будет замечена всеми :) Если, конечно, жирное выделение не идет в разрез с дизайном...

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Hanna Kuznietsova

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

Безусловно, Ваши синие/голубые ссылки заметят, если они будут на контрастном фоне (к примеру, белом). Конечно же, можно каждый раз проверять рассылки на контрастность через спец инструменты. А можно - выделять жирным. Кому что удобнее... И главное - Вы знаете свою аудиторию лучше всех. Потому только Вы знаете, какие письма им по душе...
Касательно подчеркивания, этого делать не рекомендуется, ибо у некоторых дислектиков текст будет сливаться. Конечно, они смогут распознать такие ссылки. Но есть шанс, что это вызовет у них некоторый дискомфорт.
https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf?mtime=20190409173949

Очень радует, что тема доступности замечена и широко обсуждается.

Искренне желаем Вам успешных рассылок... 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artem Kurganskiy

Ну вы насмешили

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
8 комментариев
Раскрывать всегда