Как создать и оформить красивое письмо для рассылки

Глеб Клюйко

Технічний райтер

Как создать красивое email-письмо для рассылки

Как создать красивое письмо для рассылки

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

Чтобы получатели с нетерпением ждали ваши письма, мы расскажем, как просто сделать красивое письмо для рассылки в нашем редакторе шаблонов.

Как использовать функцию Drag-and-Drop

Несколько минут — именно столько теперь занимает создание письма, ведь мы уже выполнили за вас всю основную работу. Даже новичок сможет быстро создать качественное письмо. Используйте уже готовые блоки: кнопки призыва к действию, иконки соцсетей, карточки товаров. Просто перетащите нужный вам блок в емейл и добавьте в него изображение или текст.

Работа с редактором eSputnik

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

— Андрей Тараканов

Как оформлять разные элементы письма

Предзаголовок (Preheader) — содержит текст, который в почтовом ящике отображается сразу за темой письма. Идеальная высота — 50-65 пикселей.

Заголовок (Header) — как правило, в нем размещается меню и логотип. Если лого большое, можно задать высоту 150-200 пикселей, если нет — хватит 70-ти.

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

Текстовый блок — служит для раскрытия темы письма, на должно хватать 5-7 предложений. В одной строке не должно быть более 75 знаков. Высота блока — 500-600 пикселей.

Карточки товаров — обычно используют не больше 3-х карточек в одной строке и 9-ти во всем письме, но можно использовать и технику коллажа. Слишком тяжелые изображения тормозят загрузку письма, но низкокачественные и неоригинальные фото товаров использовать тоже не стоит. Чтобы уменьшить вес изображения, сжимайте их в специальных сервисах.

Кнопка Call To Action (СТА) — чем четче сформулирован призыв, тем больше получателей совершит целевое действие. Ограничений по размерам нет.

Футер — здесь размещаются контакты компании, иконки соцсетей и ссылка на отписку. Оптимальный размер — 600x200 пикселей.

Создать свою первую рассылку

Что делать, если письмо не отображается у клиента?

Иногда письмо может не отобразиться в почтовых сервисах из-за множества ограничений для его содержания и оформления, например, размер письма или пользовательские шрифты. Но отправляя рассылку любой маркетолог хочет, чтобы пользователь увидел емейл таким, каким его задумал дизайнер. Что же делать?

Обязательным компонентом каждого письма должна стать ссылка “Просмотреть в браузере”. Это поможет получателю легко переключиться из почтового ящика на корректную HTML-версию. Статистика показывает, что количество кликов по такой ссылке не только является хорошей практикой при работе с клиентами, но и отображает, какой процент клиентов не смог прочитать письмо в своей почте.

В связи с появлением мобильных устройств разных производителей проверить, как письмо будет отображено в почтовых сервисах непросто, в отличие от браузеров. Ссылка “Просмотреть в браузере” поможет донести до пользователя информацию, даже если форматирование сломается.

Ссылка "Просмотреть в браузере"

Как добавлять в письмо изображения

Иногда поиск подходящей картинки может стать непростой задачей — сложно найти фото, не защищенное авторским правом, еще и в хорошем качестве. С eSputnik вы забудете об этой проблеме: в редактор встроен банк бесплатных изображений с удобным поиском по темам. Выбранную картинку остается перетащить в нужный блок емейла. Конечно, вы можете добавлять и собственные изображения, загружая их в письмо или указывая ссылку.

Встроенный банк изображений

Как редактировать изображения в письме

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

Встроенный фотошоп в системе eSputnik

Как добавить в письмо ролловер

Ролловер — это очень полезная фишка для eCommerce-рассылок. Когда пользователь наводит курсор на изображение, оно заменяется на альтернативное. С его помощью вы можете показать разные стороны товара, его важные элементы, варианты в разном цвете и т.п. Главное, чтоб картинки были одинакового размера.

Ролловер eSputnik

Как сделать HTML-письмо

Для профессионалов, хорошо разбирающихся в HTML-коде, у нас есть встроенный редактор HTML. В нем реализованы такие полезные функции, как поиск, подсветка синтаксиса и автоматическое закрытие тегов. Благодаря им вы сможете комфортно сверстать целое письмо или его отдельный блок с собственными стилями и форматированием.

HTML-редактор в системе eSputnik

Система eSputnik оказалась очень интуитивно понятной и простой в использовании: письма легко создавать, редактировать, проводить эксперименты с разными темами, содержанием и пр. Мы увидели, что на е-мейл рассылках можно хорошо зарабатывать. Главное - иметь план и делать их качественно и регулярно

— Елена Мельниченко

Как автоматически заполнять карточки товаров 

Теперь у вас появится масса свободного времени на творческие задачи, ведь данные для карточек товаров больше не нужно вносить вручную. Используйте smart-блоки — это автоматический генератор контента в письмах. Укажите в smat-блоке ссылку на карточку товара на сайте, и в емейл автоматически подтянется его описание, фото и цена.

Smart-блоки в системе eSputnik

Как создать адаптивное письмо

Адаптивное письмо выглядит одинаково хорошо и на компьютере, и на планшете, и на мобильном. Учитывая, что большая часть получателей открывает письма на мобильных, очень важно адаптировать каждую рассылку. Создание адаптивного письма может стать очень сложной и трудоемкой задачей, но только не в eSputnik. Здесь вы настраиваете ее одним щелчком мыши, причем как для всего письма, так и для его отдельных элементов. Отдельные блоки при показе на мобильном можно скрыть — например, текстовые, если они занимают много места.

Адаптивные шаблоны в редакторе eSputnik

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

— Дарья Мазурина

Как добавить видео в письмо

Традиционный способ выглядит так:

  1. Вставьте ссылку в поле «Ссылка на видео» и подождите, пока подгрузится титульная картинка.
  2. Альтернативный текст пропишется автоматически.
  3. Задайте цвет кнопке «Play» по своему усмотрению.

Добавление видео в редакторе eSputnik

Новый способ — технология AMP в емейлах. С ней можно вставить в письмо не только видео, а целый сайт :)

Last post

Как красиво написать письмо

Тут работает простое правило — чем проще, тем лучше. Специалисты рекомендуют посвящать одно письмо одному целевому действию.

При выборе шрифта для рассылки будьте осторожны: почтовые клиенты поддерживают не все шрифты. С уверенностью вы можете использовать 10: Arial, Courier / Courier New, Geneva, Georgia, Helvetica, Palatino, Tahoma, Times New Roman, Trebuchet MS, Verdana. Если почтовик не поддерживает выбранный вами шрифт, он заменит его на собственный, установленный по умолчанию. Для экспериментаторов в eSputnik есть набор нестандартных шрифтов:

Шрифты в редакторе eSputnik

Создавайте красивые письма

Заключение

Мы не понаслышке знаем, как сделать красивое письмо для рассылки, потому что каждый день отправляем тысячи рассылок и сотрудничаем с самым широким спектром онлайн-бизнеса: от fashion-индустрии до медицинских компаний. Функции нашего редактора разрабатываются с учетом специфических нужд каждого из них.

Попробуйте и убедитесь сами!

4.8 из 5 на основе 21 оценок

Глеб Клюйко

Технічний райтер

Комментарии 0