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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Закрыть

Сообщить об ошибке

Отменить
11382 19 4
Маркетинг Читать 12 минут 1 февраля 2019

7 советов для «чайников» по созданию эффективного дизайна емейл-рассылок

Как создать эффективную емейл-рассылку
Автор статьи о настройке емейл-рассылки
Сотула Анастасия
Редактор блога Serpstat
«Design is everything» — кричат известные емейл-маркетологи, блогеры и, конечно же, дизайнеры. Красивое и удобное оформление писем — залог их популярности у подписчиков рассылки.
О значимости дизайна при создании емейл-рассылок в интернете полным-полно статей. Тем не менее, я все-таки решилась вслед за многими осветить эту тему. А все потому, что эта статья основана исключительно на эмпирических знаниях — моем личном опыте, который я получила, работая над рассылками Serpstat с помощью сервиса емейл-маркетинга SendPulse. Я расскажу вам какой дизайн лучше выбрать и каких ошибок избежать — обо всем том, что сама проверила на практике.

Используйте фирменный дизайн email-рассылки в каждом из писем

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

Кроме того, имея в рукаве стандартный макет писем, вы сами упростите себе работу. Достаточно один раз хорошо потрудится, создав макет, а затем просто редактировать его — изменять содержимое.

Нет, я нисколько не призываю вас останавливаться на достигнутом. Рано или поздно, придется внести какие-то изменения или даже полностью сменить дизайн. Однако с готовым классным макетом это время наступит не скоро.
Первое, что нужно сделать — это расположить логотип компании в верхнем левом углу или создать тоненькую картинку-плашку по всей ширине письма.

Именно так мы и сделали:
Настройка шапки рассылки, добавление логотипа
Обо всем остальном расскажу в следующих пунктах этой статьи.

Не выходите за пределы четко заданных рамок

Не забывайте, что вашу рассылку могут читать не только с компьютеров, но и с мобильных устройств. Чтобы письма нормально отображались, важно использовать кроссплатформенную верстку с помощью стандартного размера — от 500 до 600 пикселей. То есть ширина HTML-макета вашего письма не должна превышать 600 пикселей и быть меньше 500 символов.
Для создания нашей рассылки, я использую ширину в 597 пикселей
размер кроссплатформенного макета для Email-рассылки
Важно не просто задать определенную ширину, но и задать видимые рамки — границы письма. Считается, что письмо с четко обозначенными полями воспринимается пользователем как завершенная конструкция, которая имеет свою структуру. Если видимых границ не будет, читатель почувствует себя дискомфортно, а контент плохо усвоится.

Обозначить такие рамки проще простого — достаточно просто залить всю область письма каким-то определенным цветом или выкрасить необходимым цветом область вокруг выбранной рамки.
Мы выбрали второй вариант и достигли необходимого отображения.
Создание четкого разграничения полей в письмах рассылок
Кроме того, мы сделали и внутренние рамки — выделив тем самым текст сообщения.
Выделение текста в сообщениях с помощью внутренних рамок

Плотно поработайте со шрифтами

Чтобы обеспечить хорошую читабельность текста, обратите внимание на такие характеристики шрифтов:
Выберите оптимальный размер шрифта и интервал между строчками
Слишком мелкий шрифт и небольшой интервал между строчками — плохое решение. Более читабельным и удобным для пользователя считается шрифт в диапазоне от 12 до 14 кегель и полуторный интервал между строчками (минимум 1,15).
Сделайте контрастный шрифт
Наиболее распространенный вариант шрифта — это черный шрифт на белом фоне. Однако бывает и прямо противоположный вариант — белый шрифт на черном фоне. И тот, и другой вариант приемлем — буквы не сливается, текст читается легко. Руководствуйтесь общим правилом: чем выше контрастность, тем лучше читабельность.
А эта статья поможет вам определить хороша ли контрастность на странице (пункт «Проверьте графическую составляющую вашего сайта»).
Работая с нашей рассылкой, я когда-то умудрилась нарушить и первое, и второе правило из этого блока:
Пример письма, которое нарушает правила создания рассылок
Белый шрифт на синем фоне — неплохое решение, однако именно этот оттенок синего (наш корпоративный цвет) уж слишком плохо смотрелся под белым шрифтом. И виной тому низкая контрастность.

