Компоненты в дизайне email-рассылок: фон, основа, содержание — Еmail маркетинг | Mailigen
Сервис Mailigen прошел проверку в Роскомнадзоре и полностью соответствует требованиям 152-ФЗ «О персональных данных»

Компоненты в дизайне email-рассылок: фон, основа, содержание

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

Если посмотреть на email письмо в разрезе, то можно увидеть несколько слоев из которых состоит письмо:

  1. Фон письма
  2. Основа письма
  3. Наполнение письма

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

От взаимодействия 3-х частей зависит целостное восприятие контента. Разберем подробно каждую составляющую письма:

Фон письма

Если просматривать письмо в браузере, то фон обычно занимает значительную часть экрана (при условии, что ширина основы письма 600-700 px). Чаще всего его выбирают однотонный и неяркий, чтобы не отвлекать внимания от контента, тем более в мобильной версии фон по краям обрежется совсем. Но довольно часто можно встретить варианты с использованием повторяющихся картинок, узора и даже гиф-анимации. И на этой стадии начинаются проблемы.

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

Использование однотонного фона в рассылках Olive Garden и Amediateka.

А здесь пример неудачного использования фона:

Сочетание паттерна с крупными элементами рябит и отвлекает от содержания письма.

Но, с другой стороны, есть пример Бешеной сушки, где активный ярко-оранжевый фон побуждает к действию, а для их сферы работы — это то, что нужно:

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

Хорошо обыграли использование анимации на фоне Madrobots в предновогодней рассылке: анимация очень ненавязчивая и плавно появляется только раз в 5 секунд.

Попробуйте использовать необычный фон для тематической или событийной рассылки, но знайте меру!

Фон также может состоять из шапки (хедера), основы и подвала (футера). Вы сами регулируете высоту шапки и подвала письма. Они могут быть как узкими, так и занимающими значительную часть первого (последнего) экрана. Компания Кантата использовала фоновую картину хедера для привлечения внимания читателя:

Основа письма

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

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

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

Если всё-таки желание увеличить ширину письма ещё не пропало — тестируйте на максимальном количестве почтовых клиентов!

Чтобы добавить больше разнообразия в письмо можно в какой-либо из блоков основы поставить фоном картинку, текстуру или паттерн. Компания Sokolov успешно использует фоном текстуру бумаги для одного из блоков письма:

Наполнение письма

Наполнение письма — это то, что является ядром рассылки, состоит из текста, картинок, анимации, кнопок/ссылок и видео.

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

Блоки состоят из двух слоев — основа и фон. Например, используйте картинку как фон блока (важно вставлять картинку именно как фон блока, чтобы внутрь можно было вставлять другие элементы), а поверх нее вставьте текстовый блок либо сочетание текстового блока и кнопки. Текст и кнопка в этом случае будут отображаться четче, чем если бы это было пиксельное изображение.

В примерах заголовки и кнопка являются отдельными объектами, а не пиксельной картинкой.

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

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

Экспериментируйте, пробуйте. А если захочется поделиться с нами результатами своих email-кампаний — пишите на [email protected].


Понравился кейс?

Мы поможем его реализовать и у вас! Напишите нам

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

,
, FB
,
, FB