Дизайн email-рассылок: главные правила и тренды 2022

Дизайн email-рассылок: главные правила и тренды 2022

Продуманный дизайн выделяет ваши email-рассылки на фоне остальных, делает их запоминающимися. Но кроме этого, он выполнят задачу поважнее – помогает достичь цели письма: продать товар или услугу, мотивировать зарегистрироваться на мероприятие, информировать о каком-то важном событии. А еще правильный дизайн делает электронное письмо простым для прочтения, акцентирует внимание на призыве к действию и даже помогает сообщению не попасть в спам.

В статье рассказываем о правилах создания не просто красивого, но работающего email-дизайна. А еще показываем 5 трендов в дизайне рассылок 2022 года с примерами.

Дизайн рассылки: правила

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

Шаблон письма

1. Главное в начало

Агентство Litmus в 2021 году проанализировало 8 млрд открытый электронных писем и выяснило, что в среднем пользователь читает письмо 10 секунд, а еще в 2018 читал 13,4 секунд.

Вывод простой – ставьте главное из сообщения в начало, на первый экран. Как правило, это выжимка из содержания текста, CTA (призыв к действию) и картинка для привлечения внимания.

Интригующая картинка и краткая текстовая выжимка из письма – идеальное начало письма от Секрета Фирмы
Интригующая картинка и краткая текстовая выжимка из письма – идеальное начало письма от Секрета Фирмы

2. Особое внимание верстке и адаптивности

Дизайн рассылки без HTML невозможен. С грамотной версткой письмо удобнее читать – все элементы стоят в правильном порядке, ничто не отвлекает. Поэтому уже на этапе создания шаблона подумайте, насколько гармонично это будет смотреться в верстке.

А еще, по статистике последних лет, примерно половину электронных писем открывают с мобильных. Поэтому важно не просто правильно сверстать шаблоны, но и адаптировать их для экранов телефонов.

Вот в письме от Couchsurfing верстка слегка съехала – синяя строчка не в одной линии, слева меньше отступ от края, чем справа
Вот в письме от Couchsurfing верстка слегка съехала – синяя строчка не в одной линии, слева меньше отступ от края, чем справа

Для верстки писем, которые хорошо будут смотреться на всех экранах, можно обратиться к HTML-верстальщикам. Но проще всего прогнать письмо через сервис email-маркетинга.

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

3. Не больше 1-2 колонок

Чем меньше колонок с контентом в электронном письме, тем проще его воспринимать. Поэтому 1-2 обычно достаточно. Исключение – подборки с товарами. Там можно использовать 3-4 колонки.

Трехколоночная сетка в письме PichShop
Трехколоночная сетка в письме PichShop

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

Вот так выглядит чтение по F-паттерну. Источник: nngroup.com
Вот так выглядит чтение по F-паттерну. Источник: nngroup.com

4. Фирменные цвета

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

Фирменные цвета можно использовать даже как фон или рамку письма. Главное – чтобы это было читабельно.

OZON часто использует фирменные цвета в CTA
OZON часто использует фирменные цвета в CTA

5. Акценты на главном

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

Минималистичный акцент на новости, выраженный цветом. А еще это ссылка – мотивирует перейти на канал
Минималистичный акцент на новости, выраженный цветом. А еще это ссылка – мотивирует перейти на канал

6. Размер шаблона

По данным, StatCounter, самый популярный размер шаблона на десктопе сейчас– 1920 на 1080 пикселей, на мобильном – 360 на 640. Но в то же время не все почтовые клиенты отображают письма корректно. А если и отображают, в письме при таком размере шаблона может появляться горизонтальный скролл – это неудобно.

Поэтому лучше использовать стандартную ширину – 600 пикселей, с которой работал еще Microsoft Outlook и которая доступна остальным почтовым клиентам. Высота шаблона не ограничена, но чаще всего выбирают 1500-2500 пикселей. При этом высота одного экрана – 700-1000 пикселей.

