G
Gustav
Команда форума
Администратор
- Сообщения
- 26.410
- Лайки
- 51.221
Как самостоятельно создать первую email-рассылку: статистика, советы и примеры кода
Email стал универсальным инструментом маркетинга для многих компаний. Однако при его использовании возникает большое количество вопросов, а недостаток опыта в работе с электронной почтой может приводить к ошибкам.
В этом материале мы собрали полезную информацию, статистику и примеры кода, которые помогут сверстать первую почтовую рассылку и не упустить важные моменты.
На старте: типы писем, аналитика и важные цифры
Существует несколько основных типов писем, которые компании отправляют своим текущим и потенциальным клиентам:
Еще один момент, о котором нужно помнить на старте — на эффективность email-сообщений компании влияет ее репутация. Она влияет на то, как интернет провайдеры и почтовые программы доставляют и отображают письма: будут ли они приняты и доставлены в папку входящих или отправятся в спам. Вот какие факторы оказывают влияние на это:
Показатели рассылок Ли Мунро
Разработчики проекта
Разработка email: проблемы верстки
Если компания решит не использовать существующие на рынке решения для создания шаблонов рассылок, то ее специалистам придется разобраться с вопросами верстки писем – и в случае email это может быть сложнее, чем создать страницу на сайте.
Сложности начинаются с самого начала — существует множество движков рендеринга писем, которые используются различными почтовыми программами:
Разнообразие почтовых клиентов и движков рендеринга приводит к необходимости использования универсальных подходов — в частности, это значит, что вместо использования дивов (div) лучше применять табличную верстку. Конкретно, это выливается в использование:
<style>
@import url(
/* Type styles for all clients */
h1 {
}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1 {
}
}
</style>
Важно не забыть прописать для каждой ячейки таблицы (<td>) font family, font size и color — иначе почтовый клиент может проигнорировать выбранный шрифт. Это правило нужно соблюдать и для любых блочных элементов, в которых находится текст (<p>, <h1>...<h5>, <div> и т.п.)
Следующая важная тема при верстке писем — работа с изображениями и медиа. Некоторые почтовые программы по умолчанию показывают картинки, а некоторые их блокируют. Помимо прочего это оказывает влияние на возможность сбора статистики – как правило, для этого используются специальные картинки малого размера (следящий пиксель). Это значит, что если почтовая программа блокирует изображения, то понять, открыл ли пользователь письмо, просто не удастся. Поведение почтовых клиентов здесь весьма вариативно:
Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.
Работа в мобайле: адаптивные email-письма
Существует два основных вида писем в «мобайле» — одноколоночные и многоколоночные. В первом случае особенных сложностей с тем, чтобы сделать контент адаптивным, не возникает, поскольку нет необходимости в реорганизации элементов письма. Необходимо лишь обеспечить уменьшение ширины шаблона для лучшего отображения на устройствах разного размера.
Для обеспечения корректного изменения размера, нужно адаптировать ширину таблицы (выше мы говорили о том, что в сфере email до сих пор в ходу табличная верстка):
<table cellspacing="0" cellpadding="0" border="0" width="600">
<!-- тут текст письма -->
</table>
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}
Также нужно будет адаптировать размеры изображений и размер шрифта (font-size) — и все.
В случае многоколоночных писем все куда сложнее, поскольку колонки, которые располагались одна рядом с другой в десктопной версии письма, должны быть перераспределены для его отображения на смартфоне.
Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align="left" для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:
С уменьшением ширины экрана устройств необходимо изменять размер контейнера и обеспечивать стопроцентную ширину таблиц и колонок:
table[class="body_table"] {
width: 600px;
}
table[class="column_table"] {
width: 180px;
}
table[class="spacer_table"] {
width: 30px;
height:30px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 420px!important;
}
table[class="column_table"] {
width: 100%!important;
}
}
Массимо Кассандро залил этот код на
Эта техника позволяет добиться того, что письмо будет отображаться в большинстве почтовых клиентов. Возможно вы заметили странное написание селекторов класса [class="body_table"] вместо привычного .body_table — это специальный хак для работы с почтовым сервисом Yahoo. Дело в том, что он некорректно работает с CSS с медиазапросами и данный хак позволяет игнорировать эти стили.
Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.
Второй способ создания многоколоночных писем с помощью свойства display более элегантен. Суть метода заключается в изменении для ячеек таблиц их «дефолтного» свойства display при уменьшении ширины экрана устройства, на котором отображается письмо:
table[class="body_table"] {
width: 600px;
}
table td[class="column"] {
height:100px;
width:200px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 440px!important;
}
table td[class="column"] {
width:100%!important;
display: block!important;
}
}
Здесь можно «поиграть» с примером кода на
В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему «резиновой» — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, которые не поддерживают медиазапросы (таких как Яндекс.Почта и Mail.ru под iOS/Android)
Вариант создания «резиновой» верстки в письмах – использование оборачивающих дивов с указанием максимальной ширины (max-width). Так как Outlook не поддерживает это правило, под него прописываются специальная инструкция-комментарий, в которой «заключена» табличная верстка.
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="640" align="center" style="width:640px;">
<tr>
<td>
<![endif]-->
<div style="margin:0 auto; max-width:640px;">
<table cellpadding="0" cellspacing="0" style="width:100%;" align="center" border="0">
<tr>
<td>…</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
Более подробный пример кода можно найти
Создавать и редактировать многоколоночные шаблоны с такими комментариями довольно сложно, однако этот процесс можно упростить использованием фреймворков для создания шаблонов, например
Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную «табличную» верстку:
<mj-container>
<mj-section>
<mj-column>
<mj-text>Hello World!</mj-text>
</mj-column>
</mj-section>
</mj-container>
Отдельная тема — создание адаптивных версий изображений. Здесь достаточно использовать классический метод создания адаптивного контента (img {max-width: 100%;}).
Крупные баннеры, предназначенные для отображения на всю ширину на десктопе, в мобильных почтовых клиентах могут становиться нечитаемыми. В таком случае с помощью медиазапросов можно скрывать изначальное изображение и отображать в качестве фона другое:
@media only screen and (max-device-width: 480px) {
img[class="original_img"] {
display: none;
}
[class="substitute_image"] {
background-image: url(background_image.png);
width: 440px !important;
height: 240px !important
}
}
Пример — из этого
Что еще: неочевидные моменты в работе с текстом email
В заключение еще несколько советов, которые помогут создать качественную почтовую рассылку.
Не нужно забывать о текстовой версии письма
Большинство получаемых пользователями писем –—это так называемые MIME-сообщения. Этот стандарт подразумевает использование и HTML-версии и обычной текстовой версии письма — почтовый клиент получает их обе, а затем сам решает, какую из них использовать в зависимости от настроек. Поэтому при отправке писем очень важно включать обе их версии.
Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.
Прехедер сообщения очень важен
При создании рассылок часто забывают о так называемом тексте превью или прехедере. Текст превью (или прехедер) — это небольшой кусочек текста, который «подтягивается» из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения.
Смысл использования этого элемента в привлечении внимания получателя сообщения, чтобы стимулировать его открыть письмо. Этот элемент может серьезно влиять на общую конверсию. Текст превью «вытягивается» из первых нескольких строк текста письма. При этом в теле сообщения его можно отображать или скрывать с помощью несложного кода. Важно помнить, что иногда в прехедер может попадать служебная информация, вроде иконок соцсетей, призывов к действию и т.п. Важно не допускать таких ошибок.
Для превью сообщений и тестирования прехедеров можно использовать
Следование описанным выше советам помогут создать качественный шаблон письма и не сделать распространенных ошибок, даже если это первая рассылка, которую вы готовите.
Константин Макаров
Email стал универсальным инструментом маркетинга для многих компаний. Однако при его использовании возникает большое количество вопросов, а недостаток опыта в работе с электронной почтой может приводить к ошибкам.
В этом материале мы собрали полезную информацию, статистику и примеры кода, которые помогут сверстать первую почтовую рассылку и не упустить важные моменты.
На старте: типы писем, аналитика и важные цифры
Существует несколько основных типов писем, которые компании отправляют своим текущим и потенциальным клиентам:
- Маркетинговые письма — существует множество инструментов для осуществления email-рассылок, которые позволяют компаниям создавать маркетинговые рассылки, работать с базой подписчиков, генерировать аналитические отчеты об эффективности кампаний.
- Транзакционные письма — в эту категорию попадают приветственные сообщения, оповещения об оплате услуг, всевозможные алерты и письма со ссылками для сброса паролей.
- Письма жизненного цикла продукта – компании могут генерировать письма своим пользователям с целью помочь им разобраться с использованием продукта, кроме того, письмо может отправляться в качестве реакции на определенные действия человека.
Вам необходимо зрегистрироваться для просмотра ссылок
Ли Мунро приводит усредненные цифры, которые помогут компании начать анализировать эффективность почтовых рассылок. У каждой компании будут свои показатели, но в качестве первого шага можно ориентироваться на следующие тезисы:- 20% — это хороший показатель открываемости писем;
- от 3 до 7% — хороший показатель CTR;
- 5% — плохой показатель отказов;
- 0,01% — плохой показатель попадания писем в спам;
- 1% — плохой показатель отписок.
Вам необходимо зрегистрироваться для просмотра ссылок
», который показывает реальную вовлеченность подписчиков рассылки.Еще один момент, о котором нужно помнить на старте — на эффективность email-сообщений компании влияет ее репутация. Она влияет на то, как интернет провайдеры и почтовые программы доставляют и отображают письма: будут ли они приняты и доставлены в папку входящих или отправятся в спам. Вот какие факторы оказывают влияние на это:
- Репутация IP-адреса — ее можно узнать с помощью
Вам необходимо зрегистрироваться для просмотра ссылок.
- Доменная подпись (
Вам необходимо зрегистрироваться для просмотра ссылокиВам необходимо зрегистрироваться для просмотра ссылок).
- Показатель отказов и количества жалоб со стороны получателей сообщений.
Показатели рассылок Ли Мунро
Разработчики проекта
Вам необходимо зрегистрироваться для просмотра ссылок
отслеживают статистику по доле рынка email среди различных почтовых клиентов. В случае конкретной компании распределение пользователей различных платформ и программ может быть другим, но на старте неплохо понимать базовую диспозицию на рынке. По данным на май 2017 года, cамыми популярными почтовыми платформами являются iPhone и Gmail:Разработка email: проблемы верстки
Если компания решит не использовать существующие на рынке решения для создания шаблонов рассылок, то ее специалистам придется разобраться с вопросами верстки писем – и в случае email это может быть сложнее, чем создать страницу на сайте.
Сложности начинаются с самого начала — существует множество движков рендеринга писем, которые используются различными почтовыми программами:
- Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
- Outlook 2000, 2002 и 2003 используют Internet Explorer.
- Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
- Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink).
Вам необходимо зрегистрироваться для просмотра ссылок
поддержку встроенного CSS и media queries.Разнообразие почтовых клиентов и движков рендеринга приводит к необходимости использования универсальных подходов — в частности, это значит, что вместо использования дивов (div) лучше применять табличную верстку. Конкретно, это выливается в использование:
- <table> вместо <div>,
- #FFFFFF вместо #FFF,
- padding вместо margin,
- CSS2 вместо CSS3,
- HTML4 вместо HTML5,
- background-color вместо background, также стоит использовать расширенные свойства, вроде padding-top;, padding-left; и др,
- лучше избегать использования фоновых изображений и задавать фон цветом, а визуальные элементы через тег <img>,
- HTML-атрибутов вместо CSS,
- инлайн CSS вместо наборов стилей или блоков <style>.
<style>
@import url(
Вам необходимо зрегистрироваться для просмотра ссылок
/* Type styles for all clients */
h1 {
}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1 {
}
}
</style>
Важно не забыть прописать для каждой ячейки таблицы (<td>) font family, font size и color — иначе почтовый клиент может проигнорировать выбранный шрифт. Это правило нужно соблюдать и для любых блочных элементов, в которых находится текст (<p>, <h1>...<h5>, <div> и т.п.)
Следующая важная тема при верстке писем — работа с изображениями и медиа. Некоторые почтовые программы по умолчанию показывают картинки, а некоторые их блокируют. Помимо прочего это оказывает влияние на возможность сбора статистики – как правило, для этого используются специальные картинки малого размера (следящий пиксель). Это значит, что если почтовая программа блокирует изображения, то понять, открыл ли пользователь письмо, просто не удастся. Поведение почтовых клиентов здесь весьма вариативно:
- Outlook блокирует рендеринг изображений по умолчанию.
- Apple Mail не блокирует.
- Gmail не блокирует (c недавних пор).
Вам необходимо зрегистрироваться для просмотра ссылок
стилевые правила текста, например "color" или "font-family", которые будут применяться к alt-тексту.Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.
Работа в мобайле: адаптивные email-письма
- Около
Вам необходимо зрегистрироваться для просмотра ссылокоткрывают с мобильных устройств, и эти цифры растут.
- По
Вам необходимо зрегистрироваться для просмотра ссылокпроекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
- Исследователи из MailChimp
Вам необходимо зрегистрироваться для просмотра ссылок, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.
Вам необходимо зрегистрироваться для просмотра ссылок
по созданию адаптивных версий email-сообщений. Ниже — выжимка основных советов из этого материала.Существует два основных вида писем в «мобайле» — одноколоночные и многоколоночные. В первом случае особенных сложностей с тем, чтобы сделать контент адаптивным, не возникает, поскольку нет необходимости в реорганизации элементов письма. Необходимо лишь обеспечить уменьшение ширины шаблона для лучшего отображения на устройствах разного размера.
Для обеспечения корректного изменения размера, нужно адаптировать ширину таблицы (выше мы говорили о том, что в сфере email до сих пор в ходу табличная верстка):
<table cellspacing="0" cellpadding="0" border="0" width="600">
<!-- тут текст письма -->
</table>
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}
Также нужно будет адаптировать размеры изображений и размер шрифта (font-size) — и все.
В случае многоколоночных писем все куда сложнее, поскольку колонки, которые располагались одна рядом с другой в десктопной версии письма, должны быть перераспределены для его отображения на смартфоне.
Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align="left" для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:
С уменьшением ширины экрана устройств необходимо изменять размер контейнера и обеспечивать стопроцентную ширину таблиц и колонок:
table[class="body_table"] {
width: 600px;
}
table[class="column_table"] {
width: 180px;
}
table[class="spacer_table"] {
width: 30px;
height:30px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 420px!important;
}
table[class="column_table"] {
width: 100%!important;
}
}
Массимо Кассандро залил этот код на
Вам необходимо зрегистрироваться для просмотра ссылок
— это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.Эта техника позволяет добиться того, что письмо будет отображаться в большинстве почтовых клиентов. Возможно вы заметили странное написание селекторов класса [class="body_table"] вместо привычного .body_table — это специальный хак для работы с почтовым сервисом Yahoo. Дело в том, что он некорректно работает с CSS с медиазапросами и данный хак позволяет игнорировать эти стили.
Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.
Второй способ создания многоколоночных писем с помощью свойства display более элегантен. Суть метода заключается в изменении для ячеек таблиц их «дефолтного» свойства display при уменьшении ширины экрана устройства, на котором отображается письмо:
table[class="body_table"] {
width: 600px;
}
table td[class="column"] {
height:100px;
width:200px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 440px!important;
}
table td[class="column"] {
width:100%!important;
display: block!important;
}
}
Здесь можно «поиграть» с примером кода на
Вам необходимо зрегистрироваться для просмотра ссылок
.В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему «резиновой» — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, которые не поддерживают медиазапросы (таких как Яндекс.Почта и Mail.ru под iOS/Android)
Вариант создания «резиновой» верстки в письмах – использование оборачивающих дивов с указанием максимальной ширины (max-width). Так как Outlook не поддерживает это правило, под него прописываются специальная инструкция-комментарий, в которой «заключена» табличная верстка.
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="640" align="center" style="width:640px;">
<tr>
<td>
<![endif]-->
<div style="margin:0 auto; max-width:640px;">
<table cellpadding="0" cellspacing="0" style="width:100%;" align="center" border="0">
<tr>
<td>…</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
Более подробный пример кода можно найти
Вам необходимо зрегистрироваться для просмотра ссылок
.Создавать и редактировать многоколоночные шаблоны с такими комментариями довольно сложно, однако этот процесс можно упростить использованием фреймворков для создания шаблонов, например
Вам необходимо зрегистрироваться для просмотра ссылок
.Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную «табличную» верстку:
<mj-container>
<mj-section>
<mj-column>
<mj-text>Hello World!</mj-text>
</mj-column>
</mj-section>
</mj-container>
Отдельная тема — создание адаптивных версий изображений. Здесь достаточно использовать классический метод создания адаптивного контента (img {max-width: 100%;}).
Крупные баннеры, предназначенные для отображения на всю ширину на десктопе, в мобильных почтовых клиентах могут становиться нечитаемыми. В таком случае с помощью медиазапросов можно скрывать изначальное изображение и отображать в качестве фона другое:
@media only screen and (max-device-width: 480px) {
img[class="original_img"] {
display: none;
}
[class="substitute_image"] {
background-image: url(background_image.png);
width: 440px !important;
height: 240px !important
}
}
Пример — из этого
Вам необходимо зрегистрироваться для просмотра ссылок
Что еще: неочевидные моменты в работе с текстом email
В заключение еще несколько советов, которые помогут создать качественную почтовую рассылку.
Не нужно забывать о текстовой версии письма
Большинство получаемых пользователями писем –—это так называемые MIME-сообщения. Этот стандарт подразумевает использование и HTML-версии и обычной текстовой версии письма — почтовый клиент получает их обе, а затем сам решает, какую из них использовать в зависимости от настроек. Поэтому при отправке писем очень важно включать обе их версии.
Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.
Прехедер сообщения очень важен
При создании рассылок часто забывают о так называемом тексте превью или прехедере. Текст превью (или прехедер) — это небольшой кусочек текста, который «подтягивается» из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения.
Смысл использования этого элемента в привлечении внимания получателя сообщения, чтобы стимулировать его открыть письмо. Этот элемент может серьезно влиять на общую конверсию. Текст превью «вытягивается» из первых нескольких строк текста письма. При этом в теле сообщения его можно отображать или скрывать с помощью несложного кода. Важно помнить, что иногда в прехедер может попадать служебная информация, вроде иконок соцсетей, призывов к действию и т.п. Важно не допускать таких ошибок.
Для превью сообщений и тестирования прехедеров можно использовать
Вам необходимо зрегистрироваться для просмотра ссылок
от Остина Вудалла (Austin Woodall).Следование описанным выше советам помогут создать качественный шаблон письма и не сделать распространенных ошибок, даже если это первая рассылка, которую вы готовите.
Константин Макаров
