Рассылка писем html: Верстка email рассылок от А до Я для чайников / Habr – Как сверстать письмо: инструкция для чайников

Содержание

HTML в email. Как создать и отправить HTML письмо?

Польза HTML-писем и рассылок

Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

Путём несложных вычислений, было выявлено, что такие письма реализуются, как и обычные веб-страницы, с использованием HTML и CSS. Следственно, чтобы создать такое письмо, необходимо сделать маленькую узкую страничку со всеми необходимыми ссылками. То есть, для начала, можно вообще закрыть почту и погрузиться в фотошоп и редактор кодов, а вернуться только тогда, когда во вкладке браузера будет отображаться готовый мини-сайт.

С чего начать и как создать?

В интернете существует множество шаблонов, которые позволяют создать HTML-письмо, просто изменяя их под свои нужды. Важно знать, что в письме нет места для прикрепления графических файлов, ссылки на которые будут использоваться в самой структуре. Следственно, все картинки, которые необходимо встроить в тело интерактивного письма, должны быть загружены в сторонние файловые сервисы, предоставляющие прямую ссылку на этот файл, например imgur. Прямая ссылка — та, у которой в конце указан формат файла.

Создание HTML-письма по шаблону

Давайте создадим простенькое интерактивное письмо c шапкой, заголовками и кнопкой перехода. Предлагаю Вам свой шаблон, можете скачать его по ссылке и видоизменить под вашу стилистику.

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

Как отправить HTML-письмо?

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся

как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body, кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As HTML».

Выбрав, мы увидим поле для ввода, из которого смело удаляем всё содержимое, и вставляем туда весь код из файла нашего шаблона письма. После этого, просто закрываем окно просмотра исходного года и любуемся результатом, готовым к отправке.

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

Очевидно, что в статье показан достаточно простой, но в то же время, при правильной подаче, эффективный шаблон письма. Особой красотой и яркостью он не отличаетя. Если Вам хочется организовать масштабную рассылку и иметь по-настоящему красивое и яркое письмо,

ко мне. Я нарисую и сверстаю индивидуальный шаблон специально для Вас по низким ценам.

Также, советую почитать мою статью про актуальность SEO-оптимизации сайта при новых поисковых алгоритмах.



Отправка html-письма при помощи web-интерфейса Gmail — Блог веб-студии «Десять букв»

В отличие от специализированных программ-почтовиков, создание html-сообщения электронной почты в веб-интерфейсах распространённых почтовых сервисов, задача, мягко говоря, не тривиальная. Но ознакомится с тем, как это действует, есть резон. Просто уже потому, что этот инструмент всегда есть под рукой. Т.е., ничего не надо скачивать, устанавливать — зашел на соответствующий сервис в браузере, и, что называется — бери и пользуйся.

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Логинимся на GmailРис. 1

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

Новое сообщениеРис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Просмотреть кодРис. 3

Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами <div id…> и <div>. Именно это содержимое определяет отображение html-страницы в теле письма.

Код страницыРис. 4

Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».

Правый клик по выделенному блоку <div id…>…<div> вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.

Edit as HTMLРис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

КопироватьРис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

БлокнотРис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Копируем в буфер обменаРис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор <br>, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

Вставляем содержимоеРис. 9

В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.

Вставляем содержимоеРис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Вставляем содержимоеРис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Завершаем операциюРис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Выход из режима правкиРис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

html-письмо готово, можно отправлятьРис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

Напишите свое мнение или совет

Как сделать html-письмо для рассылки — Лидзавод

E-mail рассылка до сих пор остается эффективным инструментом маркетинга. По статистике современный человек получает около 10 электронных писем в день, многие из которых являются обычным спамом. Учитывая, что пользователь принимает решение о важности информации всего за несколько секунд, в письме важно все: от верстки рассылок и внешней привлекательности до структуры продающего текста.

Чтобы успеть заинтересовать пользователя за 5-6 секунд, ваше письмо должно быть идеальным во всех планах, для чего важно тщательно подойти к созданию и верстке письма для рассылки. Но перед тем как начинать работать с кодом, познакомьтесь с проблемами, которые будут вас ждать.

Как избежать ошибок и не наделать глупостей

