Email-рассылка – это визитная карточка бизнеса в общении с подписчиками. Каждый человек, открывая сообщение, в первую очередь обращает внимание на визуал, а после уже на текст. Структура и наполнение email: графика, иллюстрации, цвета, шрифты – это все играет важную роль в прочтении письма до конца и влияет на выполнение пользователем нужного действия. В этом материале мы делимся рекомендациями для дизайна email-рассылок.
Шаблон
Оформление email-рассылки должно привлекать внимание, быть узнаваемым и повышать читаемость писем. Конечно, сообщение должно быть уникальным, но делать с нуля дизайн каждого письма очень накладно. Мы предлагаем решить этот вопрос с помощью готовых шаблонов, которых у нас более 300.
При выборе шаблона учитывайте наличие элементов, которые могут вам понадобиться (видео, карточка товара, текст и т. д.), – это сделает процесс наполнения письма еще проще. Недостающие блоки можно найти в библиотеке модулей и отредактировать под свой дизайн.
Модули в редакторе eSputnik
Добавив все блоки, которые могут понадобиться в ваших рассылках, вы получите мастер-шаблон – основу большинства будущих сообщений. Его нужно будет просто заполнять контентом, что займет минимум времени при подготовке рассылки.
Если вы решите сделать макет самостоятельно, не забывайте, что каждый элемент письма имеет свои правила верстки. Так, для отступов (между блоками, справа/слева/сверху/снизу) мы рекомендуем использовать одинаковые значения, например по 20, а для выделения элемента – 10 и 20 или 15 и 30 (второе значение кратно 2). В противном случае, если взять хаотичные значения (10,15, 25), письмо будет выглядеть неаккуратно.
Редактор eSputnik работает по принципу drag-and-drop – это позволяет добавлять любые блоки простым перетаскиванием в шаблон. Создавайте разные макеты в зависимости от типа рассылки, времени года, праздника и т. д. Но помните, что в каждом должен оставаться фирменный стиль. Придумайте свою изюминку в дизайне email-письма, которая будет выделять вас среди конкурентов и будет узнаваемой для подписчиков.
Адаптивный дизайн
Всегда думайте о том, как ваше письмо будет выглядеть в мобильной версии. Плохая адаптивность писем портит не только дизайн электронного письма, но и может сделать его бесполезным. Например, кнопки с призывом к действию 16x16 слишком мелкие для того, чтобы попасть на картинку пальцем с телефона.
Напомним оптимальные размеры шаблона для рассылки: десктоп – 600px, мобильная версия – 320px. Чтобы просмотреть письмо с большей шириной, подписчику нужно будет делать горизонтальный скролл, который просто непривычен для email.
С eSputnik вы можете не переживать о корректности отображения ваших рассылок. Наш адаптивный редактор позволяет выбрать любую из структур, настроить адаптивность каждого элемента – и письма будут правильно отображаться на всех устройствах.
Адаптивность в редакторе eSputnik
Header
Хедер – шапка письма, находится над основной картинкой, в нем чаще всего размещают логотип и меню со ссылками на разделы сайта или контакты. Шапка помогает быстро идентифицировать бренд: получатель видит имя отправителя в поле “От кого”, а когда открывает письмо, сразу обращает внимание на логотип. Не перегружайте этот блок данными, чтобы на первом экране поместилась основная мысль сообщения, давайте только важную информацию и используйте качественные изображения.
Идентификация компании в поле отправителя и хедере сообщения
Footer
Подвал письма – элемент письма, до которого не все дочитывают, но тоже важный. Здесь обычно размещают общую информацию (подпись, юридический адрес, соцсети и др. контакты) и ссылку для отписки. Учитывайте, что почтовики могут обрезать футер, если письмо будет слишком длинным.
Тем более не стоит самому прятать возможность отписки, так как получатели будут перемещать письмо в спам, а это негативно скажется на репутации отправителя. Добавляйте в футер действительно важную для подписчика информацию, а ссылки группируйте и делайте удобными для чтения. Например, в нашем редакторе есть готовый блок с кнопками соцсетей, который можно отредактировать так, как вам нужно.
Варианты блока соцсетей
Цвета
Если корпоративный цвет компании очень яркий, например салатовый или красный, не применяйте его для фона, т. к. email будет трудно прочесть. А вот в кнопках призыва к действию их можно использовать. Помните, что большое количество ядовитых оттенков в дизайне письма рассылки отталкивает. Чтобы яркие цвета смотрелись гармонично, применяйте их дозированно для важных элементов, к которым хотите привлечь внимание.
Яркие акценты в дизайне email-рассылки
Ссылки
Ссылки всегда должны быть с анкорами. Не вводите их слишком близко друг к другу: во-первых, это отвлекает от текста, во-вторых, в мобильной версии получателю будет трудно попасть пальцем для перехода по конкретной ссылке.
На изображения лучше также ставить ссылки, т. к. большинство пользователей часто кликает по ним. Кроме того, если в картинках не проставить ссылки, то Gmail будет предлагать пользователям их скачать.
Изображение без ссылки
Адрес электронной почты и номер телефона также оборачивайте ссылками. Если этого не сделаете вы, это сделает почтовый клиент (и со своими стилями, что может повлиять на корректность отображения). Например, часть цифр перенесет на следующую строку. Подробнее о работе со ссылками читайте в этом материале.
Оборачивание телефона ссылкой в редакторе eSputnik
CTA
Кнопки призыва к действию оформляйте в стиле всего письма и бренда. Их можно выделить цветом логотипа компании или сделать контрастными, чтобы они не сливались с общим фоном. Есть также работающие цвета, которые протестированы маркетологами и психологами в ходе исследований. Например, на сайте кнопки могут быть черными, а в рассылке – красными, т. к. они более кликабельны.
Сам призыв кнопки должен быть согласован с заголовком письма. Если у вас всего одна СТА, поместите ее на первом экране, ведь не все пользователи пролистывают рассылку до конца. А в длинное сообщении лучше добавить несколько кнопок. В примере рассылки от Toptop.ru кнопки с разными призывами размещены на первом экране, в середине текста и в конце.
Разные кнопки призыва в письме
Главные и второстепенные кнопки можно сделать в разном дизайне: изменить цвет, свечение, размер, добавить изображения в кнопку, скрыть для десктопа или мобильной версии.
Понять, насколько удачно работает тема письма, использование эмодзи, цифр, изображений, цвета, шрифтов, ссылок, СТА и любых других элементов, поможет А/В-тестирование.
К выводам
При составлении дизайна и верстке писем для рассылки нужно учитывать все составляющие: каждый блок имеет определенную значимость и не должен нарушать общую структуру. Чем меньше отвлекающих факторов, тем выше шансы, что вас правильно поймут.
Не старайтесь добиться совершенства в дизайнерских фишках: то, что они понравились вам, не значит, что они понравятся всем. Точнее, обязательно кому-то они не понравятся и это нормально. Чтобы создать привлекательное во всех смыслах сообщение:
- соблюдайте основные правила создания рассылки;
- помните, что в зависимости от структуры мобильная и десктопная версии писем могут отличаться – делайте сообщения адаптивными;
- учитывайте тренды в дизайне email-писем;
- проводите предварительное тестирование верстки и дизайна письма и отдельных его элементов.
Каким именно будет оформление рассылки, решаете вы. Воплощайте даже самые смелые решения и создавайте стильные, узнаваемые емейлы с помощью широкого и удобного функционала eSputnik!