Советы по дизайну письма email рассылки

Обновлено:

Прежде чем приступить к вопросу дизайнерского оформления писем, мы просим вас обратить внимание на 2 любопытных факта, касающихся e-mail-рассылок.

  1. В среднем, на просмотр письма подписчик тратит 51 секунду. У вас есть почти минута, чтобы заинтересовать его. Это немало — так что все шансы в вас в руках!
  2. До 70% подписчиков пропускают первый абзац писем рассылки, начиная читать с первого заголовка.

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

Ну теперь — к советам по дизайну!

Рекомендации по дизайну email писем

Мобильный дизайн рулит!

Данные Pew Research Center свидетельствуют: число владельцев смартфонов превышает число владельцев настольных компьютеров и ноутбуков. 

Люди намного чаще стали пользоваться мобильными устройствами. Это значит, надо подумать о тех подписчиках, которые будут читать ваши письма со смартфонов и планшетов. К счастью, сегодня сервисы по дизайну рассылок предлагают массу шаблонов, оптимизированных под мобильные устройства. 

Так выглядит письмо от Арзамас на смартфоне
  • Save
Так выглядит письмо от Арзамас на смартфоне

Но и их тоже нужно выбирать с умом.

  1. Чтобы ваше письмо корректно отображалось на смартфоне, выбирайте шаблоны с одной колонкой и более крупные шрифты (чуть позже мы расскажем, какой их размер использовать).  Контент, размещенный так, легко читать — сразу ясно, где располагается важная информация и какие действия от вас требуются. 
  2. Откажитесь от использования нескольких кнопок CTA: они занимают слишком много места.
  3. Изображения не должны быть слишком маленькими и легко читаться с экранов мобильных устройств.  

Используйте AMP

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

Пример AMP письма

 Ivan Burban
  • Save


Иван Бурбан,
СМО в
Stripo.email. 8 лет в маркетинге, 2 года развивает самый инновационный и быстрорастущий редактор писем в мире 👇


Одним из самых важных моментов для дизайна писем в 2020 году являются АМР письма.

АМР-элементы повышают конверсию рассылок (по нашему опыту в 3 раза).

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

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

Мы сделали первый редактор АМР писем, с которым можно работать без знаний кода, и уже видим более 600 компаний, которые пользуются именно экспортом в AMPHTML

Ширина письма — 600px 

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

Поэтому оптимальными размерами будут:

  • 600px для полноэкранной версии;
  • 320px для мобильной версии;
  • 960-2000рх высота.
ширина шаблона письма — 600 пикселей
  • Save
Ширина письма — 600 рх

Текст/шрифты HTML 

К сожалению, в обозримом будущем использовать внедряемые веб-шрифты в электронных рассылках не получится. Поэтому по-прежнему используйте старые добрые Arial, Verdana, Georgia и другие проверенные шрифты.

Чтобы создать визуальный контраст, используйте следующие размеры:

  • 22 пикселя для заголовков;
  • 12-14 пикселей для основного текста.  

Баланс текста и картинок

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

Отсутствие изображений

Большинство почтовых клиентов блокируют изображения в письмах (если пользователь сам не установит галочку на “отображать”). Это значит, что по умолчанию подписчики не видят ваши изображения! 

Поэтому самый важный контент размещают в заголовке и основном тексте, но никак не на изображениях. Либо размещайте текст на изображении с тегом alt – так надпись будет видна читателю, даже если само изображение будет заблокировано.  

Крупные и заметные кнопки CTA

Использование кнопки в письме это на 25-30% эффективнее ссылки.

Все элементы рассылки разрабатываются чтобы подтолкнуть пользователя к определенному действию. Любой из них должен быть максимально эффективен — это касается и кнопки CTA. 

Заметная кнопка в письме от Нетфликс
  • Save
Заметная кнопка в письме от Нетфликс

Она должна быть заметной и моментально привлекать внимание, но 2-3 слова это максимум для одной кнопки.

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

Представьтесь

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

Представление руководителя компании в письме от eSputnik
  • Save
Представление руководителя компании в письме от eSputnik

Изображения – слева, текст – справа  

Согласно исследованиям, читатели сначала обращают внимание не на сам текст, а на изображение над ним. 

Расположите изображение слева, чтобы оно сразу попалось на глаза — ведь взгляд по странице идет слева направо. Так читатели сначала увидят ваш визуал, а потом сфокусируются на заголовке и основном тексте. 

Паттерн “F”

Его открыл эксперт в области юзабилити Якоб Нильсен (Jakob Nielsen). Он проанализировал перемещение взгляда 1,5 миллионов интернет-пользователей и пришел к невероятному выводу: они не читают текст! По крайне мере, не весь — пользователи пропускают контент, который не считают неважным. 

Тепловая карта куда смотрят глаза на странице
  • Save
Тепловая карта куда смотрят глаза на странице

Слова и изображения в левой части экрана привлекают больше внимания, чем контент справа. В результате, движение взгляда рисует паттерн, напоминающий букву “F”. 

F-паттерн
  • Save
F-паттерн

“Перевернутая пирамида”

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

Один из хороших вариантов — «перевернутая пирамида». 

Перевернутая пирамида  на примерах на письма
  • Save
Перевернутая пирамида на примерах на письма

