С тем, как написать текст для email-рассылки, разобрались в предыдущей статье. Теперь расскажем, как правильно его задизайнить: как сделать письмо адаптивным, как выбирать цветовую гамму и почему лучше использовать стандартные шрифты.
Проработайте структуру
Стандартная структура электронного письма:
- Прехедер. Обычно в него выносят тему и ссылку на веб-версию. Последняя нужна, если почтовый клиент обрежет письмо из-за его длины, не прогрузятся картинки или читатель захочет поделиться письмом, не пересылая его.
- Хедер, или шапка. Обычно в него выносят логотип компании, контакты.
- Баннер. Идет после хедера или совмещен с ним. В него выносят меню или заголовок с главной выгодой, мотивирующий дочитать до конца.
- Тело письма. В него помещается основная информация: текст, изображения, инфографика, видео и другой контент. Длина тела зависит от цели и содержания письма.
- Призыв к действию. Обычно содержится в теле, но может быть выражен в отдельном блоке. Чаще всего призыв к действию — это кнопка, по нажатию на которую получатель может перейти на сайт.
- Подвал, или футер. В него выносят дополнительные контакты, ссылки на соцсети, дополнительную информацию и обязательно ссылку на возможность отписаться, без этого письмо попадет в спам.
Так выглядит типовая структура письма в email-рассылке
Структура может быть и другой — в зависимости от целей письма, прогретости аудитории, содержания и других параметров. Например, чтобы заинтересовать получателей сообщением о глобальной распродаже, достаточно будет логотипа, 1–2 предложений и кнопки со ссылкой на сайт: все это можно уместить в одном экране. А если ваша цель — рассказать об использовании сервиса, подойдет длинное письмо со скриншотами и видео. В нем можно не использовать прехедер, но хедер желателен. Если готовите первое письмо в рассылку, обязательно нужны и хедер, и прехедер, и футер, чтобы получатели поняли, от кого оно пришло.
Пример еще нескольких структур письма: первую можно использовать для демонстрации возможностей сервиса, вторую — для письма об акции, третью — для пошаговой инструкции
При выборе структуры ориентируйтесь на то, какую задачу нужно решить, и на подготовленный текст. Нужно, чтобы пользователь быстро перешел по ссылке или выполнил другое целевое действие, — не растягивайте контент на 3–4 экрана, если можно уместить его в 1–2. При запуске информационной рассылки подробно расскажите о продукте, преимуществах — в этом случае можно использовать длинную структуру.
Главное, чтобы структура коррелировала с текстом и помогала решать задачу: в транзакционных письмах — подталкивала перейти по ссылке, в информационных — помогала легче воспринять информацию, в реактивационных — заинтересовать читателя.
Набросать структуру можно в сервисах для прототипирования, от руки или в любом графическом редакторе. Главное, чтобы вы сами понимали, каким будет письмо.
Прототип структуры можно сделать даже в Google Рисунках, как этот
Сделайте письмо адаптивным
Делать это нужно сразу, до выбора местоположения конкретных элементов. Самый простой путь — верстать письмо сразу в сервисе для рассылки, типа Mailchimp. Там письма автоматически становятся адаптивными для ПК, планшетов, смартфонов.
Если не используете сервисы, а отправляете письма вручную или с помощью внутреннего софта компании, над адаптивностью нужно будет поработать самостоятельно. Например:
- Использовать «плавающие блоки», которые при необходимости будут перестраиваться друг под друга.
- Применить подстраивающееся содержимое, при котором картинки на экранах смартфонов будут уменьшаться.
- Использовать медиазапросы в CSS, но они подходят не для всех почтовых клиентов.
Подробнее об этом мы расскажем в следующей статье.
Продумайте расположение элементов
Конкретное расположение элементов выбирайте, когда уже решили, какой будет структура и как сделать письмо адаптивным. Ориентируйтесь на прототип и следуйте базовым правилам.
Оставляйте «воздух». Между всеми элементами письма — заголовками, подзаголовками, логотипом, абзацами текста и так далее — должен оставаться «воздух»: небольшое пространство. Если не оставить его, контент «слипнется», а читателю будет сложнее ориентироваться в нем.
Сравните сами, в каком варианте письма легче ориентироваться
Используйте якорные объекты. Якорные объекты — самые заметные элементы, созданные для привлечения внимания: заголовки, кнопки с призывом к действию и так далее. Чаще всего читатели обращают внимание сначала на видео или иллюстрации, потом на заголовки, призывы к действию, логотипы и цифры. Поэтому делайте их заметными: используйте не только выделение жирным и контрастные цвета, но и правильное расположение. Якорные объекты обычно расположены по центру или в одном из углов экрана.
Добавляйте фото и видео. Конечно, когда это уместно. Например, если нужно по ходу дела показывать вещи, о которых говорите в инструкции, можно разбить экран на две колонки: в правой будет текст, в левой — иллюстрация или видео или наоборот. Визуальный контент обычно легче воспринимается: вместо того чтобы объяснять, куда именно нажать, можно просто показать скриншот.
Уделяйте особое внимание шапке. Пользователи просматривают сайты и другие страницы в интернете по F- или Z-паттернам, то есть уделяют особое внимание верхней части экрана. Об этом рассказали Евгений Котяк и Денис Нарижный, авторы сервиса AskUsers. Значит, вам нужно привлечь внимание пользователя и заинтересовать его сразу: в прехедере или шапке письма. Можно использовать логотип, выразительный шрифт, контрастные цвета или анимацию.
Используйте модульную верстку. Обычно письма верстают как таблицу, в которой каждый элемент занимает свой прямоугольник. Чаще всего прямоугольники строят в одну или две колонки. Используйте этот прием: выберите расположение элементов так, чтобы их прямоугольники не пересекались друг с другом. Это позволит оставить «воздух» и облегчит адаптивную верстку.
Каждый элемент занимает один прямоугольник
Подумайте, нужен ли фон. В примерах мы рассматриваем структуру письма на весь экран. Также можно использовать сжатую структуру, при которой по бокам, сверху и снизу остается фон, а само письмо очерчено границами. Фон может быть однотонным или цветным, например для него можно использовать орнаменты или полноценные изображения.
Опять же, ориентируйтесь на цели письма и текст, написанный заранее. Он поможет правильно расположить элементы так, чтобы создать акценты на якорных объектах.
Уже на этом этапе, чтобы оценить внешний вид письма, можете добавить текст в прототип. Если что-то не так, сразу исправьте недостатки.
Текст в прототипе может выглядеть так — понятно, что структура подходит ему, выделены якорные объекты
Найдите картинки, которые будете использовать
Изображения в рассылках используют, чтобы что-то показать, объяснить, визуализировать. Или для красоты — например чтобы сделать письмо более ярким. В любом случае будьте аккуратны:
- Не помещайте весь текст на изображения — они могут не прогрузиться, и получатель ничего не увидит.
- Не используйте изображения для оформления фона — во-первых, яркий фон затрудняет чтение; во-вторых, некоторые почтовые клиенты не поддерживают такой дизайн и фон получится однотонным.
- Не используйте слишком много иллюстраций — письма с большим содержанием изображений сложнее верстать адаптивно.
- Помните — чем больше вес письма, тем больше шансов, что оно не загрузится у получателя.
Если в письме нужно использовать иллюстрации, уменьшите их вес в сервисах iLoveIMG, IMGonline, JPG Zipper или других. Стремитесь максимально уменьшить вес всего письма: чем он больше, тем дольше оно загружается и тем выше шанс неполадок.
Посмотрите по структуре, где нужны иллюстрации. Если можно обойтись без них, просто сверстайте текст. Если они нужны, подбирайте изображения так, чтобы они соответствовали вашему корпоративному дизайну, не сильно отличались между собой и не забирали внимание с якорных объектов на себя. Отличное решение — иллюстрации в едином стиле, не слишком яркие, чтобы читатель сначала обратил внимание на заголовок или другой важный якорный объект.
В рассылке Work-zilla иллюстрация привлекает внимание к цитате, в самом письме всего 6 изображений
Выберите шрифты
Письма в рассылках — не то место, где стоит экспериментировать со шрифтами. Во-первых, почтовые клиенты «понимают» только 9 стандартных распространенных шрифтов, а на незнакомые могут «ругаться» и не отображать их. Во-вторых, «заковыристое» начертание сложнее для восприятия, чем привычные Arial или Times New Roman.
Используйте эти шрифты: их принимают все почтовые клиенты
Обычно в письмах используют 1–2, максимум 3 шрифта. Например, одним пишут весь текст, а другим — заголовки, подзаголовки, призывы к действию и другие важные элементы. Если использовать 4, 5 или 6 шрифтов, внимание пользователя рассредоточится — он не поймет, на что обращать внимание в первую очередь, а само письмо будет выглядеть неаккуратно.
Посмотрите, что происходит с письмом, если использовать в нем разные шрифты, — его структура сломалась, непонятно, какой модуль важнее
Выберите из стандартных шрифтов 1–2, которые будете использовать. Если письмо длинное, для дополнительных акцентов, сносок или информации в футере можно использовать третий шрифт. Главное, чтобы на экране было не больше двух шрифтов одновременно.
Выберите цвета оформления
Подумайте, какие цвета использовать в письме для фона, самого текста, выделения важных смысловых блоков, кнопок с призывом к действию и других элементов. Здесь то же правило, что и со шрифтами: чем больше оттенков используете, тем сложнее пользователю будет ориентироваться. Достаточно 4–5 цветов.
Подбирайте цвета так, чтобы текст читался легко. Желтый на синем фоне придется разглядывать, а серые или черные буквы на белом читаются легко — мы привыкли видеть текст таким в книгах, журналах, на многих сайтах.
Проверьте сами: какой текст вам легче читать?
Учитывайте ваш корпоративный стиль. Используйте оттенки, которые ассоциируются с вашим брендом. Если корпоративного стиля нет, просто акцентируйте внимание на якорных объектах, например контрастными цветами.
В рассылке от «ЦИАН» использован голубой — корпоративный цвет компании
Следите, чтобы все используемые оттенки сочетались между собой. Подобрать палитры цветов можно в сервисах ColorScheme, Paletton, Material design и других. Например, выберите триаду в ColorScheme — сервис покажет несколько сочетающихся оттенков, их можно использовать для дизайна.
Соберите все воедино
Когда выбрали структуру, продумали расположение элементов, нашли картинки, выбрали шрифты и цвета оформления, соберите все вместе. Сделать это можно сразу в сервисе для рассылок или в виде макета в графическом редакторе, например в Photoshop.
Когда соберете макет воедино, сможете сразу увидеть ошибки — например то, что между объектами не хватает «воздуха», цвета не сочетаются между собой или неверно выставлены цветовые акценты. Исправьте их перед тем, как отправить макет в верстку. Если не уверены, протестируйте дизайн на фокус-группе. Отправьте письмо 20–30 подписчикам и попросите дать обратную связь: захотелось ли им выполнить целевое действие, какие акценты раздражают, что непонятно. На основе отзывов доработайте макет и запускайте процесс дальше.
Повторим: как сделать дизайн для письма в email-рассылке
- Проработайте структуру исходя из целей письма и текста. Она может быть и короткой, и длинной, и с хедером, прехедером, и без.
- Сделайте письмо адаптивным. Собирайте дизайн сразу в сервисе для рассылок или используйте CSS, плавающие блоки или подстраивающееся содержимое.
- Продумайте расположение элементов: куда поместить заголовки, изображения, текст. Акцентируйте внимание на важных якорных объектах: призывах к действию, заголовках, иллюстрациях.
- Найдите изображения, которые будете использовать для дизайна. Следите, чтобы они были выполнены в одном стиле, не перетягивали на себя внимание с якорных объектов. Сжимайте картинки, чтобы письмо не весило слишком много.
- Выберите шрифты. Можно использовать только стандартные, типа Arial или Times New Roman. В одном письме используйте не больше трех шрифтов.
- Выберите цвета оформления. Проследите, чтобы текст легко читался, а акценты на якорных объектах были заметными. Подобрать палитру для оформления письма можно с помощью специальных сервисов.
- Соберите все воедино. Постройте письмо сразу в сервисе для рассылки или создайте макет в графическом редакторе.