Если вы гуру верстки и знаете все современные фишки, мы вас огорчим — тут все это не работает. У сервисов рассылок просто нет единого формата отображения писем, поэтому использовать тот же float и отступы margin и padding не выйдет. Да, в теории вы получили красивое письмо из нескольких столбцов, но у получателя все эти столбцы смешаются и получится каша, которая быстро отправится в спам.

А еще многие сервисы просто-напросто выключили поддержку стилей, аргументируя это тем, что в письме важен текст, а не его обертка. Да, где-то они и правы, но покажите мне человека, который целыми днями читает длинные «простыни» из текста….

Как сделать html-письмо для рассылки

Поэтому создание html-письма для рассылки проводится по устаревшим уже таблицам с cellpadding и colspan.

А самое интересное, еще остались почтовые клиенты, которые не поддерживают отображение картинок в письмах. Конечно, это легко исправить одним проставлением галочки в параметрах, но не все додумаются, что все дело в настройках по умолчанию.

Поэтому при оформлении изображений в письмах не забывайте проставлять alt. В этом случае получатель увидит хотя бы ваш текст в рамочке, а не что-то пустое и страшное.

Читай, как оформить рассылку в инструкции от LEADS.

  • Создайте HTML-шаблон с помощью обычного блокнота (нужно сменить формат файла на html) или через специальное ПО, например, Dreamweaver от Adobe;
  • Используйте стандартные теги html для создания структуры письма, как уже было сказано, создаем таблицу и для каждой ячейки прописываем свои атрибуты.
Как сделать html-письмо для рассылки
  • Не забываем про общие правила: ширина письма не должна превышать 600 px, изображения должны быть сжаты (например, используй TinyPNG), чтобы письмо быстро загрузилось, а шрифт сделай больше 13, так как на «яблочной технике» могут быть проблемы с отображением.
  • Заполняем ячейки текстом, одновременно форматируя каждый блок.
  • Не забываем про верстку адаптивных писем.

Тестирование верстки писем

После оформления html-шаблона самое время протестировать наше творение. Для этого можно использовать специальные сервисы, например, PutsMail или обычную почту Яндекса. В первом случае все понятно — читаем инструкцию и смотрим, как мы сверстали рассылку.

При тестировании рассылки с Яндекс Почты сделайте следующее:

  • посмотрите, чтобы не горела кнопка «без оформления»;
  • нажмите правой кнопкой мыши на поле ввода текста и выбери «исследовать элемент», после чего появится окно с кодом, где будет выделена строчка с <div>;
  • нажмите на <br> и тыкните на «edit»;
  • добавьте ваш код и отправляйте письмо.

Не волнуйтесь, оно может страшно смотреться в самом редакторе, но получателю придет в задуманном вами виде.

Конструкторы HTML писем

Конструкторы HTML писем

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

Конструкторы HTML-писем

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

Читайте также: Программы для рассылки писем

Mosaico

Единственный в рамках нашей статьи максимально доступный сервис, не требующий регистрации и предоставляющий удобный редактор писем. Весь принцип его работы раскрывается прямо на начальной странице сайта.

Стартовая страница конструктора писем Mosaico

Процедура редактирования HTML-писем происходит в специальном редакторе и заключается в составлении дизайна из нескольких подготовленных блоков. При этом каждый элемент оформления можно изменить до неузнаваемости, что придаст вашим работам индивидуальности.

Редактирование письма в конструкторе писем Mosaico

После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.

Готовый HTML шаблон из конструктора писем Mosaico

Перейти к сервису Mosaico

Tilda

Онлайн-сервис Tilda является полноценным конструктором сайтов на платной основе, но предоставляется им и бесплатная пробная подписка на две недели. При этом непосредственно сам сайт создавать не нужно, достаточно зарегистрировать аккаунт и создать шаблон письма, используя стандартные заготовки.

Шаблоны онлайн-конструктора писем Tilda

Редактор писем содержит множество инструментов как для создания шаблона с нуля, так и для корректировки стандартных образцов.

Шаблоны онлайн-конструктора писем Tilda

Итоговый вариант разметки можно будет получить после публикации на специальной вкладке.

Получение HTML-кода онлайн-конструктора писем Tilda

Перейти к сервису Tilda

CogaSystem

Как и предыдущий онлайн-сервис, CogaSystem позволяет одновременно создавать HTML-шаблоны писем и организовывать рассылку на электронную почту, указанную вами. Во встроенном редакторе есть все необходимое для создания красочных почтовых рассылок с использованием веб-разметки.

