У вас есть три секунды, чтобы удержать внимание подписчика. Если письмо не загрузится быстро, пользователь его удалит. Впрочем, быстрой прогрузкой дело не ограничится.
Прежде чем прочитать текст, человек замечает визуальные элементы: иллюстрации, цветовую гамму, структуру, форматирование, вёрстку. Если хотя бы один пункт проседает, вероятность того, что получатель прочитает письмо и совершит целевое действие, резко падает.
Как сделать email-рассылки привлекательными и эффективными? Расскажем в статье и приведём хорошие и плохие примеры.
Добавляйте картинки
«Голый» текст в письме — это скучно. Такие рассылки можно отправлять редко, например, когда CEO компании хочет обратиться к подписчикам. Или если у вас текстовый стиль рассылки, как у Мосигры.
Грамотно подобранные изображения добавят сообщению перчинки, зададут тон и помогут передать настроение.
Что важно:
если накладываете текст на картинку, проверьте, чтобы он не сливался с фоном;
помните о размерах блока: если его ширина 300 px, не используйте картинку шириной 900 px;
оптимизируйте изображения, прежде чем вставить их в письмо. В этом помогут сервисы TinyPNG и Squoosh;
прописывайте Alt-текст для картинок. Так пользователи поймут смысл сообщения, даже если изображения не прогрузятся.
Используйте гифки
GIF-анимации — хороший способ привлечь внимание. 2020 можно смело назвать годом гифок — они встречаются в рассылках всё чаще.
Что важно:
чем меньше весит гифка, тем быстрее она прогрузится во всех устройствах. Тем больше шансов, что она сыграет роль вовлечения, а не вызовет раздражение;
собирайте макет в х2 размере: ширина контента 1200px, текст — 32px. В таком случае гифка не «поплывёт» в устройствах даже с самым нестандартным расширением экрана.
Создадим шаблон письма
Не меняйте шаблон слишком часто
Подписчики привыкают к оформлению писем и соотносят его с образом вашего бренда. Если каждое новое письмо будет отличаться от предыдущего, запомнить вас не удастся. А зачем получать новости от компании, которая не может определиться даже с дизайном рассылок?
Что ещё важно: оформление сайта и письма должно быть выдержано в единой стилистике. Иначе пользователь может не понять, что рассылка в красных тонах пришла от вашей компании, корпоративный цвет которой — синий. Как в примере.
Не оформляйте текст картинкой
С одной стороны, так проще — вы будете уверены, что текст не «поедет». С другой, у такого оформления есть минусы:
картинка может не прогрузиться. Причин несколько. Само письмо может быть тяжёлым. Или возникли проблемы с передачей — во многих сервисах картинка подгружается из сервера, где она «лежит». Если в момент, когда пользователь открывает рассылку, упадёт интернет, изображение не прогрузится. Потому делать картинки лёгкими с сохранением качества — правило хорошего тона;
если в тексте есть промокод, пользователь не сможет его скопировать и вставить. Придётся набирать вручную — многим лень это делать даже за подарок;
дизайнеру придётся всё переделывать, если вдруг обнаружится опечатка в тексте;
почтовые сервисы могут отправить в спам рассылку, оформленную картинками, потому что мошенники любят прятать в них спамный текст.
Нельзя скопировать промокд, т.к. это картинка
Подбирайте цвета
Есть много красивых сочетаний цветов — например, фиолетовый с жёлтым, красный с чёрным, синий с жёлтым — которые не стоит использовать в рассылках. Можно, конечно, но тогда будьте осторожны. Потому что, если цвета будут слишком контрастными, текст будет трудно читать и глаза быстро устанут. А ещё почтовики не любят «кричащего» дизайна и кидают такие письма в спам.
Плохо подобраны цвета, письмо похоже на винегрет
Не все умеют подбирать цвета на глаз. Не страшно — помогут тематические ресурсы для дизайнеров. Самые простые и удобные:
Adobe Color CC. Помогает подобрать палитру к конкретному цвету. Просто введите значение, и кулер подберёт подходящие цвета и оттенки.
Color Hunt. В сервисе бесконечное количество сочетаний цветов. Поможет подобрать идеальную пару.
Khroma. Выберите 50 любимых цветов, и Хрома составит палитры, градиенты для работы. Зачем так много? Чтобы сервис не ошибся и предложил то, что вам нужно.
Прекрасно подобраны цвета
Помните об одной цели для письма
В рассылках правило «чем больше, тем лучше» не работает. Как бы ни хотелось вставить в одно сообщение инфографику, полезные советы, гифки и анонс нового продукта, не делайте этого. Одно письмо — одна цель. Максимум две, например, подборка событий и анонс мероприятия.
Одна идея, кратко, чётко
Плохой пример: письмо обо всём и сразу, никакой сегментации. Кстати, промокод не копируется.
Форматируйте текст
Письмо может быть сколь угодно интересным. Но какой в этом смысл, если текст выглядит непривлекательно? Сообщение, в котором нет подзаголовков, разделения на абзацы и выделения главных мыслей шрифтом или цветом, не привлечёт внимания. Впрочем, как и во всём, при форматировании текста главное — не переборщить.
Что важно:
не используйте сразу все инструменты оформления в одном письме;
не верстайте письмо сплошным текстом без абзацев;
не используйте больше двух (максимум трёх) шрифтов;
берите шрифты, которые «понимают» все сервисы рассылок: Arial, Tahoma, Verdana, Georgia, Times New Roman, Impact, Lucida Grande, Trebuchet, Palatino, Courier или Courier New. Никто не запрещает использовать другие шрифты, но, если конкретный почтовик их не поддерживает, вёрстка может «поплыть»;
если в компании есть корпоративные шрифты, используйте их при оформлении надписей на баннере и в тексте, который верстаете картинкой;
размер шрифта должен быть не менее 14px;
следите, чтобы по всему письму были одинаковые отступы.
Не перегружайте футер
Подвал письма — малозаметный, но очень важный элемент. Как правило, в нём располагают подпись, краткое объяснение, почему человек получил это письмо, и ссылку на отписку. Можно добавить юридический адрес компании и ссылки на соцсети.
Плохо, когда футер превращают в свалку:
Ссылки на разделы, адрес, правовая информация, политика в отношении обработки персональных данных… Всё это полезно, да, но делает футер в два раза больше самого письма.
Что важно:
в футере должна быть видна ссылка на отписку;
если используете ссылки, сгруппируйте их по тематикам;
добавьте краткую подпись (по желанию).
Добавляйте CTA
В письме должна быть кнопка Call to action, призывающая пользователя выполнить целевое действие: перейти на сайт, оставить отзыв, скачать чек-лист, забронировать номер… Ошибки при оформлении кнопки могут привести к тому, что целевое действие не удастся выполнить.
Что важно:
в письме должна быть минимум одна кнопка CTA;
если их несколько, первая должна располагаться в первом экране;
в тексте кнопки должно быть указано чёткое действие: заказать, купить, посмотреть, скачать;
кнопка должна быть яркой. Даже если она оформлена в виде ссылки. Можно даже оформить её гифкой, как сделали Aviasales.
Пример кнопки в письме от Aviasales
Проверяйте вёрстку
Не ленитесь это делать перед отправкой КАЖДОГО ПИСЬМА. Отправьте себе тестовую рассылку.
Бывает, свёрстанное сообщение незначительно отличается от макета. Как в этом примере: в Google Chrome кнопка «расплылась», хотя письмо перед отправкой проверили.
Письмо Mailigen, поехала кнопка
Но случаются и более глобальные косяки. В примере рассылка «разъехалась».
Нужно учесть, что Google Chrome самый капризный. Иногда вёрстка «едет» при разном масштабировании. К примеру, это письмо при 90 и 110% отображается нормально, а при 100% появляются полосы. Исправить не получается.
Что в итоге?
Красивые письма с уникальным дизайном и адаптивом под все устройства легко создать в Mailigen. Попробуйте сейчас, если только планируете заняться рассылками. А если нужна помощь, напишите нам на team@mailigen.ru или позвоните 8 (800) 770-70-23.