Как сделать красивое email письмо
10 советов по оформлению Email рассылок
Мы уже не раз писали в наших статьях о значимости дизайна при создании email-кампании. «Design is everything», — кричат прогрессивные иностранные маркетологи, PR-менеджеры и дизайнеры. Красивое оформление фирменных материалов, начиная от сайта компании и заканчивая рекламными листовками и постами в социальных сетях — залог популярности бизнеса у современного покупателя. Email рассылки не должны быть исключением.
В этой статье делимся с вами десятью самыми важными и актуальными принципами привлекательных писем.
Первое впечатление
Эффективный email-дизайн — не только правильное цветовое решение и подбор красивой картинки для письма. Действие дизайна начинается еще в папке «Входящие» — до того, как подписчик нажал на кнопку «Открыть». Поэтому стоит уделять особое внимание следующим пунктам.
1. Графа «От кого»
Первая причина того, что пользователи открывают письма — они узнают адресанта. Постарайтесь сделать так, чтобы ваши подписчики без проблем распознавали ваше имя отправителя и, не задумываясь, сразу же переходили к чтению письма. Не используйте общие названия вроде «do-not-reply», «news» и тому подобные. Идеальный вариант: название компании + имя одного из её сотрудников — например, «Елена из Имобис».
2. Тема письма и прехедер
Тема должна привлекать внимание, вызывать интерес и держать небольшую интригу, давая подписчику дополнительную причину открыть послание. Не жалейте тратить больше времени на её формулировку — уместить посыл всего письма в 32-50 знаках не так уж просто.
Чтобы не попасть в папку «Нежелательные письма», конечно же, избегайте CAPS LOCK и обилия восклицательных знаков.
В помощь основной теме письма используйте прехедер — дополнительное поле, которое поможет получателю узнать больше о содержании письма.
Эстетическое восприятие
Если верить исследованию компании Constant Contact за 2014 год, около 75% пользователей немедленно удаляют письмо, если оно некорректно отображается на их мобильном девайсе. К сегодняшнему дню это число, несомненно, возросло. Итак, что следует сделать, чтобы дизайн письма вызвал у подписчиков положительные эмоции?
3. Используйте адаптивный дизайн
Как мы уже неоднократно говорили, это очень важно. Ширина макета не превышает 600 пикселей, а размер кнопки варьируется от 35 до 47 пикселей (для удобного нажатия пальцем).
4. Сделайте свои email письма частью бренда
Узнаваемость, узнаваемость и еще раз узнаваемость. Брендированность электронных писем помогает выделяться среди тысячи других сообщений. Включите в макет письма логотип компании, создайте стандартный шаблон, который можно будет лишь немного видоизменять от рассылки к рассылке.
5. Контролируйте набор шрифтов
Не стоит изощряться с разнообразием стилей, тем самым перегружая общий вид письма. Выберете один-два основных шрифта, которые станут вашими фирменными, и всегда используйте только их.
6. Найдите правильный цветовой баланс
Фирменные цвета, которые будут сочетаться с логотипом — отличный вариант. Не перенасыщайте письма яркими частями, оставляйте больше «свободного» светлого пространства: такие письма и информация в них воспринимается подписчиками гораздо легче. При заливке основного заголовка или мотивационного посыла избегайте светлых оттенков (даже если цвет, например, ярко-оранжевый) – расставить акценты и выделиться помогут именно тёмные надписи. Как показывает практика, только изменение цвета мотивирующего текста приводит к увеличению числа целевых кликов на 6,64%.
Призыв к действию
Предыдущие советы помогают создать письмо, которое подписчикам захочется открыть и прочитать. Однако это не совсем то, что нам нужно. Основная цель любой email-кампании — совершение пользователем какого-либо потребительского действия.
7. Вставляйте, по крайней мере, один призыв к действию
Ясный, четкий и понятный он должен находиться в начале письма. А после – кнопка или ссылка call-to-action, яркая, заметная и удобная для нажатия.
8. Вставляйте социальные кнопки
Ссылки на ваши аккаунты в социальных сетях — это отличный способ повысить эффективность вашего бизнеса даже с помощью информационных рассылок. Вставляя ссылки на социальные сети, вы получаете дополнительную возможность взаимодействия с собственной аудиторией на других интернет-площадках.
Уверенность в успешной доставке
В заключение хотелось бы рассказать, как увеличить шансы попадания сообщений в папку «Входящие», а не в папку с «Нежелательными письмами».
9. Будьте осторожны с размерами вложений
Большинство почтовых провайдеров ограничивают возможный объем медиа-вложений в теле письма. Придерживайтесь размера 10 МБ и ниже, чтобы избежать каких-либо проблем с доставкой рассылки.
Не стоит вставлять картинки большого разрешения: ширина макета письма, как мы уже выяснили, не должна превышать 600 пикселей, поэтому не имеет смысла использовать изображение больше этого значения.
Как отправить HTML-письмо: 4 простых способа
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Все email-письма можно разделить на два вида: Plain Text и HTML. Первые вы видели и писали много раз — это обычное текстовое сообщение, в котором можно выбрать шрифт или вставить гиперссылки. HTML-письма часто отправляют бренды: в них много картинок, есть кнопки, макет часто разделен на несколько колонок.
Кажется, что для создания HTML-писем нужно быть верстальщиком 80-го уровня. Но это не так: создать красивое письмо можно совсем без знаний в дизайне и верстке.
Я расскажу, как подготовить шаблон email и отправить его — через сервис рассылок или обычную почту.
Как создать HTML-письмо
Задизайнить и сверстать письмо можно четырьмя способами.
В блочном редакторе
Блочный редактор помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Письмо составляется по принципу конструктора Lego — из смысловых блоков разных размеров, которые вы заполняете контентом. Шаблон настраивается под конкретный проект в блочном редакторе: иногда можно обойтись только заменой картинок и текста.
Плюсы HTML-верстки в блочном редакторе | Минусы HTML-верстки в блочном редакторе |
+ не требует знаний HTML и CSS |
+ большой выбор редакторов
+ в каждом редакторе доступна база готовых шаблонов, на основе которых можно сверстать свое письмо
— при создании писем вы ограничены элементами и структурой, которые доступны в редакторе
Как создать HTML-письмо в блочном редакторе
Создавать письмо удобнее сразу в сервисе рассылки, которым вы пользуетесь: сверстали письмо, отправили его и потом анализируете статистику. К тому же, не придется подгонять шаблон под требования сервиса. Для примера я взял встроенный блочный редактор UniSender.
Предлагаю создать HTML-письмо на основе готового шаблона в редакторе UniSender:
2. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-адресов, на которые вы будете слать письма.
3. Начните создавать email-рассылку в сервисе : пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите в «Рассылки» → «Email».
4. Выберите пункт «Блочный редактор». Вы также можете сверстать письмо на основе шаблонов писем, выбрав пункт «Шаблоны».
5. Выберите «Заполненный шаблон» — так будет легче сверстать письмо. В этот шаблон можно подставить любой текст, картинки или кнопку. Для этого перетаскивайте нужный блок из левой панели в макет письма, а затем кастомизируйте его.
6. Сохраните шаблон и нажмите «Продолжить». В открывшемся окне можно будет отредактировать шаблон или изменить параметры рассылки. Также сервис покажет вес письма (чем меньше, тем лучше), и предложит отправить пробное.
7. Отправьте письмо через сервис рассылок. Выберите базу контактов, которую вы загрузили в самом начале. Вы также можете нажать «Сохранить как шаблон», и отправлять рассылки на основе созданного шаблона: с вашим логотипом, ссылками и цветами.
В визуальном редакторе
В блочном редакторе вы собираете письмо из отдельных блоков и в отдельном окне можете посмотреть HTML-код всего письма. В визуальном редакторе вы напрямую работаете с кодом и сразу видите, как меняется шаблон письма. Например, в визуальном редакторе Mailigen рабочее поле делится на две колонки: в левой работают с кодом, в правой – сразу показываются изменения в шаблоне.
Плюсы HTML-верстки в визуальном редакторе | Минусы HTML-верстки в визуальном редакторе |
+ если неправильно поставили тег, это сразу будет видно в окне просмотра |
+ в большинство блочных редакторов уже встроены визуальные редакторы. Между ними можно переключаться
— малый выбор визуальных редакторов: большинство идут в связке с блочным
В редакторе первичного кода
В редакторах типа Sublime Text 3 и Visual Studio Code вы вручную прописываете HTML-код, который потом загружаете в сервис email-рассылок или почтовое приложение. Смотреть, как выглядит письмо, приходится в отдельной вкладке браузера, куда вы заливаете HTML-код.
Плюсы HTML-верстки в редакторе первичного кода | Минусы HTML-верстки в редакторе первичного кода |
+ нет ограничений по структуре и формату письма |
+ доступны встроенные инструменты для упрощения работы над кодом
+ можно скопировать HTML-код любого письма и создать на его основе собственное
— нельзя сразу в редакторе первичного кода посмотреть, как будет выглядеть письмо на мобильных или ПК
Заказать на аутсорсе
HTML-письмо сверстает фрилансер, сервис email-рассылок или веб-студия. Вы получите адаптивный шаблон, который будет отвечать брендбуку компании. Это может быть универсальное письмо, email под конкретную акцию или welcome-серия.
Заказать верстку письма можно:
Плюсы верстки на аутсорсе | Минусы верстки на аутсорсе |
+ не тратите время на верстку письма |
+ несложно найти исполнителя — в сервисе, через который вы делаете рассылку, будет дополнительная услуга «Разработать HTML-письмо»
+ получите готовое письмо через 2-4 дня
— нужно платить за каждый отдельный вариант письма
— мало веб-студий, которые занимаются HTML-письмами
Как отправить HTML-письмо
Когда письмо готово, его нужно отправить. Расскажу, как сделать это через сервис рассылки или вручную через почтовики Gmail, Mail.ru, Yandex и Outlook.
Отправляем через сервис рассылки
Сервис email-рассылок — платформа, в которой вы будете управлять рассылкой. В таких сервисах можно верстать письма, анализировать статистику, настраивать автоматические уведомления об оплате и даже создавать лендинги. Отправить HTML-письмо можно через любой из таких сервисов, поэтому в качестве примера я взял UniSender.
Если верстали во внешнем блочном редакторе
Внешний блочный редактор — это сервис, в котором можно собрать письмо, но нельзя его отправить. Для отправки шаблон нужно переносить в сервис рассылки. Рассказываю, как это сделать за 6 шагов.
1. Экспортируйте HTML-письмо в UniSender. Например, на бесплатном тарифе Stripo доступно 4 экспорта в месяц.
2. Введите имя аккаунта и API key. Ключ API можно найти в профиле UniSender. Он доступен в Личном кабинет по вкладке «Интеграция и API».
3. Переходим в UniSender. Найдите HTML-письмо в меню «Рассылки»/«Мои шаблоны». Оно появится сразу же после экспорта.
4. Проверьте письмо перед запуском. На этом этапе в HTML-редакторе UniSender можно исправить опечатки, изменить форматирование и добавить картинки. Если результат нравится — сохраните изменения.
5. Создайте рассылку в личном кабинете. Адрес отправки, имя отправителя и тему письма можно будет поменять позже, после настройки шаблона.
Если создавали письмо в редакторе первичного кода
Если вы верстали письмо в редакторе первичного кода, его также можно отправить через сервис рассылок. Расскажу на примере Visual Studio Code, что делать, если у вас уже есть HTML-код письма и вы хотите вставить его в сервис рассылки.
Сохраните письмо в формате HTML.
В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».
В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.
Нажмите «Продолжить» и проверьте данные: имя отправителя, адрес отправки, тему письма. На этом этапе также можно вернуться в шаблон письма и отредактировать его: исправить опечатки, добавить изображения, проверить ссылки.
Отправляем вручную в почтовике
Дальше надо просто вставить код письма в почтовик и отправить. Расскажем, как это сделать в разных программах.
В Gmail
Чтобы залить HTML-письмо в Gmail вручную, нужно:
2. Подсвеченный синим блок — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».
3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Gmail.
4. Добавьте получателя и введите тему письма.
5. Отправьте тестовое письмо, чтобы проверить его на ошибки. Например, если вы забудете проставить ссылки на изображение в HTML-шаблоне, при просмотре в Gmail в углу картинки появится кнопка «Скачать».
6. Если с тестовым письмом все ок, отправляем боевую рассылку.
В Mail.ru
Чтобы залить HTML-письмо в Mail.ru вручную, нужно:
2. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».
3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.
4. Добавьте получателя и введите тему письма.
5. Отправьте тестовое письмо, чтобы проверить его на ошибки.
6. Если с тестовым письмом все ок, отправляем боевую рассылку.
В Yandex
Чтобы залить HTML-письмо в «Яндекс.Почту» вручную, нужно:
1. Включите панель оформления. По умолчанию в интерфейсе «Яндекс. Почты» эта панель отключена, а значит вы не сможете вставить HTML-код.
3. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».
4. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Yandex.
5. Отредактируйте HTML-шаблон. В нём может слететь форматирование: появиться лишние отступы или пустые строчки.
6. Добавьте получателя и введите тему письма.
7. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.
В Outlook
Чтобы залить HTML-письмо в Outlook вручную, нужно:
2. Подсвеченный синим блок — код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».
3. Удалите фрагмент
и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Outlook.
4. Проверьте шаблон: все ли картинки отображаются, не слетело ли оформление.
5. Добавьте получателя и введите тему письма.
6. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.
Итого
Если вы никогда раньше не создавали HTML-письмо, лучше заказать его специалисту. Хочется сверстать самому — начните с изменения готового шаблона в блочном редакторе. Это самый простой способ, с которым можно получить отличный результат.
Удобнее верстать письмо во встроенном редакторе сервиса рассылки или редакторе, у которого интеграция с этим сервисом.
Работа в визуальном редакторе понравится пользователям, которые почитали про HTML-верстку и создали с десяток писем в блочном редакторе.
Большинство редакторов, с которыми вы столкнетесь — комбинация блочного и визуального.
Если привыкли работать в конкретном редакторе — верстайте письмо в нем, сохраняйте отдельным файлом и импортируйте в сервис рассылок.
Отправить HTML-письмо вручную можно в любом почтовике. Удобнее всего это сделать в Gmail, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.