Личный кабинет конструктора писем CogaSystem

Перейти к сервису CogaSystem

GetResponse

Последним онлайн-сервисом в рамках настоящей статьи является GetResponse. Данный ресурс по большей части ориентирован на почтовые рассылки, а имеющийся в нем HTML-редактор является, скорее, дополнительным функционалом. Им можно воспользоваться как на бесплатной основе с целью проверки, так и путем приобретения подписки.

Перейти к сервису GetResponse

Стартовая страница конструктора писем GetResponse

ePochta

Практически любая программа для почтовой рассылки на ПК обладает встроенным редактором HTML-писем по аналогии с рассмотренными онлайн-сервисами. Наиболее актуальным софтом является ePochta Mailer, содержащий большую часть функций почтовых сервисов и удобный редактор исходного кода.

HTML конструктор писем в программе ePochta Mailer

Основное достоинство при этом сводится к возможности бесплатного использования HTML-конструктора, в то время как оплата необходима только для непосредственного создания рассылки.

Скачать ePochta Mailer

Outlook

Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.

Редактор HTML писем в Outlook

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Скачать Microsoft Outlook

Заключение

Мы рассмотрели лишь некоторые из существующих сервисов и приложений, однако при углубленном поиске в сети можно найти множество альтернативных вариантов. При этом стоит помнить о возможности создания шаблонов напрямую из специальных текстовых редакторов при должном знании языков разметки. Такой подход является наиболее гибким и не требует финансовых вложений.

Редактор HTML писем в OutlookМы рады, что смогли помочь Вам в решении проблемы.
Редактор HTML писем в OutlookОпишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

50 лучших дизайнов рассылок (и как самому делать так же круто) (Часть 1)

В преддверии конференции, посвященной Email-маркетингу MailCon, мы хотим поговорить о трендах в сфере дизайна писем и рассылок. Предлагаем вашему вниманию перевод статьи о лучших дизайнах электронных писем, которую мы, ввиду большого объема, разбили на 5 частей (по 10 кейсов) и опубликуем с интервалом в 2 дня. Думается, нам есть что обсудить, сверив наблюдения и советы зарубежных экспертов с нашим собственным опытом по созданию рассылок. Первые 10 кейсов в основном посвящены роли цвета в создании письма. Ждем ваших комментариев!

Ожидается, что к концу следующего года число зарегистрированных по всему миру ящиков электронной почты превысит 4,3 миллиарда. Нравится нам это или нет, но мы живём в мире, где люди предпочитают пользоваться электронной почтой. Это быстро, удобно, и главное – эффективно.
Как выяснили McKinsey & Company, для привлечения новых клиентов электронные письма в 40 раз более эффективны, чем фейсбук или твиттер – и это лишь один из любопытных фактов, говорящих об успешности email-маркетинга.
Если ваша компания или стартап хочет использовать этот успех, то критически важным становится хороший дизайн письма. При такой большой конкуренции за внимание пользователя, выдающийся дизайн должен сразу привлекать внимание, чтоб избежать риска, что его отправят в корзину, не читая.
Привлекайте ваших клиентов, создавайте рассылки, чтобы охватить массовую аудиторию. Вот как это делают профессионалы – и мы надеемся, что это статья вдохновит вас на собственные выдающиеся дизайны писем!
01.Экспериментируйте с цветом

Отказ от цвета на фотографии и цветная тонировка в этом примере от The Stylish City («Стильный город») поражают и впечатляют. приглушенные цвета и сочетание розового с черным создают современный и утонченный дизайн. Макет выглядит привлекательным и уникальным, похожим одновременно на новостную рассылку и на модный журнал, однако, по-прежнему, фокус внимания приходится на текст, расположенный по центру, а также выше изображения.

02.Используйте цвет, чтобы привлечь внимание

В этом примере от IS Design + Digital неоновый цвет очень быстро привлекает внимание читателя и очень трудно удержаться и не прочесть заголовок. Прямоугольная обводка вокруг шрифта усиливает этот эффект настолько, что название фестиваля, скорее всего, запомнится даже самым незаинтересованным читателям. Сильные образы, выделяющиеся призывы к действию (calls to action) и резкий контраст – всё это эффективные элементы в рамках данного дизайна.

03. Развлекайтесь с анимацией

В этом примере Mika Osborn использовала забавную и креативную GIF-анимацию, которая призвана донести одну простую мысль («Let’s pin» -«давай делать пин», от названия социальной сети «пинтерест») – в неповторимом, удивительном и запоминающемся ключе. Призыв прекрасно понимают пользователи, он вдохновляет их подписаться на блог бренда в социальной сети Pinterest, чтобы увидеть новые замечательные картинки, подобные этой. Нейтральный цвет фона и центральное расположение полностью фокусируют внимание на гифке, а информация вокруг размещена именно так, чтобы читатель совершил необходимое действие.

04. Будьте проще

Дизайн рассылки от Apple предполагает много свободного пространства и четкий фокус на продукте. Продукт выделен яркими цветами для повышения интереса, а информация тщательно размещена и идеально выровнена, и имеет вертикальную организацию для быстрого и легкого восприятия. Использование разных размеров шрифта и различных оттенков серого позволяет читателю понять, что важно, а что – не очень. Этот дизайн бьет точно в цель при минимальном количестве элементов и простой структуре.

05. Заставьте письмо сиять

В этом проекте Artur делает акцент на прекрасно подобранные фотографии и они, как и рассчитывалось, заставляют посмотреть на них ещё раз. После них привлекает внимание текст, набранный белым, а всё остальное оставлено в тени. Темно-серый дополняет цвета каждого изображения, придавая письму вид классный и современный вид.

06. Используйте яркую цветовую гамму

Палитра ярких интенсивных оттенков и уникальная концепция письма Engage сразу привлекают внимание. Яркий жёлтый в паре с рисунком-текстурой и черно-белой графикой формирует простую, но свежую цветовую гамму, которая, несомненно, выделяется из общей массы.

07. Используйте яркую цветовую гамму

Нельзя пройти мимо кейса Studio Newwork, показывающего творческую работу сотрудников агентства. Яркий фон захватывает внимание и эффектно обрамляет изображение. Такое использование цвета позволяет изображению «выстрелить» и направляет взгляд к важному, а абстрактные элементы и креативное расположение текста помогают добавить в макет движение. Этот дизайн соединяет минимализм с ярким цветом, и это великолепно.

08. Станьте узнаваемы

Письмо Burberry – гениальное решение для демонстрации их знакового тренча и одновременно – повышения узнаваемости бренда. Дизайн запоминается благодаря использованию сепии (жёлто-коричневые оттенки) и фотографиям знакового пальто с разных ракурсов. Прекрасный выбор шрифтовых начертаний, последовательно реализованных во всем макете, позволяет читателю легко воспринимать предложенную визуально-образную историю. Простой, эффективный и легкоузнаваемый дизайн.

09. Меньше – это на самом деле больше

Строгий и красивый дизайн письма Chanel наилучшим образом использует идею простоты. Только одно изображение, представляющее бренд, один заголовок, одно описание и одна кнопка-призыв к действию (call to action), всё выровнено по центру, ни один из элементов не перекрывает остальные. all centrally focused and aligned, no one element overpowers the other. Несмотря на минимализм, использование ленты как изображения бренда позволяет сделать письмо игривым и привлекательным.

10. Увеличивайте контраст

Этот пример от Churchmedia демонстрирует интересный способ создания рассылки перед событием. Различные шрифты, гармонично противопоставленные друг другу, обычное и жирное начертание, шрифты с засечками и без – словно спрыгивают со страницы, создавая визуальную иерархию в макете. Контрастная, но хорошо сочетающаяся цветовая палитра придаёт всему письму вид современный, с настроем энергичным и позитивным.

Ещё 10 кейсов опубликуем в нашем блоге послезавтра, а если вы хотите лично обсудить тренды email-дизайна и другие вопросы email-маркетинга – ждём вас на конференции Mailcon, а найти другие примеры дизайна электронных писем, в том числе – отечественные, а не зарубежные – вы всегда можете в коллекции рассылок Email-Competitors.ru.

HTML и обычные шаблоны для e-mail рассылки. Плюсы и минусы

HTML и обычные шаблоны email-писем для рассылок

Email-маркетинг с каждым годом продолжает набирать обороты вместе с увеличением количества интернет-пользователей. Базы данных компаний растут, рассылка писем каждому клиенту вручную становится непосильным трудом. Email-маркетинг помогает сделать процесс рассылки по электронной почте более удобным, быстрым, и создает основу для креатива. Для рассылки используют HTML и обычные шаблоны email-писем.

Что это и как работает?

Если говорить простым языком, email-маркетинг – это продуманная система рассылок писем по электронным адресам, находящимся в базе данных.

[note]Разовая рассылка по незнакомым емейлам – это спам, а постепенное выстраивание отношений от первого знакомства до регулярных повторяющихся покупок – это емейл-маркетинг.[/note]

Основан этот вид маркетинга на шаблонах писем и страниц, которые встраиваются в письма.

Email-шаблоны бывают 2 видов:

  • Обычные – это просто текстовое письмо из нескольких предложений с вложениями или без, редко с креативным форматированием. Такие шаблоны для электронных писем обычно используются в деловых переписках.

  • Шаблоны html писем – яркие, предназначенные для привлечения внимания и создания заинтересованности веб-страницы, которые внедряются в письмо.

В чем преимущества и недостатки?

Начнем с обычных шаблонов.

Преимущества

Недостатки

+ Простота создания и отправления

+ Воспринимается получателем как персонифицированное сообщение

+ Поддерживается любыми устройствами, имеющими выход в интернет

+ Огромное количество вариантов организации рассылки (можно даже с почтового ящика)

+ Соблюдение консерватизма, узнаваемость

– Однообразный и скучный внешний вид, который не может заинтересовать

– Отсутствие иллюстраций и интерактива

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

Преимущества

Недостатки

+        Выглядят эффектно и привлекают внимание за счет изображений и дизайна

+ Передают наиболее важную информацию в интерактивном формате

+ Подходят для массовых рассылок

– Не на всех устройствах письмо с HTML-шаблоном корректно отображается

– Для создания и отправления необходимо разбираться в технологии

– Рассылка осуществляется только через специальные сервисы

Создать HTML-письма самостоятельно без достаточной подготовки сложно, хотя именно такие сообщения, красивые, похожие на открытки, привлекают намного больше внимания, чем простые «черным по белому». Шаблоны для HTML-писем и email письма можно создавать прямо на сайтах-сервисах рассылок, давно включивших этот функционал как обязательный для организации рассылки писем пользователям.

Основные сервисы

Описывая основные сайты для email рассылки, есть смысл сравнить их по наиболее важным характеристикам.

1.UniSender

2.SendPulse

3.RuMAILER

4.GetResponse

5.MailerLite

Количество шаблонов

Более 100

111

Около 20

Более 500

Около 20

Качество шаблонов

Отличное

Отличное

Хорошее

Отличное

Отличное

Доступные тематики

-Праздники

– Бизнес

-Интернет-магазин

– Еда

– Туризм

– Общие и др.

-Праздники

– Ресторан

– Общие

– Туризм

– Бизнес

-Интернет-магазин и др.

– Общие

-Праздники

– Туризм

– Бизнес

-Интернет-магазин

-Интернет-магазин

– Красота и здоровье

– Туризм

– Праздники

-Уведомления

– Рекламные агентства и др.

– Общие

-Интернет-магазин

– Туризм

Адаптация письма под разные экраны

Да

Да

Да

Да

Да

Возможность бесплатного использования сервиса

Да (до 1 500 писем на 100 адресов)

Да (до 15 000 писем на 2 000 адресов)

Да (до 6 000 писем на 5 000 адресов)

Нет

Нет

Возможность бесплатного использования шаблонов

Да

Да

Да

Да

Да

Возможность использования ранее использованных шаблонов

Да

Да

Да

Да

Да

  1. UniSender.

Один из самых популярных русифицированных сервисов для создания email-рассылок. Доступны 3 редактора: для блочных шаблонов (текстовый и визуальный контент можно менять на свое усмотрение), для готовых базовых и шаблонов HTML, для работы с собственным HTML-шаблоном email письма. Разобраться в редакторах не сложно, система дает подсказки, а все необходимые инструменты находятся в верхней части рабочей страницы.

Полный обзор UniSender | Перейти в UniSender

  1. SendPulse

шаблоны в SendPulse

 

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

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

Полный обзор SendPulse | Перейти в SendPulse

  1. Rumailer

Скромный в плане дизайна сайт с хорошими шаблонами и сравнительно большим бесплатным пакетом. Функционал работы с ограниченным количеством шаблонов не так широк, как хотелось бы опытным пользователям. Удобного блочного редактора нет вовсе.