Практические отсутствие границ и интервалов между строчками тоже не сыграло на руку тексту. От этого он стал еще более низкочитабельным (предварительно его «подпортило» сочетание цветов шрифта и фона).
Не используете больше трех выделений шрифта
Минимилизм в моде. Чем меньше вы будете ухищряться с разнообразием цветов и шрифтов, тем лучше. В идеале в одном письме должно быть не более трех выделений шрифтов:

  1. Один для заголовка или приветствия.
  2. Второй для самого текста.
  3. Третий — если нужно что-то выделить и поставить ссылку.

Что касается типа шрифта, то выберите шрифт без заcечек (как Times New Roman) — Arial, Tahoma или Verdana. Так не должно возникнуть проблем с отображением.

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

Особое внимание уделите картинкам

Картинки — одна из самых важных составляющих частей вашей рассылки. Именно они украшают письмо и привлекают больше всего внимания. Здесь важно многое учесть:
Найдите интересные фотографии и картинки методом непрямой ассоциации, объединенные одной тематикой
Говорят, в картинках лучше всего использовать «круглые крупные яркие, выполненные в теплых оттенках, изображения детей, групп людей, а также людей, которые находятся в движении». Я согласна с этим утверждением, однако решила пойти немного дальше. А все потому, что просто фотографии с людьми из фотостоков уже всем надоели ;) Это скучно и уже давно никому не интересно.

При поиске картинок используйте так называемый метод непрямой ассоциации. Находите то, что находится за гранью того, «что первое приходит в голову». Чтобы лучше объяснить этот метод, хорошо подойдут картинки, которые я нашла на блоге Максима Ильяхова:
Пример плохих и хороших картинок для рассылок
Одна и та же тема статьи — две разных иллюстрации. Однако первая картинка — скучная, обычная, именно такая, которую ждешь увидеть и представляешь в первое мгновение, когда ищешь картинку об удаленной работе.

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

Но это еще не все! Вдохновившись рассылками Netpeak, я поняла, что недостаточно использовать разные картинки, найденные непрямой ассоциацией. Будет лучше и интереснее связать все картинки в одном письме единой тематикой, чтобы в комплексе друг с другом они интересно сочетались.

Как именно? Покажу на примере картинок одной из наших рассылок:
Картинка, которая ассоциируется с темой статьи Шаблон релевантного изображения для рассылки Оптимизация изображения которое подходит под тему рассылки
Поняли какой смысл я пыталась вложить в эти картинки?

  1. Первое изображение про поиск нерелевантных страниц → ассоциация → лучше всего с поиском всего на свете справятся сыщик Шерлок Холмс (Бенедикт Камбербэтч) и его друг Ватсон .
  2. Вторая картинка про новые внешние статьи про Serpstat → ассоциация → Шерлок (Василий Ливанов) увлеченно читает статью в газете.
  3. Третье изображение про SEO-инсайды, которые можно найти из логов серверов → ассоциация → Шерлок (Роберт Дауни Младший) пытается найти выход из комнаты.
Нетрудно догадаться, что связующей темой ко всем картинкам стал Шерлок Холмс ;)
Прописывайте тег «alt» к каждой картинке, особенно, к первой
В каждом изображении, даже в логотипе в хедере письма должен быть прописан тег «alt».

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

И если вы используете картинку, с прикрепленной к ней ссылкой, а почтовый сервис получателя не верифицировал ваш адрес, получатель просто не увидит картинку. С помощью прописанного тега «alt» вы покажете своему пользователю, что ждет его при переходе по ссылке.
Я в этот тег прописываю текст, который содержится на картинке:
Прописывание атрибута Alt к картинкам в рассылке
Во-вторых, прописывая атрибут «альт» в картинке, которая находится в хедере письма, вы показываете эту часть письма в превью. То есть пользователь видит этот текст наряду с именем отправителя и названием письма, перед тем, как открыть само письмо.

Вот здесь:
Где посмотреть «Alt» изображений в рассылке
Не заполняя этот тег в первой картинке, вы впустую расходуете дополнительное место воздействия на пользователей, как это делала я ;)

