Как сделать красивое 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

+ большой выбор редакторов

+ в каждом редакторе доступна база готовых шаблонов, на основе которых можно сверстать свое письмо— в некоторых блочных редакторах ограничена настройка адаптивности писем

— при создании писем вы ограничены элементами и структурой, которые доступны в редакторе

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

Как создать HTML-письмо в блочном редакторе

Создавать письмо удобнее сразу в сервисе рассылки, которым вы пользуетесь: сверстали письмо, отправили его и потом анализируете статистику. К тому же, не придется подгонять шаблон под требования сервиса. Для примера я взял встроенный блочный редактор UniSender.

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

Предлагаю создать HTML-письмо на основе готового шаблона в редакторе UniSender:

2. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-адресов, на которые вы будете слать письма.

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

3. Начните создавать email-рассылку в сервисе : пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите в «Рассылки» → «Email».

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

4. Выберите пункт «Блочный редактор». Вы также можете сверстать письмо на основе шаблонов писем, выбрав пункт «Шаблоны».

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

5. Выберите «Заполненный шаблон» — так будет легче сверстать письмо. В этот шаблон можно подставить любой текст, картинки или кнопку. Для этого перетаскивайте нужный блок из левой панели в макет письма, а затем кастомизируйте его.

6. Сохраните шаблон и нажмите «Продолжить». В открывшемся окне можно будет отредактировать шаблон или изменить параметры рассылки. Также сервис покажет вес письма (чем меньше, тем лучше), и предложит отправить пробное.

7. Отправьте письмо через сервис рассылок. Выберите базу контактов, которую вы загрузили в самом начале. Вы также можете нажать «Сохранить как шаблон», и отправлять рассылки на основе созданного шаблона: с вашим логотипом, ссылками и цветами.

В визуальном редакторе

В блочном редакторе вы собираете письмо из отдельных блоков и в отдельном окне можете посмотреть HTML-код всего письма. В визуальном редакторе вы напрямую работаете с кодом и сразу видите, как меняется шаблон письма. Например, в визуальном редакторе Mailigen рабочее поле делится на две колонки: в левой работают с кодом, в правой – сразу показываются изменения в шаблоне.

Плюсы HTML-верстки в визуальном редактореМинусы HTML-верстки в визуальном редакторе
+ если неправильно поставили тег, это сразу будет видно в окне просмотра

+ в большинство блочных редакторов уже встроены визуальные редакторы. Между ними можно переключаться— нужно знать HTML и CSS

— малый выбор визуальных редакторов: большинство идут в связке с блочным

В редакторе первичного кода

В редакторах типа 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 экспорта в месяц.

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

2. Введите имя аккаунта и API key. Ключ API можно найти в профиле UniSender. Он доступен в Личном кабинет по вкладке «Интеграция и API».

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

3. Переходим в UniSender. Найдите HTML-письмо в меню «Рассылки»/«Мои шаблоны». Оно появится сразу же после экспорта.

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

4. Проверьте письмо перед запуском. На этом этапе в HTML-редакторе UniSender можно исправить опечатки, изменить форматирование и добавить картинки. Если результат нравится — сохраните изменения.

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

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

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

Если создавали письмо в редакторе первичного кода

Если вы верстали письмо в редакторе первичного кода, его также можно отправить через сервис рассылок. Расскажу на примере Visual Studio Code, что делать, если у вас уже есть HTML-код письма и вы хотите вставить его в сервис рассылки.

Сохраните письмо в формате HTML.

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

В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».

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

В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.

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

Нажмите «Продолжить» и проверьте данные: имя отправителя, адрес отправки, тему письма. На этом этапе также можно вернуться в шаблон письма и отредактировать его: исправить опечатки, добавить изображения, проверить ссылки.

Отправляем вручную в почтовике

Дальше надо просто вставить код письма в почтовик и отправить. Расскажем, как это сделать в разных программах.

В Gmail

Чтобы залить HTML-письмо в Gmail вручную, нужно:

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

2. Подсвеченный синим блок — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

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

3. Удалите фрагмент
и вставьте вместо него HTML-код письма.
Как только закроете окно консоли, письмо отобразится в поле текста Gmail.

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

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки. Например, если вы забудете проставить ссылки на изображение в HTML-шаблоне, при просмотре в Gmail в углу картинки появится кнопка «Скачать».

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Mail.ru

Чтобы залить HTML-письмо в Mail.ru вручную, нужно:

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

2. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

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

3. Удалите фрагмент
и вставьте вместо него HTML-код письма.
Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.

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

4. Добавьте получателя и введите тему письма.

5. Отправьте тестовое письмо, чтобы проверить его на ошибки.

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Yandex

Чтобы залить HTML-письмо в «Яндекс.Почту» вручную, нужно:

1. Включите панель оформления. По умолчанию в интерфейсе «Яндекс. Почты» эта панель отключена, а значит вы не сможете вставить HTML-код.

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

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

3. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

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

4. Удалите фрагмент
и вставьте вместо него HTML-код письма.
Как только закроете окно консоли, письмо отобразится в поле текста Yandex.

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

5. Отредактируйте HTML-шаблон. В нём может слететь форматирование: появиться лишние отступы или пустые строчки.

6. Добавьте получателя и введите тему письма.

7. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Outlook

Чтобы залить HTML-письмо в Outlook вручную, нужно:

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

2. Подсвеченный синим блок — код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

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

3. Удалите фрагмент
и вставьте вместо него HTML-код письма.
Как только закроете окно консоли, письмо отобразится в поле текста Outlook.

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

4. Проверьте шаблон: все ли картинки отображаются, не слетело ли оформление.

5. Добавьте получателя и введите тему письма.

6. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

Итого

Если вы никогда раньше не создавали HTML-письмо, лучше заказать его специалисту. Хочется сверстать самому — начните с изменения готового шаблона в блочном редакторе. Это самый простой способ, с которым можно получить отличный результат.

Удобнее верстать письмо во встроенном редакторе сервиса рассылки или редакторе, у которого интеграция с этим сервисом.

Работа в визуальном редакторе понравится пользователям, которые почитали про HTML-верстку и создали с десяток писем в блочном редакторе.

Большинство редакторов, с которыми вы столкнетесь — комбинация блочного и визуального.

Если привыкли работать в конкретном редакторе — верстайте письмо в нем, сохраняйте отдельным файлом и импортируйте в сервис рассылок.

Отправить HTML-письмо вручную можно в любом почтовике. Удобнее всего это сделать в Gmail, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *