Как создать email-рассылку, если не умеешь верстать

19 апреля 2021
Дарья Козырь
Время чтения: 5 мин

Если в вашей команде нет верстальщика, а вы не дружите с HTML — это не значит, что нужно отказываться от email-рассылок. Вы вполне можете справиться сами, просто следуйте нашим советам.

Дизайн писем очень важен. Красивые и качественные письма всегда вызывают у подписчиков положительные ассоциации с брендом. Можно ли самостоятельно, без дизайнеров и верстальщиков, создать письмо, которое подписчики будут ждать с нетерпением?

Можно, и в этом вам помогут блочные редакторы. У нашего сервиса по автоматизации маркетинга enKod есть интеграция со Stripo. Для создания писем нужно выбрать блоки с текстом, картинками, кнопками и иконками социальных сетей. Затем перетащить их в рабочее поле и заполнить своим контентом.

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

Что нужно знать о письмах перед версткой?

Есть общие правила для рассылок, которые нужно соблюдать. Вот они:

1. Следите за размером письма. Ширина не должна превышать 600 пикселей. Также мы не советуем делать письмо слишком длинным. Есть вероятность, что подписчик просто не долистает его до конца. Оптимальная длина — 1500 на 2000 пикселей.

2. Соблюдайте структуру. В каждом письме есть обязательные элементы:

  • Прехедер. Это фрагмент текста, который следует после имени отправителя и темы. Он рассказывает подписчику о том, что его ждет внутри письма.
  • Хедер. Его также называют шапкой письма. Чаще всего здесь размещают логотип, название компании и слоган. Этот блок создает первое впечатление о письме, поэтому важно, чтобы он был красивым и соответствовал стилю компании.
  • Тело. В этой части письма содержится весь основной контент.
  • Футер. В эту часть письма необходимо добавить блок с контактными данными компании, иконки соцсетей, чтобы подписчики могли следить за вами в других каналах, а также ссылку отписки.

3. Используйте разные форматы контента. Каждое письмо состоит из модулей — прямоугольных или квадратных блоков. В модули письма можно добавлять тексты, картинки, gif-изображения, видео и ссылки.

4. Выберите подходящий шрифт. Вот список шрифтов, которые почтовые сервисы отображают корректно: Arial, Arial Black, Georgia, Courier New, MS Sans Serif, Tahoma, Time New Roman, Trebuchet MS, Verdana. Если использовать для текста другие шрифты, почтовики заменят их на стандартные.

5. Поработайте над стилем писем. Рассылки должны быть продолжением вашего сайта. Это нужно для того, чтобы подписчики лучше вас запомнили. В письме нужно использовать те же шрифты, цветовые сочетания, логотипы и графические элементы, что и на сайте. Если почтовики не поддерживают ваш корпоративный шрифт, выберите альтернативный, но похожий вариант.

6. Уберите все лишнее. Чтобы ваши рассылки успешно прошли проверку спам-фильтров и хорошо отображались у подписчиков, не стоит использовать сокращенные ссылки, JavaScript и Flash-анимацию.

7. Добавьте текст. Отсутствие текста, тоже может стать подозрительным сигналом для спам-фильтров. Соблюдайте соотношение — 25% текста, и 75% картинок.

Приступаем к верстке письма

1. Создаем макет

Для начала, нужно понять как будет выглядеть письмо — где будут расположены колонки с текстом, изображения и кнопки. Важно, чтобы в рассылке были все элементы, о которых мы говорили выше — хедер, тело и футер, а между модулями был воздух. Ширина прототипа не должна быть больше 600 пикселей. Макет можно создать программах Figma, Sketch и Photoshop.

2. Добавляем весь необходимый контент

Теперь в письмо можно добавлять нужные элементы — текстовые блоки, картинки, gif-изображения, видео и кнопки. Обязательно следите за тем, чтобы расстояние между элементами было органичным.

3. Открываем блочный редактор

Теперь самое интересное — редактируем наше письмо и доводим его до ума. Объясним как это сделать на примере сервиса Stripo. Для начала вам нужно выбрать пустой шаблон и заполнить его пустыми структурами согласно макету — хедер, тело письма и футер. Для этого нужно зайти в раздел “контент” и перетащить нужные вам блоки на рабочее поле. После этого заполните их элементами, согласно вашему макету.

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

Создание письма в блочном редакторе

Все изображения, которые вы добавите в шаблон, можно редактировать. Например, обрезать, изменять размер, добавлять на них текст, рамки и менять фоны.

В сервисе также можно использовать теги персонализации для того, чтобы обращаться к подписчикам по имени. Чтобы это сделать, кликните на вкладку “персонализация”, выберите сервис для отправки рассылок, которым вы пользуетесь, а затем нужный параметр (имя, фамилия). После этого сервис рассылок автоматически подставит в этот параметр нужные данные.

Еще один важный момент, на который нужно обратить внимание — кнопки CTA. Чтобы пользователи кликали на кнопки они должны быть заметными, а призывы к действию — лаконичными. Чтобы добавить кнопку, перетащите соответствующий блок в рабочее поле и откройте настройки элемента. Затем добавьте ссылку и текст, выберите шрифт, цвет кнопки и установите внутренние границы.

Выводы:

  • Создать письмо самостоятельно намного проще, чем кажется.
  • Во время верстки письма нужно соблюдать правила.
  • Важно следить за размером писем и не забывать про структуру рассылок.
  • Чтобы рассылка не угодила в спам и хорошо отображалась у получателей, нужно избавиться от сокращенных ссылок JavaScript и Flash-анимации.
  • Важно выбирать правильные шрифты и следить за соотношением визуала и текста.
  • Перед версткой нужно создать макет рассылки.
  • Письмо можно легко создать в блочном редакторе.

Надеемся, что теперь вы с легкостью создадите классные и красивые письма. А если возникнут проблемы с версткой, наши эксперты всегда готовы помочь советом. ?

Другие наши статьи

В этой статье собрала подробный сравнительный обзор функционала сервисов enKod и mindbox. Расскажу, какие задачи в каждом сервисе можете реализовать, а какой выбрать – решать вам =)

Создание email-писем стало гораздо проще – теперь вёрстка не требует глубоких знаний в HTML и CSS. Если хотите научиться не только создавать красивые макеты писем для рассылки, но и сами письма, – эта статья для вас. Расскажу, как можно использовать Figma для вёрстки email-писем в enKod.

Эффективная рассылка может значительно увеличить продажи за счёт повышения лояльности клиентов – текущих и потенциальных. В этой статье рассмотрим ключевые аспекты создания текстов для рассылок потенциальным клиентам на примере готовых шаблонов.