В этой статье мы не будем рассказывать про коды, теги и атрибуты для верстки email-писем. Мы сосредоточимся на том, что важно знать email-маркетологу: какие есть виды и возможности верстки, как ее можно редактировать и проверять качество, из-за чего всего возникают ошибки в отображении писем.
Этот гайд мы собрали из статей в нашем блоге:
- Гайд по верстке адаптивных писем
- AMP-технология в рассылках: плюсы и минусы
- Зачем нужна геймификация в email-рассылках
- Шаблон для рассылки или создание письма с нуля – что лучше выбрать
- Как провести тестирование писем: сервисы и рекомендации
- 27 сервисов для создания эффективной рассылки
- Как подобрать шрифт для email-рассылки
- Каким должен быть размер письма
- Как сделать макет письма
Какой бывает верстка email-рассылок
Верстка бывает только с помощью HTML-кода. Но для работы с кодом нужны знания программирования, поэтому сервисы рассылок разработали блочные редакторы для тех, кто не умеет писать код.
Сейчас сервисы рассылки предлагают два способа сверстать письмо: в блочном или HTML-редакторе. Разберем подробнее принцип работы, плюсы и минусы каждого.
Верстка писем в блочном редакторе
Блочный редактор – это конструктор с готовыми блоками для контента. Визуально он выглядит так 👇
Слева блоки, которые можно добавить в письмо: текст, картинка, кнопка, разделитель, кнопки поделиться и ссылки на соцсети. Также есть отдельный блок, в который можно вставить HTML-код с нестандартным форматом. Например, в блочном редакторе можно сделать только 4 колонки, а вам нужно 5.
Справа макет письма. В него email-маркетолог добавляет блоки, перетаскивая их из левой части. Блоки можно ставить в разном порядке, например:
- картинка и под ней текст
- картинка слева – текст справа и наоборот
- несколько картинок в ряд и кнопками под ними и т. д.
Также в макете письма можно менять цвет текста и кнопок, ширину блоков, цвет фона, размер шрифта и его вид, добавлять параметры персонализации – имя, номер телефона, год и прочую информацию о подписчике.
Все это существенно упрощает верстку почтовых рассылок.
В таком редакторе все блоки сверстаны так, чтобы письмо адаптировалось под разные устройства. Это очень важно, потому что иначе рассылка будет плохо выглядеть с экрана смартфона.
На примере ниже видно, как хорошо подстраивается под размер экрана письмо, сверстанное в блочном редакторе Sendsay. Оно перестраивается так, чтобы текст, картинки и кнопки выглядели одинаково хорошо и читаемо.
Еще у качественных сервисов рассылки есть готовые блочные шаблоны для разных видов писем. Например, в Sendsay есть шаблоны для:
- подтверждения подписки
- приветствия
- каталога товаров
- оповещений
- акций и скидок
- новостей
- брошенной категории, корзины или просмотра
Также есть шаблоны для праздников и событий с тематическим оформлением. Например: письмо на Хэллоуин, Черную пятницу, 23 Февраля или про распродажу.
Читать по теме: Рассылка магазина одежды: шаблоны и идеи для писем
Плюсы работы в блочном редакторе
Создать письмо можно за 15 минут без навыков программирования. Блоки уже адаптированы под десктоп и смартфон, поэтому не нужно беспокоиться о качестве верстки.
Минусы работы в блочном редакторе
Возможности ограничены функционалом редактора. Это значит, что нельзя создать письмо с нестандартным оформлением. Это можно сделать только с помощью HTML-верстки, о которой мы поговорим в следующем разделе.
Верстка рассылки в HTML-редакторе
Такая верстка позволяет сделать сложный дизайн письма, добавить интерактивные элементы и персональные подборки. Для создания такой рассылки нужен программист.
HTML-редактор в сервисе рассылки выглядит так 👇
Слева – код, который задает дизайн письма, справа – вид письма для получателя.
Например, пользователь смотрел на сайте кроссовки, но не купил. Через час ему приходит письмо с этими кроссовками и предложением сделать заказ. Чтобы в письмо автоматически подставлялись нужные товары и услуги, нужно написать специальный код и вставить его в письмо. Готовых блоков в блочном редакторе для этого нет.
Есть два способа сделать письмо с помощью HTML:
- Самостоятельно написать код письма – нужно нанять дизайнера, который нарисует макет, и опытного верстальщика, чтобы превратить его письмо.
- Воспользоваться готовыми шаблонами, которые можно скачать в интернете. Этот шаблон загружают в сервис рассылки и подстраивают под себя с помощью верстальщика.
Читать по теме: Шаблон для email-рассылки или создание письма с нуля – что лучше?
Рекомендуем скачивать шаблоны только с проверенных ресурсов. Иногда недобросовестные разработчики добавляют в верстку элементы, которые почтовые клиенты могут посчитать небезопасными и заблокировать отправку. Поэтому после скачивания шаблона обязательно проведите спам-тест письма.
Верстка адаптивных элементов
Основная сложность HTML-верстки писем для рассылки – адаптивность под устройства. Если в блочном редакторе все блоки созданы так, чтобы подстраиваться под разные размеры экрана, то в HTML-редакторе это нужно делать вручную.
Адаптивная верстка – боль верстальщиков, потому что экраны бывают разные и нужно сделать верстку, которая будет максимально хорошо адаптироваться под каждый из них.
У нас есть гайд по верстке адаптивных HTML-писем для email-рассылки, в котором описаны основные правила. Если коротко, то нужно:
- использовать табличную верстку – только такой формат корректно работает во всех почтовых клиентах и браузерах
- добавлять универсальные теги и атрибуты – иначе некоторые блоки писем не распознает браузер или мобильное приложение
- использовать встроенные стили CSS – если использовать другие, то некоторые почтовые клиенты могут неправильно их отобразить
- прописывать атрибуты у всех элементов верстки – это нужно, чтобы почтовые службы не подставили свои значения, разрушив запланированную структуру письма
- задавать ширину письма – тогда на всех устройствах письмо будет помещаться в ширину экрана
Верстка интерактивных элементов
HTML-верстка email-писем позволяет добавить в рассылку интерактивные элементы с помощью AMP-технологии – блоки, с которыми пользователь может взаимодействовать. Например: сыграть в игру, полистать фото товара или оформить заказ.
Читать по теме: AMP в рассылках: плюсы и примеры использования
АМР-технология создавалась для ускорения загрузки мобильных страниц. Позже программисты поняли: если ее использовать в почте, то читатели смогут взаимодействовать с контентом письма. Так в email-рассылках появились интерактивные блоки с мобильной веб-страницей.
Основные плюсы технологии:
- Интерактивность – увеличивает конверсию в заказ или заявку благодаря возможности совершать действия прямо внутри письма.
- Актуальность – содержимое АМР-блока можно редактировать даже после отправки, что позволяет исправлять ошибки или обновлять информацию.
- Геймификация – повышает вовлечение в рассылку за счет тестов, опросов и мини-игр.
Читать по теме: Геймификация в email-рассылках – зачем нужна и из каких элементов состоит
Но минус технологии в том, что не все почтовые клиенты ее поддерживают. В России AMP-письма распознают только Gmail и Mail.ru. Для всех остальных почтовиков нужно верстать обычное письмо.
Итак, подведем итог про особенности работы в HTML-редакторе.
Плюсы верстки в HTML-редакторе
Можно делать сложный и красивый дизайн, которого не будет ни у кого другого, добавить форму заказа, игру, опрос, тест и прочие интерактивные элементы. Также с помощью HTML-верстки создаются важные для email-маркетинга письма – подборки с контентом, который создается автоматически с учетом поведения подписчика.
Минусы верстки в HTML-редакторе
Нужен программист для написания кода. Если создавать письмо самостоятельно, то его нужно постоянно тестировать, так как первое время будут появляться ошибки – где-то текст сместится с кнопки, где-то появится код вместо элемента верстки.
Хотите отправить свою первую рассылку, но не знаете, с чего начать? Пройдите бесплатный курс по email-маркетингу для начинающих от Sendsay. Всего 10 уроков отделяют вас от первой эффективной рассылки по клиентам.
Пройти первый урок уже сейчас →
Как проверить верстку письма
Перед рассылкой нужно обязательно проверить верстку, потому что у разных почтовых клиентов, браузеров и устройств разные возможности распознавания кода письма. Например, Outlook очень консервативный и не использует новые технологии верстки. Он часто не распознает сложный дизайн писем, из-за чего письмо выглядит не так, как планировал маркетолог.
Есть три основных способа проверить верстку письма для рассылки: предпросмотр в сервисе, тестовая отправка и использование сервисов для проверки.
Читать по теме: Как провести тестирование писем для email-рассылки – сервисы и рекомендации
1. Предпросмотр в сервисе рассылки
В редакторе сервиса верстки и рассылки писем должна быть функция предпросмотра. В Sendsay она есть в двух вариантах: с десктопа и смартфона – можно сразу посмотреть, как письмо будет адаптироваться под разные экраны.
2. Тестовая рассылка
В этом случае email-маркетолог отправляет письмо на свои почтовые ящики, а затем смотрит корректность верстки с разных почтовых клиентов и устройств.
Такая проверка занимает время, но позволяет отшлифовать верстку шаблона письма до идеального состояния. В Sendsay, например, тестовое письмо можно отправить прямо из интерфейса редактора, чтобы сразу внести правки.
3. Специальные сервисы проверки email-верстки
Самый эффективный вариант проверки – использовать специальные сервисы, например, Litmus и Email on Acid. Они позволяют посмотреть, как будет выглядеть письмо в разных почтовиках, браузерах и устройствах.
Читать по теме: 27 сервисов для создания эффективной email-рассылки
Если вы уже пользуетесь Email on Acid, его можно интегрировать в Sendsay. Тогда прямо в интерфейсе редактора будет доступен предпросмотр в разных клиентах, браузерах и устройствах – можно сразу увидеть ошибки в верстке и исправить их.
На что обращать внимание при верстке писем
Тщательно прорабатывать макет
Создавая макет для HTML-верстки, подумайте, насколько сложно реализовать вашу задумку. Например, чем больше блоков разных размеров, тем сложнее.
Также на сложность верстки письма для рассылки влияет количество иконок и текстовых блоков разной величины. Если дизайн рассылки требует нестандартных форматов – вынесите их на баннеры: вместо того, чтобы верстать в письме 5 иконок и подписей к ним, пусть дизайнер нарисует их на картинке.
Читать по теме: Как сделать макет письма для email-рассылки
Над динамическим контентом внутри писем тоже нужно тщательно подумать: смогут ли программисты реализовать идею. Например, подобрать товары, которые пользователь просматривал на сайте – легко. А сверстать рассылку с персональной подборкой товаров к празднику, опираясь на социально-демографические параметры подписчика – сложно.
Использовать только безопасные шрифты
У каждого почтового клиента есть определенный набор шрифтов, который он распознает. И если вы используете в рассылке неизвестный шрифт, почтовик заменит его на системный и внешний вид письма изменится.
Есть шрифты, которые распознаются всеми клиентами – их можно использовать в письмах, не беспокоясь за корректное отображение. Список ниже 👇
Читать по теме: Как подобрать шрифт для email-рассылки
Проверять корректность персонализации
Персональные данные читателя добавляются с помощью переменных – это специальный код, в который подтягиваются данные из анкеты получателя. Но проблема в том, что не у всех клиентов может быть заполнена нужная информация.
Например, вы хотите вставить в текст имя человека, но у некоторых подписчиков оно не заполнено. Тогда в письме они увидят пропуск на месте имени. Чтобы такого не было, сервисы рассылки позволяют делать несколько вариантов блока, в котором должна быть персонализированная информация:
- вариант 1 – у получателя указано имя и письмо отправляется в изначальном виде
- вариант 2 – у получателя не указано имя, поэтому ему отправляется письмо без личного обращения
- вариант 3 – у получателя не указано имя, поэтому ему отправляется письмо, в котором вообще нет блока с этим текстом
Читать по теме: Персонализация email-рассылок — 5 способов с примерами
Следить за весом письма
У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе.
Читать по теме: Ошибки отправки письма: коды и причины возникновения
Памятка по верстке писем
- Используйте блочный редактор, если не умеете программировать и нет возможности нанять верстальщика. Любой email-маркетолог разберется, как им пользоваться, и сможет быстро создавать рассылки.
- HTML-редактор нужен для создания сложных писем с динамическим контентом: персональные подборки, игры, тесты и опросы. Также он необходим для нестандартного дизайна, который выходит за рамки возможностей блочного редактора.
- Верстка писем обязательно должна быть адаптивной, чтобы письмо подстраивалось под размеры экранов десктопа и смартфона.
- Перед отправкой нужно проверить верстку письма с помощью функции предпросмотра, тестовой рассылки на почтовые ящики разных клиентов или специальных сервисах.
- Верстая письмо, нужно следить за его весом и корректной работой персонализации, также лучше использовать универсальные шрифты, теги и атрибуты кода.
- Не создавайте слишком сложные макеты для писем – их будет сложно реализовать, а еще это увеличит шансы, что верстка «разъедется» на смартфоне.
В заключение рекомендуем посмотреть и другие наши гайды по рассылкам:
- Гайд по контенту для писем: пишем текст, правильно его оформляем и придумываем тему
- Гайд по статистике рассылок: как ее собирать, анализировать и использовать для улучшения email-маркетинга
- Гайд по работе с базой email-рассылок: как ее собирать, сегментировать, привлекать и актуализировать
Кроме того, мы делимся полезной информацией в сфере digital-маркетинга в нашем телеграм-канале, при подписке на который дарим книгу «Email-маркетинг для бизнеса». Подробнее о том, как ее получить, рассказали в закрепленном сообщении канала.
Подключайте Sendsay, чтобы сделать ваш email-маркетинг мощнее 💪