В письме, которое вы видите выше в картинке, тег «alt» не прописан, а подтягивается первый текст из хедера — слоган Serpstat. Не повторяйте моих ошибок, дайте сразу знать своим подписчикам, что их ожидает. Как вариант, можно вписать в этот тег приветствие.
Делайте картинки не слишком большими и в формате .png
Большие картинки могут отобразиться с ошибками или не отобразиться вовсе. Кроме того, чем больше «весит» картинка, тем сложнее ее открыть, особенно, с мобильных устройств. Многие владельцы мобильных телефонов используют 3G и другие медленные соединения для выхода в интернет, поэтому время загрузки для них играет существенное значение.
Какой размер картинок использовать в рассылке
Кроме того, рекомендую делать картинки именно в формате .png, потому как в других форматах (в .jpg, например) в письмах получателей они могут открываться нечеткими (прим. картинка 1). Даже если картинка у вас открывается более-менее нормально (прим. картинка 2).
Зачем использовать png, а не jpg

Используйте шаблон с одним столбцом

Никогда не создавайте макет рассылки с несколькими столбцами, если не уверены на 100%, что ваше письмо откроется у пользователей нормально.

Разные устройства могут отображать по-разному ваши рассылки, ведь у каждого из них свой размер экрана. Некоторые элементы растянутся, а некоторые сожмутся.
В моей практике случались и такие трудности. Я разбивала содержание письма на две колонки:
Как правильно оформить текст рассылки
Получив свое собственное письмо на почту, я видела его именно таким, каким задумывала.
Однако у других получателей оно показывалось по-другому:
Плохая верстка письма
Используя шаблон с одной колонкой, вы сделаете его совместимым с большинством девайсов, даже если его будут просматривать в разных почтовых клиентах. Да и к тому же, этот подход упростит дизайн вашей рассылки и не будет перегружать информацией.

Найдите идеальный цветовой баланс

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

Не забывайте про соцкнопки и кнопки призыва к действию

Что эффективнее — картинки с ссылками или кнопки? Этого ответа, увы, я не знаю, поэтому нередко использую и то, и другое.

При создании кнопок руководствуйтесь следующими принципами:

  • высота кнопки — от 40 до 50 пикселей;
  • цвет кнопки должен быть в корпоративном стиле;
  • оставьте небольшое пространство вокруг кнопки;
  • проверьте кликабельна ли она на мобильных устройствах.
Мои кнопки всегда выглядят примерно так:
Добавление кнопок в письмо

Итоги

Давайте вспомним ключевые моменты этой статьи:

  1. Оформление писем должно соответствовать дизайну вашего сайта и корпоративному стилю.

  2. Расположите логотип компании в верхнем левом углу или создайте тоненькую картинку-плашку по всей ширине письма.

  3. Чтобы письма нормально отображались, важно использовать кроссплатформенную верстку с помощью стандартного размера — от 500 до 600 пикселей.

  4. Задайте рамки — границы письма и не выходите за их пределы.

  5. Более читабельным и удобным для пользователя считается шрифт в диапазоне от 12 до 14 кегель и полуторный между строчками (минимум 1,15).

  6. Шрифт должен хорошо контрастировать с фоном. Руководствуйтесь общим правилом: чем выше контрастность, тем лучше читабельность.

  7. Не используете больше трех выделений шрифта.

  8. Найдите интересные фотографии и картинки методом непрямой ассоциации, объединенные одной тематикой.

  9. Прописывайте тег «alt» к каждой картинке, особенно, к первой из хедера.

  10. Делайте картинки не слишком большими и в формате .png

  11. Никогда не создавайте макет рассылки с несколькими столбцами, если не уверены на 100%, что ваше письмо откроется у пользователей нормально.

  12. Даже если вы используете яркие красочные картинки предварительно «затемните» их немного, чтобы подчеркнуть текст в картинках.

  13. Не игнорируйте социальные кнопки и кнопки призыва к действию, однако не привлекайте к ним слишком много внимания.
Понравились идеи наших писем? Подписывайтесь на рассылку Serpstat! Покажем и расскажем еще больше ;)
Чтобы подписаться, перейдите в конец любой статьи нашего блога, введите свой емейл в специальном поле и нажмите «подписаться».

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

5 из 5 на основе 3 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

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

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов