Собрали для вас удобные бесплатные инструменты, которые помогут маркетологу самостоятельно собрать рассылку: от визуальных редакторов и вставки таймера до оптимизации кода ради уменьшения исходного веса.
22 мая 2020
Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога
Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога
Собрали ссылки на бесплатные инструменты, чтобы делать красивые HTML-письма для email-рассылок без верстальщика и Adobe Photoshop. Рассмотрим:
Визуальные редакторы для email-рассылок
Главный инструмент для создания email-рассылки — визуальный редактор HTML-писем. Чтобы собрать рассылку, достаточно выбрать фон, добавить изображения, текст и проставить ссылки. В большинстве редакторов есть готовые шаблоны писем — можно использовать, если нет своего дизайна. Если свой дизайн есть, его можно перенести в редактор в виде блоков или готового HTML-кода. Если своего дизайна нет и шаблоны визуального редактора не подходят, поищите вдохновение на сайте Really Good Emails, где хранятся сотни примеров email-рассылок.
Stripo
Статья:
Всё об AMP-рассылках
Stripo — бесплатный онлайн email-редактор для создания адаптивных шаблонов. Адаптивный шаблон изменяется в зависимости от устройства читателя и одинаково хорошо выглядит на экране мобильного телефона или компьютера. У Stripo дружелюбный интерфейс, чат поддержки внутри системы, можно создавать AMP-письма (письма с динамическим контентом можно отправлять и через Mindbox). Есть приятные бонусы вроде интерактивного таймера внутри письма. В бесплатном тарифе ограниченное количество хранимых шаблонов и лимит на отправку тестовых писем в сутки.
Полученное письмо можно экспортировать в один из многих рассыльщиков (Mailchimp, eSputnik, GetResponse и т. д.) или получить архив с готовым HTML-файлом и изображениями, который можно загрузить куда угодно.
Интерфейс визуального редактора Stripo
BEE
BEE — бесплатный визуальный редактор адаптивных писем из Калифорнии. Меньше возможностей, чем у Stripo — нет поддержки технологии AMP и чата внутри системы, зато меньше ограничений: создавать рассылки и отправлять тестовые письма можно в любых количествах. Много бесплатных шаблонов, с которых можно начать дизайн письма.
Интерфейс визуального редактора BEE
EmailMaker
EmailMaker — блочный редактор писем, созданный агентством Email Soldiers. Позволяет загрузить код письма без предварительной разметки: в 90% случаев EmailMaker понимает, где какие блоки, и автоматически преобразует их в drag-and-drop-элементы, которые можно переиспользовать. Поддерживает все типы верстки, AMP-рассылки и табличную адаптивность, что важно для нормального отображения писем в «Яндекс.Почте».
В отличие от других редакторов код, с которым работает пользователь, — это и есть код письма, поэтому его можно копировать в любой рассыльщик. В будущем появится возможность экспортировать код автоматически — эту и другие фичи можно посмотреть в публичном роадмапе.
Бесплатный тестовый аккаунт ограничен десятью письмами, самая дорогая подписка без ограничений обойдется в 8 тысяч рублей в месяц.
Интерфейс визуального редактора EmailMaker
Tilda
Tilda Publishing — набор инструментов для создания контента в интернете. С их помощью можно собрать сайт, лендинг-страницу, интернет-магазин и рассылку. Создание электронных рассылок требует платного тарифа Tilda Personal (6000 рублей/год), но можно воспользоваться бесплатной версией на 2 недели. В сравнении с Stripo или BEE интерфейс не очень удобный, а настроек — мало. Не поддерживает AMP-технологию.
Собранное HTML-письмо можно экспортировать в виде кода. Вопреки ожиданиям, рассылки в Tilda — скорее приятное дополнение к конструктору посадочных страниц, нежели самостоятельное решение.
Интерфейс визуального редактора рассылок Tilda
Редакторы изображений
Canva
Canva — бесплатный графический редактор фотографий и иллюстраций. Есть стоковые архивы изображений, готовые шаблоны, инструменты для редактирования. Целиком Photoshop заменить не сможет — с нуля нарисовать что-то не получится, но подготовить нужные картинки для рассылки — легко.
Платная версия дает доступ к дополнительным изображениям и некоторым функциям, вроде конвертации статичной картинки в GIF-анимацию.
Интерфейс Canva очень удобный: создать коллаж можно за пару секунд
Fotor
Fotor — простой онлайн-фоторедактор, бесплатный и не требует регистрации. Пожалуй, закрывает большинство задач по редактированию изображений — от обрезки и коррекции, до наложения текста или рамки.
Скриншот редактора Fotor
Спецэффекты: таймеры и персонализированные картинки, emoji — всё для «вау-эффекта»
Таймеры для акций и персонализированные картинки
Motionmail
Motionmail позволяет генерировать и вставлять в письма таймеры. Регистрация бесплатная, количество таймеров не ограничено. Любой из часовых поясов, несколько дизайнов. Генерируете таймер и вставляете в письмо. Единственный минус — жуткий копирайт Powered by Motionmail на бесплатной версии.
Интерфейс создания таймера в Motionmail
Таймер, сгенерированный в бесплатной версии Motionmail:
Sendtric
Sendtric — еще один генератор таймеров. В отличие от Motionmail, в бесплатной версии настроек дизайна меньше, зато генерируется таймер без регистрации и уродливых копирайтов. Зашли на главную, указали настройки таймера, сгенерировали — и готово. Есть ограничение: счетчик ограничен 30 днями, но для краткосрочных акций этого хватит.
Создать таймер в Sendtric можно прямо на главной странице
Таймер, сгенерированный в бесплатной версии Sendtric
NiftyImages
NiftyImages — позволяет не только генерировать таймеры, но и персонализированные изображения. Например, можно добавить обращение по имени прямо в изображении. Достаточно на месте имени подставить переменную, которая отвечает за вывод имени читателя.
Бесплатный тарифный план ограничен 10 тысячами использований, поэтому без платной подписки запаса хватит разве что на триггерную рассылку. Зато можно грузить свои варианты изображений, если не хватит встроенных шаблонов.
Генераторы «гифок»
Gifius
Gifius — создание GIF-анимации из статичных фотографий. Бесплатный и очень простой: загружаете фотографии, выбираете последовательность кадров и размер.
Сохраняете получившуюся GIF-анимацию.
«Гифка», собранная в Gifius из двух кадров: менеджеры Mindbox на награждении Tagline 2019
ezGIF
ezGIF — расширенный инструмент для создания GIF-анимации. Можно конвертировать видео в GIF, нанести текст, отредактировать анимацию покадрово, наложить фильтры или изменить скорость.
Интерфейс в ezGIF выглядит не очень, зато много полезных функций
Иконки для писем
Flaticon — гигантский сток с иконками на любой вкус. Может пригодиться не только в рассылках, но и при работе с презентациями, сложными визуальными картами и так далее. Огромный выбор даже среди бесплатных коллекций. Неплохая и полностью бесплатная альтернатива Flaticon — The Noun Project.
Даже бесплатных коллекций иконок на Flaticon вполне достаточно
Emojis
? emojipedia
Emojipedia — сборник всех эмоджи во вселенной. Найдите понравившийся эмоджи и скопируйте в текст письма или тему. Можно также посмотреть, как эмоджи будет выглядеть на всех популярных устройствах ?
Emojipedia дает возможность просмотреть отображение эмоджи на разных устройствах
Технические инструменты: удаление фона на картинке, оптимизация веса письма
Remove.bg
Remove.bg — инструмент для удаления фона изображения. Помогает, если у вас есть фото модели, которую нужно поместить на однотонный фон. Справляется даже со сложными изображениями, например, где есть «засветы». Есть клиент для Mac и Windows. Бесплатная версия ограничивает разрешение обработанных картинок, но для email-рассылок его хватает.
Исходное изображение
То же изображение, но обработанное в Remove.bg
HTML Optimizer
HTML Optimizer убирает лишние отступы, пробелы и прочую «мишуру», которая занимает место в HTML-коде. Вставляете код, запускаете обработку, получаете «очищенный» код. При этом письмо для читателя никак не меняется — только грузится быстрее.
В некоторых случаях оптимизация кода экономит до ~20% от исходного веса. Почему это полезно? Если ваше письмо тяжелее 102Кб, оно «обрежется» в Gmail. Оптимизация веса — один из способов, как этого избежать. Важно добавить, что в визуальном редакторе рассылок Stripo есть встроенная функция оптимизации кода.
Протестировал HTML Optimizer на рассылке бренда All We Need — сократил вес письма на 13%
Что важно запомнить
- Хотите быстро сделать красивое письмо — воспользуйтесь визуальным редактором. Подойдет Stripo или Bee.
- Используйте шаблоны рассылок, чтобы не придумывать дизайн с нуля.
- Добавьте «спецэффекты» — таймер Sendtric, gif-анимацию с помощью ezGIF, иконки с Flaticon или красивое изображение из Canva.
- Оптимизируйте вес письма, чтобы уложиться в ограничение Gmail на 102Кб с помощью HTML Optimizer.
