Продуманный дизайн выделяет ваши email-рассылки на фоне остальных, делает их запоминающимися. Но кроме этого, он выполнят задачу поважнее – помогает достичь цели письма: продать товар или услугу, мотивировать зарегистрироваться на мероприятие, информировать о каком-то важном событии. А еще правильный дизайн делает электронное письмо простым для прочтения, акцентирует внимание на призыве к действию и даже помогает сообщению не попасть в спам.
В статье рассказываем о правилах создания не просто красивого, но работающего email-дизайна. А еще показываем 5 трендов в дизайне рассылок 2022 года с примерами.
Дизайн рассылки: правила
Пройдемся по основным составляющим письма – шапка, футер, призыв к действию, текст, картинки и баннеры. А начнем с создания шаблона – внутри него и сочетаются все эти элементы.
Шаблон письма
1. Главное в начало
Агентство Litmus в 2021 году проанализировало 8 млрд открытый электронных писем и выяснило, что в среднем пользователь читает письмо 10 секунд, а еще в 2018 читал 13,4 секунд.
Вывод простой – ставьте главное из сообщения в начало, на первый экран. Как правило, это выжимка из содержания текста, CTA (призыв к действию) и картинка для привлечения внимания.
2. Особое внимание верстке и адаптивности
Дизайн рассылки без HTML невозможен. С грамотной версткой письмо удобнее читать – все элементы стоят в правильном порядке, ничто не отвлекает. Поэтому уже на этапе создания шаблона подумайте, насколько гармонично это будет смотреться в верстке.
А еще, по статистике последних лет, примерно половину электронных писем открывают с мобильных. Поэтому важно не просто правильно сверстать шаблоны, но и адаптировать их для экранов телефонов.
Для верстки писем, которые хорошо будут смотреться на всех экранах, можно обратиться к HTML-верстальщикам. Но проще всего прогнать письмо через сервис email-маркетинга.
Один из таких сервисов – Sendsay. У нас есть встроенный блочный редактор, который делает так, чтобы письма выглядели адекватно и на компьютере, и на смартфоне. И проверить это можно еще до отправки – прямо в интерфейсе сервиса. С версткой в Sendsay все блоки стоят на месте, строчки текста красиво отделены друг от друга, предлоги не висят, нумерация не сбивается – в общем, получается по-настоящему адаптивный дизайн.
3. Не больше 1-2 колонок
Чем меньше колонок с контентом в электронном письме, тем проще его воспринимать. Поэтому 1-2 обычно достаточно. Исключение – подборки с товарами. Там можно использовать 3-4 колонки.
И помните, что при восприятии информации в интернете взгляд человека обычно направлен в левый верхний угол и на остальное его часто не хватает. Также часто тексты читают по F-паттерну – взгляд скользит по странице в форме этой буквы. Поэтому, если используете две колонки, старайтесь главное размещать слева и в верхних строчках.
4. Фирменные цвета
Чтобы письма прочно ассоциировались у читателя с вашей компанией, используйте в дизайне фирменные цвета. Они хорошо смотрятся в шапке, в кнопке призыва к действию (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
Антиква больше подходит для длинных писем, гротеск – для коротких.
Для письма лучше использовать один шрифт – например, Helvetica. Акценты при этом делать начертанием (курсивным, жирным и подчеркнутым), цветом, размером. Или использовать два шрифта – например, Helvetica и Times New Roman.
Если использовать и несколько шрифтов, и несколько начертаний, и несколько цветов, письмо будет выглядеть неаккуратно и будет похоже на интерфейс сайтов из 90-х.
Что касается начертания, курсивом можно выделять прямую речь. Но пользоваться им стоит реже – он дольше читается. Подчеркнутого текста тоже лучше избегать – он похож на гиперссылки и вызывает ощущение спама. Жирным можно выделять заголовки, подзаголовки, главные мысли текста.
4. Размер шрифта и интервал
Оптимальный размер шрифта (кегль) в email-дизайне – 12 рх. Если у вас аудитория, которой сложно читать, можно делать 16 рх, но не больше, чтобы письмо было удобно читать. При этом кегель в заголовках, подзаголовках, CTA стоит сделать больше, а в футере – меньше.
Межстрочный интервал – 1,5-2. Так строчки не слипнутся друг с другом и сами письмо не растянется.
5. Цвет текста
Классический вариант – черные буквы на белом фоне, нестандартный – белые буквы на черном. Сейчас второе становится трендом в дизайне писем для email-рассылок. Обычно бренды используют этот вариант в Черную пятницу или Хэллоуин.
Фон письма можно оформить и в фирменных цветах компании. Но очень важно, чтобы текст оставался читабельным. Важное правило дизайна ― креатив не должен быть в ущерб функциональности.
Призыв к действию (CTA)
1. Самый заметный элемент в письме
Кнопки с призывом к действию – это то, ради чего пишется письмо. Особенно коммерческое, потому что его задача в том, чтобы человек купил.
Поэтому хорошо, когда кнопки выделяются на фоне остального контента в письме. Для кнопки можно делать отдельный цвет, выделять ее размером и даже анимировать. А вот злоупотреблять CTA-гиперссылками не стоит – это похоже на спам.
2. Контрастные цвета
Обычно в кнопках CTA используются или контрастные цвета, или насыщенный цвет с белым, или блеклый цвет с черным. Это еще сильнее привлекает внимание. Хороший вариант – если фирменные цвета компании контрастны. Они идеально подойдут для кнопок.
3. Первый и последний экран
Нет точного количества кнопок CTA в письме, которое конвертирует максимум продаж или регистраций. Но есть два универсальных места, где призыв к действию лучше выполняет свою задачу:
- На первом экране. Ставят после 1-2 абзацев текста или прямо на баннере. Кнопку видно сразу, без скролла – это важно. Так клиент сразу понимает, что от него нужно, и, если интересно, переходит по ссылке.
- На последнем экране. Ставят перед последней фразой в письме или перед футером. Так дочитавший письмо до конца получатель понимает, что ему интересно предложение и сразу переходит по ссылке.
В целом, если текст объемный, достаточно 2-3 кнопок CTA. Если это подборка товаров – кнопки можно ставить прямо в карточках.
4. Понятный призыв к действию
Люди привыкли к простым призывам к действию, которые:
- Содержат глагол в начальной форме (перейти, зарегистрироваться)
- Состоят из 1-3 слов (перейти на сайт, зарегистрироваться на вебинар)
Это универсальная формула – подходит для всех. Другие форматы (длинные или замудренные CTA) надо тестировать на аудитории. Но всегда важно, чтобы призыв к действию оставался понятным – то есть клиент осознает, что получит, если перейдет по ссылке.
Картинки и баннеры
1. Ограниченное число картинок
Чтобы дизайн письма для рассылки был гармоничным, в нем не должно быть слишком много картинок. Во-первых, если изображений в избытке, письмо выглядит аляповато. Во-вторых, человек теряется в образах и не понимает смысла.
Изображений должно быть ровно столько, сколько нужно для выполнения задачи письма. Если это рассылка с подборкой товаров по акции – достаточно цепляющего баннера с оффером, остальное – карточки товара с кнопками. Если рассылка контентная, можно делать больше изображений, главное – чтобы они не отвлекали от смысла письма.
Оптимально считается использовать в письме 80 % текста и 20 % картинок. Или 60 % и 40 %. Почти всегда этого достаточно, чтобы письмо было привлекательным и чтобы спам-фильтры из-за большого веса картинок его не забраковали. Исключение – подборки товаров, где картинки добавляют к каждому товару или категории для наглядности.
2. Баннер в начале
Обычно баннер состоит из изображения, текста и кнопки. В большинстве случаев баннер ставят в начало письма после шапки. Задача баннера – мотивировать читать письмо дальше или сообщить главную мысль, если читатель не будет продолжать чтение.
3. Нужный размер
Самая частая высота баннера или картинки – 300-500 пикселей, а ширина равна ширине письма – стандартно 600 пикселей. Ориентируйтесь на то, чтобы и картинка, и баннер помещались на один экран.
4. Вес картинок
Оптимальный вес картинки, баннера и любого другого графического изображения – 200 кб, так они будут загружаться всего секунду. 1 Мб изображения в email-рассылках будет загружаться 5 секунд. Поэтому, чтобы все загружалось быстро, пользуйтесь бесплатными сервисами, которые сжимают картинки. При этом вес самого письма без учета картинок должен быть не больше 100 Кб.
Кстати, если вы отправляете рассылки через сервисы email-маркетинга, некоторые ваши картинки могут не пропустить из-за веса. Поэтому перед отправкой проверьте максимально допустимый вес в требованиях сервиса.
5. Alt-атрибут
Атрибут alt – это текстовое описание изображения. Оно выручает, если картинка не прогружается в почте, так часто бывает в Microsoft Outlook. Также текстовое описание помогает, когда пользователь отключает картинки, чтобы, например, сэкономить трафик.Alt прописывают при HTML-верстке письма. В коде достаточно прописать, что изображено на картинке. Например, пейзажи Крыма. Если это баннер с предложением для клиента – нужно прописать и предложение, а не только описать картинку.
Футер (подвал)
1. Ссылка на отписку – всегда
Футер – нижняя часть письма после текста, его подвал. Если шапка – это визитка, то футер – справка. Здесь содержится дополнительная информация про компанию, которая может пригодиться клиенту. Подвал, как и шапка, обычно одинаковый для всех email-рассылок компании.
Футер – самое логичное место для ссылки на отписку. Человек интуитивно понимает, что техническая информация, в том числе и про отписку, будет в конце письма. И к тому же, если человек дочитает текст до конца, и он ему не понравится, по ссылке внизу будет удобно отписаться.
2. Три интерактивных элемента
Подвал – это еще и способ стать ближе к клиенту, завоевать его доверие, поэтому здесь уместно разместить:
- Ссылки на социальные сети – покажут, что компания готова общаться с подписчиками
- Подпись компании – докажет, что в компании работают живые люди
- Кнопка «поделиться» – мотивирует человека поделиться, если контент окажется виральным
3. Блеклое оформление
Несмотря на то, что в футере содержится важная информация, он должен отличаться от текста письма по шрифту текста или цвету фона. А в целом – быть менее заметным. При этом ссылку на отписку лучше делать акцентной. Даже если она подчеркнута – уже хорошо.
Мы рассмотрели все функциональные и технические аспекты дизайна, а теперь перейдем к самому интересному – трендам.
Дизайн рассылки: 6 трендов
1. Интерактивность
Интерактивный дизайн интернет-рассылки остается трендом уже не первый год. В таких рассылках используются AMP-технологии, поэтому люди могут взаимодействовать с контентом прямо в почте, не переходя на сайт. И тут множество вариантов интерактивных элементов: покупка товара, карусель фото или картинок, опросы, тесты, ролловер изображения (когда оно меняется при наведении курсора). Интерактивность делает письмо живым, а компанию – современной. Такие письма хочется открывать чаще.
2. Геймификация
В России тенденция только набирает обороты – и это огромный плюс. Так как письма с играми еще в новинку, аудитория охотнее делится ими в соцсетях или пересылает знакомым. И при этом упоминается ваша компания. Как результат – растет узнаваемость бренда, на рассылку подписываются новые люди, а старые подписчики сильнее вовлекаются.
Несколько идей геймификации, которую несложно встроить в дизайн email-писем: квесты, игры на внимательность, розыгрыши.
3. Чистый дизайн
Дизайн email-письма, в котором много белого пространства (воздуха), есть простые линии и нейтральные цвета – еще один тренд 2022 года. Читатели таких писем фокусируют внимание на главном и быстрее понимают содержание письма. Это экономит время. А еще спокойные цвета расслабляют, что актуально на фоне перманентного стресса из-за пандемии.
4. Просто текст
Подобно чистому дизайну, эта тенденция помогает людям быстрее читать письмо, при этом ни на что не отвлекаться и не раздражаться из-за обилия дизайнерских элементов. Как правило, письма с «просто текстом» короткие – не больше одного экрана. В них один шрифт и два начертания (обычный текст и жирный), могут быть выделены заголовки и подзаголовки.
Тенденция «просто текст» срабатывает как эффект неожиданности. Человек открывает письмо, ожидая увидеть там шапку, баннеры, иллюстрации и кучу других элементов, а видит просто текст. Письмо похоже на переписку с живым человеком – это необычно, привлекает.
5. GIF и CSS-анимация
GIF – это изображения, которые двигаются или на которых что-то двигается. В email-маркетинге их используют уже не первый год, потому что они здорово привлекают внимание. Чаще всего GIF помещают на баннеры или используют как самостоятельные картинки, на которых нужно сфокусировать внимание клиента. Например, через них часто показывают свойства товара. В последнее время email-маркетологи по всему миру стали чаще использовать APNG-анимацию. В отличие от GIF, она поддерживает 8-битную прозрачность и лучше по качеству.
CSS-анимация в email дизайне – это, как правило, анимация кнопок призыва к действию, баннеров, картинок. Работает так: на элемент наводят курсор – и он подсвечивается, меняет цвет, начинает блестеть или двигаться. Все для того, чтобы еще раз подтолкнуть читателя к целевому действию.
6. Темное оформление
Dark mode – еще один тренд в email-маркетинге, который принесла (а точнее, утвердила) пандемия. Из-за карантина люди стали проводить больше времени дома, за экранами гаджетов – в том числе в почтовом ящике. На помощь пришло темное оформление, которое снижает нагрузку на глаза. Темные интерфейсы появились в разных интернет-сервисах – социальных сетях, стриминговых платформах, аудиосервисах.
Email-маркетологи тоже переняли этот тренд. Теперь темные письма приходят не только на Черную пятницу. Такой email-дизайн привлекает, потому что читать письма на черном фоне мы пока не привыкли.
Но есть нюанс. Иногда почтовый клиент применяет черную тему по умолчанию к письмам со светлым фоном. В результате картинки, которые отлично смотрелись на белом фоне, на черном смотрятся нелепо. Поэтому у пользователя может возникнуть ассоциация, что черный дизайн — это априори неэстетично.
И если у вас по задумке светлое письмо, важно перед запуском проверить, как изображение, в том числе логотип, будет смотреться на черном фоне в почте. Или еще вариант — разработать верстку, которая будет гармонично подстраиваться под темную тему в клиенте. Это все на случай, если почтовый клиент вдруг изменит светлую тему на темную.
Коротко о правилах email-дизайна
Делайте дизайн email-рассылки таким, чтобы письма было просто читать и чтобы главные мысли были понятны даже при беглом взгляде. Не перегружайте рассылки картинками, сплошным текстом и экзотическими шрифтами. Добавляйте правильные элементы в шапку и футер, акцентируйте внимание на призывах к действию и главных мыслях. Тестируйте тренды – возможно, это ваш вариант.
И конечно, не забывайте делать дизайн адаптивным – чтобы все ваши получатели смогли прочитать письма. Ведь по последним исследованиям, большинство людей в мире уже просматривают почту со смартфонов.