Плюс сервиса в наличии больших возможностей при экспорте подписчиков. Их можно выгружать по активности, по листам, а также по логину или домену в электронном адресе.

Полный обзор RuMAILER | Перейти в RuMAILER

  1. GetResponse

шаблоны GetresponseСервис славится самым большим количеством доступных шаблонов в 24 категориях. Приятный интерфейс самого сайта дополняется понятным пользователям блочным редактором готовых и собственных HTML-шаблонов для писем клиентам.

Редактор прост в использовании. Блоки можно легко перетаскивать, менять местами, удалять или добавлять. При нажатии на блок появляется рабочее меню с кнопками для выполнения основных действий с изображениями и текстовым контентом.

Для того чтобы просмотреть шаблоны, необходимо начать работу с рассылкой, введя данные отправителя и тему письма, а затем выбрать кнопку «Блочный email конструктор». Если же пользователь хочет работать с собственным шаблоном, то выбирать нужно «Редактор HTML кода».

Полный обзор GetResponse | Перейти в GetResponse

  1. Mailerlite

Сайт для рассылки электронной почты, который многие пользователи называют самым простым. Функционал работы с шаблонами при этом достаточно ограничен, но основные действия выполнимы. В редакторе разберется даже новичок, т.к. он прост и понятен. Также, как и на других платформах, можно выгружать свои HTML-шаблоны для email-рассылок, редактировать и использовать их.

Полный обзор MailerLite | Перейти в MailerLite

Как выбрать подходящий шаблон html письма?

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

Дополнительным ответом на вопрос «как узнать какой шаблон выбрать?» могла бы служить статистика по самым популярным сервисам. Могла бы, но скажем прямо, % открытия, переходов, кликов, отписок от сервиса практически не зависят. Единственное, что нами было отмечено, что например на СендПульсе (роскошные лимиты на бесплатности) несколько больший % попадания писем в папку “спам”, а не во входящие. А % ошибок, публикуемые самими сервисами, никто кроме них проконтролировать не сможет, разве что эмпирическим путём в единичных случаях.

UniSender GetResponse SendPulse
Открыто писем 26% 38,78% 15%
Количество кликов 4% 14.29% 2%
Количество отказов 6% 0% 0%
Процент ошибок доставки 4% 2% 6,2%

Подробно о бесплатных возможностях сервисов рассылок мы писали здесь.

Как узнать, какой шаблон email письма подойдет в каждом конкретном случае? Это можно сделать, только поработав с разными шаблонами, подобрав лучший дизайн и контент. Многие компании сначала используют готовые шаблоны, видоизменяя их, а после создают собственные. Это хороший вариант, если навыков написания html писем и страниц нет, а рассылка видится полезным инструментом.

softolet — интернет-сервисы для бизнеса.
Ссылка на материал обязательна!

Оцените текст:

[Всего голосов: 1    Средний: 5/5]

15 шаблонов писем для маркетинговой email-рассылки

Подходит к концу 2018 год, а email-маркетинг по-прежнему может похвастаться одними из самых высоких показателей коэффициента вовлечения среди любых других маркетинговых приемов. А все благодаря предельно узкому таргетингу, который позволяет выстроить персонализированную коммуникацию с каждым отдельно взятым человеком. Однако возможен он только при наличии тщательно проработанной и сегментированной стратегии.

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

Разумеется, достижение подобного успеха в первую очередь зависит от того, насколько верным содержанием вы будете наполнять ваши письма. В этой статье мы подготовили для вас шаблоны e-mail рассылки, с которых вы можете начать свою кампанию по выращиванию лидов.

Содержание статьи

№1: Простой текст
№2: Знайте, когда стоит использовать изображения
№3: Типографический подход
№4: Newsjacking-подход
№5: Больше праздников и мероприятий
№6: Праздники подойдут не только для B2C-предложений
№7: Взывая к потаенным желаниям
№8: Проявляйте индивидуальность
№9: Знать, что важно вашей аудитории
№10: Разбейте сообщение на блоки
№11: Освоение искусства визуальных писем
№12: Cоответствие имиджу бренда
№13: Персонализированные email-письма
№14: Письмо с напоминанием о чем-либо
№15: Расскажите историю
Заключение

№1: Простой текст 

