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-кампаний является убеждение ваших клиентов совершить целевое действие: купить продукт, зарегистрироваться на мероприятие, сделать благотворительное пожертвование и т. д. и т. п. Этой цели можно достичь с помощью четкого и убедительного призыва к действию в своей рассылке:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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