Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога

Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога

Визуальные редакторы для email-рассылок

Главный инструмент для создания email-рассылки — визуальный редактор HTML-писем. Чтобы собрать рассылку, достаточно выбрать фон, добавить изображения, текст и проставить ссылки. В большинстве редакторов есть готовые шаблоны писем — можно использовать, если нет своего дизайна. Если свой дизайн есть, его можно перенести в редактор в виде блоков или готового HTML-кода. Если своего дизайна нет и шаблоны визуального редактора не подходят, поищите вдохновение на сайте Really Good Emails, где хранятся сотни примеров email-рассылок.

Stripo

Stripo — бесплатный онлайн email-редактор для создания адаптивных шаблонов. Адаптивный шаблон изменяется в зависимости от устройства читателя и одинаково хорошо выглядит на экране мобильного телефона или компьютера. У Stripo дружелюбный интерфейс, чат поддержки внутри системы, можно создавать AMP-письма (письма с динамическим контентом можно отправлять и через Mindbox). Есть приятные бонусы вроде интерактивного таймера внутри письма. В бесплатном тарифе ограниченное количество хранимых шаблонов и лимит на отправку тестовых писем в сутки.
Полученное письмо можно экспортировать в один из многих рассыльщиков (Mailchimp, eSputnik, GetResponse и т. д.) или получить архив с готовым HTML-файлом и изображениями, который можно загрузить куда угодно.
Интерфейс визуального редактора Stripo
Интерфейс визуального редактора Stripo

BEE

BEE — бесплатный визуальный редактор адаптивных писем из Калифорнии. Меньше возможностей, чем у Stripo — нет поддержки технологии AMP и чата внутри системы, зато меньше ограничений: создавать рассылки и отправлять тестовые письма можно в любых количествах. Много бесплатных шаблонов, с которых можно начать дизайн письма.
Интерфейс визуального редактора BEE
Интерфейс визуального редактора BEE

EmailMaker

EmailMaker — блочный редактор писем, созданный агентством Email Soldiers. Позволяет загрузить код письма без предварительной разметки: в 90% случаев EmailMaker понимает, где какие блоки, и автоматически преобразует их в drag-and-drop-элементы, которые можно переиспользовать. Поддерживает все типы верстки, AMP-рассылки и табличную адаптивность, что важно для нормального отображения писем в «Яндекс.Почте».
В отличие от других редакторов код, с которым работает пользователь, — это и есть код письма, поэтому его можно копировать в любой рассыльщик. В будущем появится возможность экспортировать код автоматически — эту и другие фичи можно посмотреть в публичном роадмапе.
Бесплатный тестовый аккаунт ограничен десятью письмами, самая дорогая подписка без ограничений обойдется в 8 тысяч рублей в месяц.
EmailMaker блочный редактор писем
Интерфейс визуального редактора EmailMaker

Tilda

Tilda Publishing — набор инструментов для создания контента в интернете. С их помощью можно собрать сайт, лендинг-страницу, интернет-магазин и рассылку. Создание электронных рассылок требует платного тарифа Tilda Personal (6000 рублей/год), но можно воспользоваться бесплатной версией на 2 недели. В сравнении с Stripo или BEE интерфейс не очень удобный, а настроек — мало. Не поддерживает AMP-технологию.
Собранное HTML-письмо можно экспортировать в виде кода. Вопреки ожиданиям, рассылки в Tilda — скорее приятное дополнение к конструктору посадочных страниц, нежели самостоятельное решение.
Интерфейс визуального редактора рассылок Tilda
Интерфейс визуального редактора рассылок Tilda

Редакторы изображений

Canva

Canva — бесплатный графический редактор фотографий и иллюстраций. Есть стоковые архивы изображений, готовые шаблоны, инструменты для редактирования. Целиком Photoshop заменить не сможет — с нуля нарисовать что-то не получится, но подготовить нужные картинки для рассылки — легко.
Платная версия дает доступ к дополнительным изображениям и некоторым функциям, вроде конвертации статичной картинки в GIF-анимацию.
Интерфейс Canva очень удобный: создать коллаж можно за пару секунд
Интерфейс Canva очень удобный: создать коллаж можно за пару секунд

Fotor

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

Спецэффекты: таймеры и персонализированные картинки, emoji — всё для «вау-эффекта»

Таймеры для акций и персонализированные картинки

Motionmail