Несмотря на все передовые методы дизайна электронных писем и массу людей, заявляющих, что они отдают свое предпочтение html-шаблонам писем для email-рассылки, письма, в которых нет ничего, кроме текста, отлично работают. Более того, по данным HubSpot, по мере увеличения количества изображений в письме, показатель CTR снижается. Разумеется, эта корреляция проявляется не всегда, но для многих предприятий она более чем характерна, особенно в B2B-секторе. Так что в процессе разработки своей email-маркетинговой кампании, не стоит брезговать и письмами, которые довольно не броски в оформлении и не содержат ничего, кроме текста: для многих получателей они могут стать полной неожиданностью.

№2: Знайте, когда стоит использовать изображения

Как было сказано выше, во многих email-кампаниях место для обычных текстовых писем обязательно найдется, но еще важнее знать, в которых из них использовать изображения все же стоит.

Этот шаблон от мебельного гиганта IKEA, использованный для продвижения новинок декора и конкурса по оформлению интерьера, просто не сработал бы без визуального сопровождения. Трудно представить, как можно говорить о дизайне без использования изображений. Хотя исследования, отмеченные выше, и подтверждают тот факт, что обычные текстовые письма конвертируют лучше, все же этот подход применим ко всем ситуациям.

Читайте также: Секреты нейрофизиологии для интернет-маркетолога

№3: Типографический подход

Пример от Boxberry демонстрирует то, каких прекрасных результатов вы можете достичь в области дизайна электронных писем, почти не прибегая к помощи изображений. Благодаря смелой, фирменной типографике и четким призывам к действию у получателя письма не остается никаких сомнений в отношении того, каким должен быть его следующих шаг.

Компания не пытается завлечь пользователей красочными изображениями, но при этом большое количество пустого пространства и яркие цвета помогают воспринимать это письмо каким угодно, но только не скучным. Прекрасный образец минималистичного дизайна.

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

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

Читайте также: Психологические «фишки» для эффективного email-маркетинга

№4: Newsjacking-подход 

Newsjacking (буквально — перехват новостей) — это техника использования популярности какого-либо события или новости для продвижения бренда, способ создания масштабной маркетинговой кампании на волне популярности какого-либо мероприятия. Это одна из классических стратегий, однако ее не всегда легко реализовать. Но не в случае Ubisoft, рекламные кампании которой привязаны к новостям, представляющих интерес для ее целевой аудитории (в данном случае — к E3, значимому событию для большинства геймеров). Так компании удается продвигать свои услуги свежо и нешаблонно.

№5: Больше праздников и мероприятий

Еще один шаблон, дизайн которого подсказывает нам, что использовать в своих целях как можно больше национальных праздников и торговых событий, как, например, «Черная Пятница» или Новый год, — не такая уж и плохая идея. Трудно противиться специальным предложениям и акциям, когда вы уже задумали что-то купить в качестве подарка себе или своим родным. Вы можете сделать еще больше и лучше, а именно — персонализировать эти письма и содержащиеся в них предложения на основе истории покупок получателя и других взаимодействий с вашим брендом.

№6: Праздники подойдут не только для B2C-предложений

Не делайте ошибку, думая, что праздничные дни и прочие шопинг-события не имеют отношения к тем, кто действует на B2B-рынке: если они интересны вашей целевой аудитории, они также подойдут и вам. В этом письме сервис Square призывает своих потенциальных клиентов воспользоваться сопутствующим празднику всех влюбленных ажиотажем, разослав своим покупателям письма с рекламными акциями, и дополняет это предложение довольно убедительной статистикой, в силу которой отказать желанию кликнуть по кнопке «Get Started» и запустить кампанию становится очень трудно.

№7: Взывая к потаенным желаниям

Если вам посчастливилось оказаться в одной из тех отраслей, которая привлекает внимание людей, максимально используйте этот фактор. Пожалуй, больше остальных в этом преуспели сервисы по продаже авиабилетов, и не только потому, что каждый хочет путешествовать.

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

Читайте также: Эффективный email-маркетинг: стратегия «На крючке»

№8: Проявляйте индивидуальность

Этот конкретный пример демонстрирует, каким необычным может быть дизайн email-письма:

Ваше письмо может содержать текст, фотографии и авторские иллюстрации, CTA, видео, аудио, иконки социальных медиа, но главное — суметь скомпоновать все это в доступный дизайн, который интересно изучать.

№9: Знать, что важно вашей аудитории 