Теперь пройдемся по основным элементам письма. Начнем с шапки.

Шапка

1. И снова – фирменные цвета

Шапка – верхняя часть письма перед текстом. Она задает настроение и вызывает ассоциации с отправителем. Часто компании используют одну шапку для всех рассылок.

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

Фирменный цвет в шапке от Яндекс Афиши
Фирменный цвет в шапке от Яндекс Афиши

2. Минимум информации

Шапку не надо перегружать лишней информацией. Эффективнее всего использовать здесь:

  • Логотип – покажет, от кого письмо
  • Слоган – создаст ещё одну ассоциацию с компанией
  • Меню сайта – помогут быстро перейти в нужный раздел сайта
  • Ссылку на браузер – поможет, если письмо не откроется в почте

Ссылка на браузерную версию в шапке от издательства МИФ
Ссылка на браузерную версию в шапке от издательства МИФ

Изображения в шапке лучше ограничить логотипом и иконками.

Делайте шапку сдержанной. Ведь ее главная задача – показать от кого пришло письмо и мотивировать начать читать, а не отвлечь от основной информации.

Текст

1. Абзацы и подзаголовки

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

2. Акценты на важных мыслях

В хороших письмах важную информацию (оффер, сроки действия акции, призывы что-то сделать, анонс перед самим текстом) специально выделяют. Это нужно для того, чтобы клиент не потерялся в содержании, а сфокусировался на смысле. Выделять можно шрифтом или цветом, ставить в рамку. Главное – чтобы было заметно.

Акцент на начале письма от Бегущего города
Акцент на начале письма от Бегущего города

3. Шрифт и начертание

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

  • Антиква (с засечками) – Times New Roman, Georgia, Palatino
  • Гротеск (без засечек) – Helvetica, Arial, Verdana

Антиква больше подходит для длинных писем, гротеск – для коротких.

Вот так выглядит антиква и гротеск. Источник: meduza.io
Вот так выглядит антиква и гротеск. Источник: meduza.io

Для письма лучше использовать один шрифт – например, Helvetica. Акценты при этом делать начертанием (курсивным, жирным и подчеркнутым), цветом, размером. Или использовать два шрифта – например, Helvetica и Times New Roman.

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

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

4. Размер шрифта и интервал

Оптимальный размер шрифта (кегль) в email-дизайне – 12 рх. Если у вас аудитория, которой сложно читать, можно делать 16 рх, но не больше, чтобы письмо было удобно читать. При этом кегель в заголовках, подзаголовках, CTA стоит сделать больше, а в футере – меньше.

Межстрочный интервал – 1,5-2. Так строчки не слипнутся друг с другом и сами письмо не растянется.

5. Цвет текста

Классический вариант – черные буквы на белом фоне, нестандартный – белые буквы на черном. Сейчас второе становится трендом в дизайне писем для email-рассылок. Обычно бренды используют этот вариант в Черную пятницу или Хэллоуин.

Белое на черном в рассылке от издательства МИФ
Белое на черном в рассылке от издательства МИФ

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

Призыв к действию (CTA)

1. Самый заметный элемент в письме

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

Поэтому хорошо, когда кнопки выделяются на фоне остального контента в письме. Для кнопки можно делать отдельный цвет, выделять ее размером и даже анимировать. А вот злоупотреблять CTA-гиперссылками не стоит – это похоже на спам.

Заметная кнопка от GeekBrains. Она не только выделена цветом, но и анимирована – стрелка двигается
Заметная кнопка от GeekBrains. Она не только выделена цветом, но и анимирована – стрелка двигается

2. Контрастные цвета

Обычно в кнопках CTA используются или контрастные цвета, или насыщенный цвет с белым, или блеклый цвет с черным. Это еще сильнее привлекает внимание. Хороший вариант – если фирменные цвета компании контрастны. Они идеально подойдут для кнопок.