Располагая контент таким образом, вы постепенно подводите взгляд подписчика к кнопке CTA. В конце сообщения пользователь видит эту кнопку и переходит по нажатии на страницу, где может узнать больше о вашем предложении. Узнаваемость вашего бренда растет, увеличиваются объем трафика на вашем сайте и объем продаж.

Пустое пространство

“В чем его ценность?” — спросите вы. Все просто: оно помогает читателю просматривать и разбивать информацию на легко усваиваемые части.

Своим виртуозным использованием пустого пространства известна Apple. Бренд установил стандарты в области дизайна, к которым стремятся многие компании. 

Минималистичный дизайн письма
  • Save
Минималистичный дизайн письма

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

Задайте настроение при помощи цвета

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

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

Оптимизируйте размер картинок

Сжатие картинок с целью минимизации потребляемого при прочтении письма трафика — хорошее решение, которое поможет охватить рассылкой подписчиков даже с плохим интернетом. Главное не переусердствовать в оптимизации, иначе это значительно ухудшит качество изображения.Избежать этого помогут специальные сервисы — такие как optimizilla.com/ и loveimg.com/ru

Не используйте фоновые изображения

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

Магия анимации

Неужели почтовая рассылка — это одни ограничения? К счастью, нет: для оформления писем можно использовать оригинальные и интересные инструменты. Например, GIF-анимацию.

Но и у нее есть 2 недостатка:

  1. Создание GIF-файла — это кропотливая работа, требующая времени;
  2. Даже самая простая анимация может иметь большой размер.

Тем не менее, GIF привлекает внимание и дает возможность показать какой-то функционал сайта или полезное действие сразу в письме. 

Не забудьте ссылку «Посмотреть в браузере»

Почтовые клиенты блокируют ваш контент и не позволяет пользователю нормально ознакомиться с рассылкой? Ваши читатели должны иметь возможность посмотреть письмо в браузере!  Для этого подготовьте соответствующую версию письма.

Открыть  письмо в бразуере
  • Save
Открыть письмо в бразуере

Ссылки должны быть рабочими

Работают ли ваши ссылки на мобильном устройстве и стационарном компьютере? Ссылка ведет на нужную страницу? Имеет ли она UTM-метку? Понятно ли читателю, что это кликабельная ссылка? Цвет ссылки меняется в разных браузерах?

Также обратите внимание на даты в вашей рассылки. Gmail и Apple часто грешат тем, что автоматически превращают даты в синие кликабельные ссылки. При помощи CSS вы можете вернуть им вид обычного текста. 

Также следите за количеством ссылок — чем их больше, тем больше шансов, что письмо попадет в промо-раздел (если речь о Gmail) или в спам.

… и не вести на подозрительные домены

Ставьте ссылки на сайты, статьи, которым вы доверяете и которые не занесены в чёрный список почтовых систем.

Для этого можете использовать  такие сервисы как MxToolbox, SPAMHOUSE, AntiSpamSniper.

Осторожнее с JavaScript!

Использование JavaScript, ActiveX, внешние CSS стили не очень правильно использовать при создании рассылки —  они могут восприниматься почтовыми клиентами как потенциально опасные.

Видео

Размещая в рассылке видео, человек ждет, что его можно будет увидеть при просмотре письма. Но многие почтовые клиенты (Gmail, Outlook, Thunderbird и другие) не позволяют этого делать.  

С другой стороны, больше половины почтовых клиентов поддерживают HTML5, поэтому вставить видео в письмо не составит никакого труда. Более того, многие сервисы рассылки позволяют добавлять неподвижное изображение с кнопкой «Пуск». При ее нажатии пользователь перенаправляется для просмотра видео из “облака”. Другой вариант — заменить видео GIF-анимацией. 

Также увеличить число кликов можно, разместив миниатюру (thumbnail) видеоролика с кнопкой «Пуск» или тизер видеоролика в формате GIF.  

Футер

Он же “подвал” — нижняя часть сайта, которая тоже может эффективно доносить информацию до пользователей. Что можно размещать в этом блоке?

  • Юридическую информацию

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

  • Ссылки на аккаунты в соцсетях

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

Футер письма от FlixBus
  • Save
Футер письма от FlixBus

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

  • Приложение

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

  • Реферальная ссылка

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

  • Поддержка

Пользователи должны знать, куда они могут обратиться с вопросами, отзывами, критикой и предложениями относительно вашей работы. Добавьте контакты, по которым они могут это сделать (раздел “Контакты” или “Техническая поддержка”). Обратная связь — важнейшее условие эффективного e-mail-маркетинга.

Резюме

Любое письмо в рассылке включает в себя множество элементов, и каждый из них должен быть максимально конверсионным. Дизайн в e-mail-маркетинге призван решить эту задачу.

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

Теперь поговорим о сервисах для имейл рассылок (наша следующая тема).

Полезные сервисы по дизайну email рассылок

reallygoodemails — подборка десятков если не сотен примеров писем. Все структурировано по разделам, инфоповодам и постоянно обновляется.
Pinterest — просто кладезь примеров, достаточно ввести поисковый запрос email templates.


Оставить комментарий

avatar
  Подписаться  
Уведомление о

Начните вводить, то что вы ищите выше и нажмите кнопку Enter для поиска. Нажмите кнопку ESC для отмены.

Вернуться наверх
Copy link
Powered by Social Snap