В этом примере Freelancer пытается через сделанный со вкусом дизайн, напоминающий лендинг, предельно лаконично рассказать посетителям свою историю. Для платформы, которая, прежде всего, используется дизайнерами и людьми, подыскивающими себе сотрудников на «удаленку», этот хитрый набор визуальных эффектов особенно удачен, поскольку он доказывает, что Freelancer точно знает, чего хочет их целевая аудитория.

Читайте также: Как составить успешную новостную рассылку?

№10: Разбейте сообщение на блоки

При разработке дизайна для этого письма перед дизайнерами стояла задача в одном письме одновременно прорекламировать новые проекты и статьи. Это не похоже на email от интернет-магазина, где вы можете при помощи изображений продуктов разбить контент на несколько частей. Houzz, использовав подходящие изображения и «шахматную» верстку, удалось найти верный баланс и поделить весь материал на удобочитаемые отрезки.

№11: Освоение искусства визуальных писем

Для доказательства того, что перегруженные визуальные проекты тоже могут работать, взгляните на этот пример от MOO: чтобы раскрыть индивидуальность бренда через дизайн электронного письма, компания умело сочетает забавный текст с захватывающими визуальными эффектами. Такой подход может показаться сложным, но если вы располагаете талантливым дизайнером и остановили выбор на подходящем шаблоне, у вас все получится. Главное — убедитесь заранее, что посыл письма — правильный, и он будет сочетаться с таким не самым простым стилем.

Читайте также: Лучшие практики плоского дизайна

№12: Cоответствие имиджу бренда

Если вы продаете предметы роскоши, то вы точно не захотите, чтобы изображения забавных хомячков в очках задавали тон вашим email-кампаниям. Если же ваша целевая аудитория — профессиональные фотографы и фотолюбители, то ваше письмо должно содержать соответствующие иллюстрации. Какой бы подход вы ни применяли при разработке своих писем, оставаться верным имиджу бренда и продуктам / услугам, которые вы продаете, жизненно важно.

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

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

№13: Персонализированные email-письма

Новостные письма с интересным контентом попадаются крайне редко, но Ярмарке Мастеров удается выделиться на общем фоне благодаря персонализированному подходу. Обращение к покупателю по имени захватывает внимание, а предложения, ради которых человек и оформил подписку, делает его постоянным читателем вашей рассылки. И когда все это дополняется качественным дизайном с бросающимися в глаза CTA и сильными заголовками, вы получаете на выходе отличный материал.

№14: Письмо с напоминанием о чем-либо

Довольно трудно отправлять людям письма с напоминаниями о чем-либо и при этом не начать их раздражать, но образовательная платформа в примере выше справляется с этим на ура, потому что затрагивает важную для своих подписчиков тему — постоянное обучение и самосовершенствование. При этом письмо не утомляет длинным текстом, а просто предлагает ознакомиться с новыми курсами .Таким образом у читателей не остается никаких сомнений в том, что они должны принять предложение и кликнуть по CTA:

Читайте также: Только 20% маркетологов используют поведенческие факторы в email-рассылке

№15: Расскажите историю

Мы привыкли к тому, что рассказывать истории в контексте интернет-маркетинга можно только посредством длинных посадочных страниц, видеороликов или серии электронных писем, отправляемых в течение какого-то периода времени, но бывает и по-другому.

GOG получилось рассказать историю при помощи ряда изображений и заголовков, пробуждая подписчиков к прохождению новой сюжетной кампании. В этом письме не так много всего, да, собственно, и не должно быть.

Читайте также: Онлайн-маркетинг для начинающих: сторителлинг

Заключение

Как вы можете видеть, хорошими результатами email-маркетинга вас может обеспечить не только дорогой и «напичканный» передовыми технологиями дизайн. Знание того, на какие сообщения будет реагировать ваша целевая аудитория, и обращение к ним на персональном уровне с учетом той информации, которой вы о них располагаете, имеет важнейшую ценность для успеха ваших кампаний.

Неважно, разрабатываете ли вы свой оригинальный дизайн с нуля или используете принятые в вашей сфере шаблоны, в первую очередь задайтесь вопросом, а почему вообще люди оформляют подписку на вашу рассылку, и используйте это понимание, чтобы еще больше приблизить человека к своему бизнесу. Даже если это означает отправить ему всего две строки текста.

Высоких вам конверсий! 

По материалам: ventureharbour.com

13-12-2018

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

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