Универсальные советы на все времена и для всех бизнесов.
Помните, что у есть всего три секунды, чтобы удержать внимание подписчика. Если письмо не загрузится быстро, то пользователь его удалит, если начало письма не заинтересует, то человек его закроет, а если оффер будет непонятным или сомнительным — не станет им пользоваться.
Прежде чем прочитать текст, человек замечает визуальные элементы: иллюстрации, цветовую гамму, структуру, форматирование, вёрстку. Если не уделять визуалу достаточно внимания, то вероятность того, что получатель прочитает письмо и совершит целевое действие, резко падает.
Как сделать email-рассылки привлекательными и эффективными? Делимся рекомендациями с хорошими и не очень примерами.
Раз: добавляйте картинки и иллюстрации
Plain-текст в письме — это скучно, только если рассылка не информационная или это такой особый стиль, к которому привыкли подписчики.
Как, например, в некоторых рассылках Invisible, для которых это — скорее фича, чем баг.
Но они вовсю экспериментируют с другими письмами — используют стройную вёрстку и цепляющие иллюстрации, показывают «товар лицом»:
Если есть собственный иллюстратор и узнаваемые персонажи — супер. Используйте их не только на сайте, но и во всех остальных каналах коммуникации.
Например, как делает это подписка «Пакет» от Х5 Group. Вот их персонаж — Пакетик.
Он же встречается и в письмах на главных баннерах и дополнительных блоках.
Важно: картинки и иллюстрации должны дополнять идею письма или блока, поддерживать заголовки и текст. Другими словами, подходить по смыслу.
Вот хороший пример от Еаптеки для письма с брошенной корзиной — в баннере иллюстрация в фирменном стиле с корзиной покупок. Всё сразу понятно.
И ещё один пример от Яндекс.Практикума того, как даже самые минималистичные иллюстрации в тему могут передать идею рассылки и вызвать улыбку.
Что ещё важно
- если накладываете текст на картинку, проверьте, чтобы он не сливался с фоном;
- помните о размерах блока: если его ширина 300px, не используйте картинку шириной 900px;
- сохраняйте в качестве х2, чтобы картинка не мылилась на ретина-дисплеях;
- прописывайте Alt-текст для картинок. Так пользователи поймут смысл сообщения, даже если изображения не прогрузятся.
Два: используйте гифки
GIF-анимация — отличный способ привлечь внимание. В рассылках они встречаются всё чаще и мы настоятельно рекомендуем использовать их для оформления писем.
Плюс анимации в том, что в одном блоке можно показать больше, чем в статичной картинке. Например, Rains часто используют в главном баннере письма гифку, чтобы показать сразу несколько товаров:
А ещё с помощью даже самой небольшой анимации привлечь внимание и добавить эмоций. Например, письма от «Вкусно — и точка» почти всегда с какой-то анимацией в первом экране — и подписчики уже к этому привыкли:
Классика всех новогодних рассылок — падающий снег, как в этом письме от «ДоДо», целиком которое смотрите в следующем пункте статьи.
Что важно:
- чем меньше весит гифка, тем быстрее она загрузится во всех устройствах. Оптимальный размер — до 2,5 Мб.
- собирайте макет в х2 размере: ширина контента 1200px, текст — 32px. В таком случае гифка не «поплывёт» в устройствах даже с самым нестандартным расширением экрана.
Три: не меняйте шаблон слишком часто
Причина простая: подписчики привыкают к оформлению писем и соотносят его с образом вашего бренда. Если каждое новое письмо будет отличаться от предыдущего, запомнить вас не удастся.
Важно: используйте брендбук для разработки шаблона и дизайна рассылок. Фирменные цвета, шрифты, иллюстрации — всё это поможет выстроить связь с пользователями и сохранять единый визуальный стиль во всех каналах коммуникации.
С этой задачей отлично справляется «ДоДо Пицца». Их стиль узнаваем везде благодаря фирменным цветам, персонажам и элементам:
И — двойное комбо — письмо о новогодней коллаборации «ДоДо» с иллюстратором Олей Левиной:
Ниже — пример того, как отличается дизайн сайта от дизайна письма, из-за чего сложно с первого взгляда считать от какой компании пришло письмо.
Четыре: подбирайте цвета
Это рекомендация о том, как следует оформлять письма, даже если у вас уже есть классный фирменный шаблон. Всё равно каждая рассылка уникальна, а её цветовая гамма может меняться в зависимости от темы, идеи или инфоповода.
Если цвета будут слишком контрастными — текст будет трудно читать и глаза быстро устанут. Как и если будет много разных визуальных элементов, потому что тогда глазу будет сложно зацепиться за что-то одно. Вот пример такого письма:
Совет: избегайте «визуального шума», оставляйте в письме больше воздуха, подбирайте цветовые сочетания и не делайте больше двух акцентных цветов.
В подборе цветов помогут тематические ресурсы для дизайнеров:
- Adobe Color CC — помогает подобрать палитру к конкретному цвету;
- Color Hunt — бесконечное количество сочетаний цветов, чтобы подобрать удачные пары;
- Khroma — индивидуальные палитры и градиенты для работы.
Сервисы и конструкторы для дизайна писем
Пять: не оформляйте текст картинкой
Обычно такой приём используют, когда хотят использовать фирменные шрифты на баннере, чтобы быть уверенным, что текст не поедет. Но всё письмо составлять из картинок крайне не рекомендуем. И вот почему:
- картинки могут не прогрузиться: само письмо может быть тяжёлым или возникнут проблемы с передачей данных — во многих сервисах картинка подгружается с сервера, где она «лежит». Если в момент, когда пользователь открывает рассылку, упадёт интернет, изображение не прогрузится;
- при просмотра рассылки не с десктопной версии велик риск, что картинка просто уменьшится, а текст на ней прочитать будет невозможно;
- если в тексте есть промокод, пользователь не сможет его скопировать и вставить;
- придётся переделывать всю картинку, если обнаружится опечатка в тексте;
- почтовые сервисы могут отправить в спам рассылку, оформленную картинками, потому что мошенники любят прятать в них спамный текст.
Совет такой: если можете этого не делать — не делайте.
Шесть: помните об одной цели для письма
В рассылках правило «чем больше, тем лучше» не работает (если это не дайджест). Как бы ни хотелось вставить в одно сообщение анонс нового продукта, три новые акции, полезные советы и инфографику с ростом компании — не делайте этого.
Одно письмо = одна цель. Максимум две: например, подборка событий и анонс мероприятия.
Если цель рассылки — рассказать о новой акции, то посвятите этому всё письмо: анонсируйте промо в главном баннере, расскажите об условиях и закрепите повторным СТА. Можно добавить блок с рекомендациями, чтобы подтолкнуть к покупке — как в этом письме «Золотого Яблока»:
Или вот пример с письмом-опросом от «Пятёрочки» после визита в магазин. Ничего лишнего: только просьба пройти опрос, кнопка и работа с возможными возражениями.
Семь: форматируйте текст
Письмо может быть сколь угодно интересным, но какой в этом смысл, если текст нечитаемый? За этим и нужна типографика.
Сообщение, в котором нет подзаголовков, разделения на абзацы, списков и буллитов, выделения главных мыслей шрифтом или цветом, сложно будет считывать важное и читать «по диагонали».
Посмотрите на короткое письмо от «Тинькофф», в котором почти вся рассылка — текст. Но его легко считывать, потому что есть заголовки, абзацы и пункты. Если бы начало каждого пункта было тоже выделено жирным — было бы ещё лучше.
Совет: если можете написать короче и более ёмко — сделайте это.
Что важно:
- не используйте сразу все инструменты оформления в одном письме;
- не верстайте письмо сплошным текстом без абзацев;
- не используйте больше двух (максимум трёх) шрифтов;
- берите шрифты, которые «понимают» все сервисы рассылок: Arial, Tahoma, Verdana, Georgia, Times New Roman, Impact, Lucida Grande, Trebuchet, Palatino, Courier или Courier New. Использовать другие шрифты можно, но, если почтовик их не поддерживает, вёрстка может «поплыть»;
- если в компании есть корпоративные шрифты, используйте их при оформлении надписей на баннере и в тексте, который верстаете картинкой;
- размер шрифта должен быть не менее 14px;
- следите, чтобы по всему письму были одинаковые отступы.
Восемь: добавляйте CTA и креативные кнопки
В письме должна быть кнопка Call to Action (СТА), призывающая пользователя выполнить целевое действие: сделать заказ, перейти на сайт, забронировать перелёт и так далее — тут уже всё зависит от цели письма.
Что важно:
- в письме должна быть минимум одна кнопка CTA;
- если их несколько, первая должна располагаться в первом экране;
- в тексте кнопки должно быть указано чёткое действие: заказать, купить, посмотреть, скачать — лучше использовать сильные глаголы;
- кнопка должна быть контрастной и заметной. Можно даже оформить её гифкой, чтобы привлечь больше внимания — так делают, например, в Aviasales:
Девять: не перегружайте футер
Подвал письма — важный элемент. Как правило, в нём располагают подпись, краткое объяснение, почему человек получил это письмо, контакты, ссылку на отписку и веб-версию. Можно добавить юридический адрес компании и ссылки на соцсети.
Плохо, когда футер превращается в гигантский блок:
Совет: футер лучше делать одинаковым для всех типов рассылок.
Вот пример простого, но информативного футера от Food.ru:
Даже такой маленький блок — место для уместного креатива. IKRA, например, каждый раз меняет текст под логотипом.
Что важно:
- в футере должна быть видна ссылка на отписку;
- если используете ссылки, сгруппируйте их по тематикам;
- добавьте иконки соцсетей;
- можно оставить контакты или адрес, если это актуально;
- и не забудьте подпись о том, почему подписчик получил письмо.
5 примеров нестандартных футеров для писем
Рекомендация-бонус
После дизайна макета рассылки обязательно проверьте готовую вёрстку — всё ли отображается как задумано: не изменились ли цвета, все ли элементы видны, как перестраиваются картинки, какого размера заголовки, работает ли анимация на кнопках и так далее.
В Mailganer есть встроенный конструктор писем от Letteros, который позволяет собирать адаптивные письма и не переживать за вёрстку. Узнайте об этом больше.
