Дизайн — важная составляющая email-маркетинга. Именно поэтому в этом материале я собрал для вас советы и рекомендации, как создавать яркие и адаптивные рассылки, которые попадут в папку «Входящие» и гарантированно будут открыты на всех устройствах. А также я расскажу, какие продающие элементы дизайна необходимо использовать для того, чтобы любой подписчик совершил «заветное» целевое действие в письме.
Заблуждения и реальность
Многие сравнивают дизайн имейл-рассылок с дизайном макетов для полиграфии, пытаясь включить в них и градиентные фоны под текст, элементы инфографики, динамические кнопки, слои, многоколоночную верстку и т. д.
Выбирая такой «путь» привлечения внимания подписчиков, большой риск попасть под санкции почтовых спам фильтров. Стоит также учитывать, что многие элементы дизайна могут попросту не отображаться на экранах некоторых устройств, программ и в приложениях, на которых подписчики просматривают почту.
Разрабатывая макеты для рассылок, придерживайтесь следующих правил:
Макеты необходимо готовить текстовыми, с добавлением картинок. Кнопки и плашки необходимо делать текстовыми. Избегайте соблазна создать макет письма, используя одну картинку. Это привлечет внимание спам-фильтров почтовых систем, которые «не видят» контент изображений и автоматически расценят его как попытку скрыть нежелательную информацию.
В некоторых случаях картинки не показываются на приложениях и программах подписчиков, именно поэтому в письме нужно соблюдать «баланс текста» и картинок. Для любителей красивых заголовков на фоне картинки предлагаю использовать один лайфхак, который я называю «подстановкой».
Такой принцип используют многие емейл-маркетологи и результат «радует глаз», а спам-фильтры почтовых систем не имеют претензий к вам.
- Используйте gif-анимацию «аккуратно», поскольку письмо на некоторых почтовых системах будет отображать статичную картинку. Проанализируйте базу подписчиков, если большинство из их — корпоративные адреса, лучше отказаться от такой идеи.
— Градиентные фоны под текстом могут также теряться на некоторых почтовых системах, так что лучше всего выбрать сплошной фон.
— Составлять письмо необходимо по следующему шаблону. Люди привыкли, что контент письма построен по следующей схеме.
Равнение на мобильные устройства
В последнее время все больше пользователей просматривают почту и совершают покупки в интернете, используя мобильные устройства. Именно поэтому, перед отправкой рассылки необходимо убедиться, что письмо открывается на популярных мобильных устройствах.
Для проверки корректного отображения рассылок иногда используют сервисы, которые показывают рассылку на популярных устройствах, однако, по моему опыту, ни один сервис не даст 100% картины. Для проверки отображения рассылки необходимо использовать «дедовский метод» — открыть рассылку на нескольких популярных девайсах: смартфоны с ОС Android, Iphone, Microcosoft, и вы увидите реальную картину отображения рассылок. А в дополнение я рекомендую использовать сервисы проверки адаптивности рассылок.
В идеале, конечно, определить тройку самых распространенных девайсов, на которых открывают пользователи ваши рассылки. Определить это можно, используя системы аналитики Google Analytics и Яндекс Метрика. Убедившись, что рассылки просматриваются с определенных устройств, проверьте корректное отображение всех элементов на данных девайсах.
Адаптивный макет без специальных навыков
Разрабатывая макет «под» мобильные устройства, необходимо учитывать следующее.
- Ширина тела рассылки не должна превышать 600 px.
- Для макетов «под» мобильные устройства желательно использовать верстку в одну колонку. Так как на некоторых устройствах изображение и текст в колонках будет отображаться некорректно.
- Обратите внимание на размер шрифта и кнопки. Текст необходимо сделать не меньше 14 кегля, а кнопку не менее 50 пикселей, так как ширина подушечки указательного пальца взрослого человека 45-57 пикселей.
- Старайтесь создавать макет на основе таблицы, шириной 600 пикселей, расположив ее по центру. Разбив письмо на фрагменты, расположите содержимое в колонки и ячейки и проверьте полученный результат на мобильных устройствах.
Придерживаясь данных советов, простой дизайн будет смотреться корректно на популярных мобильных устройствах. Однако для сложных макетов необходимо использовать отзывчивый дизайн, который будет не просто менять размер макета в зависимости от ширины экрана устройства, но и адаптироваться к разным девайсам.
Отзывчивый дизайн
Отзывчивый дизайн требует помощи, а точнее проработки специалистом, что значительно увеличит и время на доработку, и стоимость изготовления. Поэтому, в зависимости от целей рассылки, целевой аудитории, бюджета и времени, вы можете выбрать один из вариантов «перестройки» на мобильные устройства.
Продающие элементы
Представьте ситуацию, тема вашего письма заинтересовала подписчика, и он открыл его. Какие элементы заставят его совершить целевое действие?
1. Фон письма. Обязательно используйте его для того, чтобы визуально выделить содержимое.
2. Используйте больше свободного пространства, не следует «лепить» элементы одни на другой. Это усложняет чтение.
3. Разбивайте текст картинками, разделяющими линиями, выделяйте некоторые блоки фоном другого цвета. Люди любят структурированную информацию, а большие блоки текста многие отказываются читать.
4. Используйте яркие кнопки-призывы к действию. Так, вы «подскажете» подписчику, что необходимо сделать после прочтения вашего сообщения. Если учитывать, что на просмотр рассылки у пользователя уходит всего несколько секунд, яркие кнопки выполнят функцию тизера, который поможет совершить необходимое действие — клик.
5. Размещайте логотип в верхнем левом углу. Согласно исследованиям, получатели чаще всего читают письмо по линиям, напоминающим контур буквы F. Поэтому поместите самые важные изображения в верхний левый угол или вдоль левого края письма.
6. Помогите подписчикам найти необходимую информацию. Большое количество кликов происходит в левой верхней части письма, где обычно размещают логотип. Однако увеличить количество кликов на ваш сайт помогут ссылки, указывающие на него.
Посмотрите на пример ниже, ссылка дала очень хорошие результаты по заходам. Именно поэтому, помимо кнопок, необходимо «разбросать» несколько ссылок в письме.
Кстати, анализ кликов рассылок я провел в системе SendExpert, используя новую функцию «Карта кликов», которую уже можно открыть в любом отчете вашей рассылки.
Резюмируя сказанное, советую вам использовать элементы дизайна в рассылках для повышения узнаваемости вашей компании, а также кликов и целевых действий, однако не забывайте, что дизайн рассылок отличается от дизайна полиграфии и придерживайтесь советов, которые я собрал в данном материале.
Команда SendExpert 