Motionmail позволяет генерировать и вставлять в письма таймеры. Регистрация бесплатная, количество таймеров не ограничено. Любой из часовых поясов, несколько дизайнов. Генерируете таймер и вставляете в письмо. Единственный минус — жуткий копирайт Powered by Motionmail на бесплатной версии.
Интерфейс создания таймера в Motionmail
Интерфейс создания таймера в Motionmail
Таймер, сгенерированный в бесплатной версии Motionmail:
Таймер сгенерированный в бесплатной версии Motionmail

Sendtric

Sendtric — еще один генератор таймеров. В отличие от Motionmail, в бесплатной версии настроек дизайна меньше, зато генерируется таймер без регистрации и уродливых копирайтов. Зашли на главную, указали настройки таймера, сгенерировали — и готово. Есть ограничение: счетчик ограничен 30 днями, но для краткосрочных акций этого хватит.
Создать таймер в Sendtric можно прямо на главной странице
Создать таймер в Sendtric можно прямо на главной странице
Таймер, сгенерированный в бесплатной версии Sendtric
Таймер сгенерированный в бесплатной версии Sendtric

NiftyImages

NiftyImages — позволяет не только генерировать таймеры, но и персонализированные изображения. Например, можно добавить обращение по имени прямо в изображении. Достаточно на месте имени подставить переменную, которая отвечает за вывод имени читателя.
Бесплатный тарифный план ограничен 10 тысячами использований, поэтому без платной подписки запаса хватит разве что на триггерную рассылку. Зато можно грузить свои варианты изображений, если не хватит встроенных шаблонов.

Генераторы «гифок»

Gifius

Gifius — создание GIF-анимации из статичных фотографий. Бесплатный и очень простой: загружаете фотографии, выбираете последовательность кадров и размер.
Сохраняете получившуюся GIF-анимацию.
«Гифка», собранная в Gifius из двух кадров
«Гифка», собранная в Gifius из двух кадров: менеджеры Mindbox на награждении Tagline 2019

ezGIF

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

Иконки для писем

Flaticon — гигантский сток с иконками на любой вкус. Может пригодиться не только в рассылках, но и при работе с презентациями, сложными визуальными картами и так далее. Огромный выбор даже среди бесплатных коллекций. Неплохая и полностью бесплатная альтернатива Flaticon — The Noun Project.
Иконки на Flaticon
Даже бесплатных коллекций иконок на Flaticon вполне достаточно

Emojis

? emojipedia

Emojipedia — сборник всех эмоджи во вселенной. Найдите понравившийся эмоджи и скопируйте в текст письма или тему. Можно также посмотреть, как эмоджи будет выглядеть на всех популярных устройствах ?
Иконки на Emojipedia
Emojipedia дает возможность просмотреть отображение эмоджи на разных устройствах

Технические инструменты: удаление фона на картинке, оптимизация веса письма

Remove.bg

Remove.bg — инструмент для удаления фона изображения. Помогает, если у вас есть фото модели, которую нужно поместить на однотонный фон. Справляется даже со сложными изображениями, например, где есть «засветы». Есть клиент для Mac и Windows. Бесплатная версия ограничивает разрешение обработанных картинок, но для email-рассылок его хватает.
Исходное изображение
Исходное изображение
Изображение, но обработанное в Remove.bg
То же изображение, но обработанное в Remove.bg

HTML Optimizer

HTML Optimizer убирает лишние отступы, пробелы и прочую «мишуру», которая занимает место в HTML-коде. Вставляете код, запускаете обработку, получаете «очищенный» код. При этом письмо для читателя никак не меняется — только грузится быстрее.
В некоторых случаях оптимизация кода экономит до ~20% от исходного веса. Почему это полезно? Если ваше письмо тяжелее 102Кб, оно «обрежется» в Gmail. Оптимизация веса — один из способов, как этого избежать. Важно добавить, что в визуальном редакторе рассылок Stripo есть встроенная функция оптимизации кода.
HTML Optimizer
Протестировал HTML Optimizer на рассылке бренда All We Need — сократил вес письма на 13%

Что важно запомнить

  • Хотите быстро сделать красивое письмо — воспользуйтесь визуальным редактором. Подойдет Stripo или Bee.
  • Используйте шаблоны рассылок, чтобы не придумывать дизайн с нуля.
  • Добавьте «спецэффекты» — таймер Sendtric, gif-анимацию с помощью ezGIF, иконки с Flaticon или красивое изображение из Canva.
  • Оптимизируйте вес письма, чтобы уложиться в ограничение Gmail на 102Кб с помощью HTML Optimizer.