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

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

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

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

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

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

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

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

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

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

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

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

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

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

В редакторах типа Sublime Text 3 и Visual Studio Code вы вручную прописываете HTML-код, который потом загружаете в сервис email-рассылок или почтовое приложение. Смотреть, как выглядит письмо, приходится в отдельной вкладке браузера, куда вы заливаете 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, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

Источник