Как верстать HTML письма: пошаговое руководство с примерами + исходники шаблона письма для скачивания

Unisender

Подробнее о сервисе

Unisender — сервис для комплексной работы с рассылками. Здесь вы можете создать письмо с помощью шаблонов или конструктора, разослать его своей базе контактов и подключить дополнительные рассылки: по смс, в viber или в социальных сетях.

Выделим основные преимущества:

1. Помощь с базой подписчиков: сервис помогает собирать и пополнять базу
2. Конструктор писем: вы можете использовать готовые шаблоны или придумать свой дизайн
3. Подробные отчёты: сервис помогает отслеживать эффективность рассылок
4. Дополнительные функции: вы можете тестировать рассылки, добавлять всплывающие формы, персонализировать письма и сегментировать аудиторию
5. Интеграция с мессенджерами и соцсетями: сервис может собрать для вас базу email в фейсбуке или разослать смс-сообщения
6. Помощь с рассылками: на сайте сервиса есть блог с советами для новичков и для профи
7. Возможность ведения ваших рассылок: в премиум-тарифе Unisender всё сделает за вас

Mindbox

Подробнее о сервисе

Mindbox — сервис для автоматизации маркетинга, ориентированный на средний и крупный бизнес. Здесь можно создавать рассылки, push-уведомления и чат-боты.

Выделим основные преимущества:

1. Машинное обучение: сервис подскажет, в какое время и как часто отправлять рассылки
2. Семь каналов связи с клиентами: почта, sms, viber, мобильные и веб push-уведомления, чат-боты, in-App чаты
3. Тестирование: сервис поможет спрогнозировать выручку на основе контрольной группы

Выбрали подходящий сервис, но не знаете, что написать в самих письмах? Тогда читайте инструкцию, как правильно писать email-рассылки! Она поможет вам определиться со структурой и темой письма. Также вы узнаете, какие виды рассылок бывают.

Первые 5 шаблонов email-писем

1. Хороший, привлекательный шаблон электронного письма. Предварительный просмотр:Скачать бесплатно: шаблон 1
2. Корпоративный шаблон в серых тонах (подойдёт для крупных порталов, в качестве основы для рассылки электронных писем подписавшихся получателей.Предварительный просмотр:Скачать бесплатно: шаблон 2
3. Html письмо для сайта автомобильной тематики. Подойдёт для рассылок с автомобильного сайта, или сайта, связанного с грузоперевозками.Предварительный просмотр шаблона:Скачать бесплатно: шаблон 3
4. Ещё один бесплатный шаблон электронного письма автотематики.Просмотр:Скачать бесплатно: шаблон 4
5. Универсальный, большой и обязательно бесплатный шаблон, который подойдёт для любого типа рассылки.Просмотр:Скачать: шаблон 5

Figma

В отличие от Stripo, сервис предназначен не только для дизайна писем. Здесь можно создавать прототипы сайтов и приложений. И еще: сервис позиционирует себя как простой и удобный. На деле – придется чуть-чуть поразбираться.

Плюсы:

• Обучение для новичков – статьи, курсы и образовательные видео: все для вас. Если вы в дизайне ноль, посмотрите парочку уроков.
• Поддержка шрифтов для иконок – сервис поддерживает шрифты, с помощью которых вы сможете нарисовать иконки для письма.
• Декоративные элементы – инструмент «Текст» позволяет создавать логотипы, надписи и другие «буквенные» элементы, которые украсят письмо.
• Облачное хранение – все шаблоны хранятся в облаке. Вы сможете работать над макетом коллективно, а еще будете уверены, что все данные сохранены.
• Работа на Windows и MAC – и вы даже сможете собирать письмо через браузер! Невиданная щедрость!

Минусы:

• Англоязычный сервис – для Figma пока нет русской версии, и, что самое ужасное, нет программ-русификаторов. Разбираться в терминах дизайна придется на английском.
• Нет анимаций – в сервисе с таким мощным функционалом явно не хватает возможности делать гиф. А было бы удобно! 

Пример:

Вердикт – сервис отличный. Сами делаем письма в Figma. Одно из них – для магазина ВелоДрайв.

Товарная подборка – формат письма, который можно превратить в смертную скуку, если не продумать оформление. Мы сделали рассылку в корпоративных цветах ВелоДрайв – голубом и оранжевом.

Для кнопок выбрали разные цвета. Те кнопки, переход по которым для нас важнее, сделали контрастнее. «Забронировать время» и «Перейти в каталог» заметно выделяются среди остальных элементов – на них падает взгляд. Чтобы товарная подборка не показалась скучной, добавили текст в начале и конце письма. Итог: получилось свежее, приятное, а главное – информативное письмо.

HTML шаблон — Green Village

Скачать