3. Первый и последний экран

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

  • На первом экране. Ставят после 1-2 абзацев текста или прямо на баннере. Кнопку видно сразу, без скролла – это важно. Так клиент сразу понимает, что от него нужно, и, если интересно, переходит по ссылке.
  • На последнем экране. Ставят перед последней фразой в письме или перед футером. Так дочитавший письмо до конца получатель понимает, что ему интересно предложение и сразу переходит по ссылке.

В целом, если текст объемный, достаточно 2-3 кнопок CTA. Если это подборка товаров – кнопки можно ставить прямо в карточках.

Кнопки CTA после каждой категории товаров от Boardriders
Кнопки CTA после каждой категории товаров от Boardriders

4. Понятный призыв к действию

Люди привыкли к простым призывам к действию, которые:

  • Содержат глагол в начальной форме (перейти, зарегистрироваться)
  • Состоят из 1-3 слов (перейти на сайт, зарегистрироваться на вебинар)

Это универсальная формула – подходит для всех. Другие форматы (длинные или замудренные CTA) надо тестировать на аудитории. Но всегда важно, чтобы призыв к действию оставался понятным – то есть клиент осознает, что получит, если перейдет по ссылке.

Картинки и баннеры

1. Ограниченное число картинок

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

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

Оптимально считается использовать в письме 80 % текста и 20 % картинок. Или 60 % и 40 %. Почти всегда этого достаточно, чтобы письмо было привлекательным и чтобы спам-фильтры из-за большого веса картинок его не забраковали. Исключение – подборки товаров, где картинки добавляют к каждому товару или категории для наглядности.

Фото помогают Pull&Bear показать товар с разных сторон и в разных ситуациях
Фото помогают Pull&Bear показать товар с разных сторон и в разных ситуациях

2. Баннер в начале

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

Баннер в начале письма от PichShop
Баннер в начале письма от PichShop

3. Нужный размер

Самая частая высота баннера или картинки –  300-500 пикселей, а ширина равна ширине письма – стандартно 600 пикселей. Ориентируйтесь на то, чтобы и картинка, и баннер помещались на один экран.

4. Вес картинок

Оптимальный вес картинки, баннера и любого другого графического изображения – 200 кб, так они будут загружаться всего секунду. 1 Мб изображения в email-рассылках будет загружаться 5 секунд. Поэтому, чтобы все загружалось быстро, пользуйтесь бесплатными сервисами, которые сжимают картинки. При этом вес самого письма без учета картинок должен быть не больше 100 Кб.

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

5. Alt-атрибут

Атрибут alt – это текстовое описание изображения. Оно выручает, если картинка не прогружается в почте, так часто бывает в Microsoft Outlook. Также текстовое описание помогает, когда пользователь отключает картинки, чтобы, например, сэкономить трафик.
Alt прописывают при HTML-верстке письма. В коде достаточно прописать, что изображено на картинке. Например, пейзажи Крыма. Если это баннер с предложением для клиента – нужно прописать и предложение, а не только описать картинку.

Футер (подвал)

1. Ссылка на отписку – всегда

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

Футер – самое логичное место для ссылки на отписку. Человек интуитивно понимает, что техническая информация, в том числе и про отписку, будет в конце письма. И к тому же, если человек дочитает текст до конца, и он ему не понравится, по ссылке внизу будет удобно отписаться.

Ссылка на отписку в футере Секрете Фирмы
Ссылка на отписку в футере Секрете Фирмы

2. Три интерактивных элемента

Подвал – это еще и способ стать ближе к клиенту, завоевать его доверие, поэтому здесь уместно разместить:

  • Ссылки на социальные сети – покажут, что компания готова общаться с подписчиками
  • Подпись компании – докажет, что в компании работают живые люди
  • Кнопка «‎поделиться» – мотивирует человека поделиться, если контент окажется виральным

Подпись и ссылки на соцсети в футере школы «Всем Арт‎»
Подпись и ссылки на соцсети в футере школы «Всем Арт‎»

3. Блеклое оформление

Несмотря на то, что в футере содержится важная информация, он должен отличаться от текста письма по шрифту текста или цвету фона. А в целом – быть менее заметным. При этом ссылку на отписку лучше делать акцентной. Даже если она подчеркнута – уже хорошо.

Блеклое оформление футера от Nethouse, но ссылка на отписку хорошо заметна
Блеклое оформление футера от Nethouse, но ссылка на отписку хорошо заметна

Мы рассмотрели все функциональные и технические аспекты дизайна, а теперь перейдем к самому интересному – трендам.

Дизайн рассылки: 6 трендов

1. Интерактивность

Источник: emailonacid.com
Источник: emailonacid.com

Интерактивный дизайн интернет-рассылки остается трендом уже не первый год. В таких рассылках используются AMP-технологии, поэтому люди могут взаимодействовать с контентом прямо в почте, не переходя на сайт. И тут множество вариантов интерактивных элементов: покупка товара, карусель фото или картинок, опросы, тесты, ролловер изображения (когда оно меняется при наведении курсора). Интерактивность делает письмо живым, а компанию – современной. Такие письма хочется открывать чаще.

2. Геймификация

Источник: cdn.neverbounce.com
Источник: cdn.neverbounce.com

В России тенденция только набирает обороты – и это огромный плюс. Так как письма с играми еще в новинку, аудитория охотнее делится ими в соцсетях или пересылает знакомым. И при этом упоминается ваша компания. Как результат – растет узнаваемость бренда, на рассылку подписываются новые люди, а старые подписчики сильнее вовлекаются.

Несколько идей геймификации, которую несложно встроить в дизайн email-писем: квесты, игры на внимательность, розыгрыши.

3. Чистый дизайн

Источник: iterable.com
Источник: iterable.com

Дизайн email-письма, в котором много белого пространства (воздуха), есть простые линии и нейтральные цвета – еще один тренд 2022 года. Читатели таких писем фокусируют внимание на главном и быстрее понимают содержание письма. Это экономит время. А еще спокойные цвета расслабляют, что актуально на фоне перманентного стресса из-за пандемии.

4. Просто текст

Источник: litmus.com/wp-content/uploads/2017/12/plain-text-15-1536x864.jpg
Источник: litmus.com/wp-content/uploads/2017/12/plain-text-15-1536x864.jpg

Подобно чистому дизайну, эта тенденция помогает людям быстрее читать письмо, при этом ни на что не отвлекаться и не раздражаться из-за обилия дизайнерских элементов. Как правило, письма с «просто текстом‎» короткие – не больше одного экрана. В них один шрифт и два начертания (обычный текст и жирный), могут быть выделены заголовки и подзаголовки.

Тенденция «просто текст» срабатывает как эффект неожиданности. Человек открывает письмо, ожидая увидеть там шапку, баннеры, иллюстрации и кучу других элементов, а видит просто текст. Письмо похоже на переписку с живым человеком – это необычно, привлекает.

5. GIF и CSS-анимация

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

 iterable.com
iterable.com

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

Источник: iterable.com
Источник: iterable.com

6. Темное оформление

Источник: qz.com
Источник: qz.com

Dark mode – еще один тренд в email-маркетинге, который принесла (а точнее, утвердила) пандемия. Из-за карантина люди стали проводить больше времени дома, за экранами гаджетов – в том числе в почтовом ящике. На помощь пришло темное оформление, которое снижает нагрузку на глаза. Темные интерфейсы появились в разных интернет-сервисах – социальных сетях, стриминговых платформах, аудиосервисах.

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

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

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

Коротко о правилах email-дизайна

Делайте дизайн email-рассылки таким, чтобы письма было просто читать и чтобы главные мысли были понятны даже при беглом взгляде. Не перегружайте рассылки картинками, сплошным текстом и экзотическими шрифтами. Добавляйте правильные элементы в шапку и футер, акцентируйте внимание на призывах к действию и главных мыслях. Тестируйте тренды – возможно, это ваш вариант.

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




Email *