Как самостоятельно создать первую email-рассылку: статистика, советы и примеры кода

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

В этом материале мы собрали полезную информацию, статистику и упражнения кода, которые помогут сверстать первую почтовую рассылку и неважный (=маловажный) упустить важные моменты.

На старте: типы писем, аналитика и важные цифры

Существует сколько-нибудь основных типов писем, которые компании отправляют своим текущим и потенциальным клиентам:

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

В своем материале на Smashing Magazine веб-формирователь и создатель проекта HTMLemail.io Ли Мунро приводит усредненные цифры, которые помогут компании похреначить анализировать эффективность почтовых рассылок. У каждой компании будут домашние показатели, но в качестве первого шага можно освоиться на следующие тезисы:

• 20% — это хороший показатель открываемости писем;
• с 3 до 7% — хороший показатель CTR;
• 5% — плохой показатель отказов;
• 0,01% — вшивый показатель попадания писем в спам;
• 1% — плохой показатель отписок.

Имеет большое значение помнить, что показатель открытия и CTR зачастую являются яко называемыми «метриками тщеславия» (vanity metrics), которые сверху самом деле не несут в себе большого смысла про бизнеса. Прежде чем начинать работы по email-маркетингу и аналитике, подобает определиться с целями — это могут быть разные цифирь, от продаж до определенного уровня конверсии. Каждая пароходство должна выбирать цели, которые важны для ее бизнеса. Басня – в Airbnb замеряют «индекс качества писем», который показывает реальную втянутость подписчиков рассылки.

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

• Репутация IP-адреса — ее можно испытать с помощью SenderScore.
• Доменная подпись (DKIM и SPF).
• Показатель отказов и количества жалоб со стороны получателей сообщений.

Данные рассылок Ли Мунро

Разработчики проекта Email Client Market Share отслеживают статистику согласно доле рынка 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).

Почтовые клиенты добавляют собственные стили, за исключением тех, что были изначально выбраны разработчиком рассылки. Возьмем, Gmail для всех шрифтов в <td> устанавливает значение. Равным образом разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного 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>.

Также особенно простым и надежным решением будет использование стандартных системных шрифтов чтобы отображения текстов писем. Однако в случае необходимости внесения изменений в типографику разрешено использовать веб-шрифты (например, Google Fonts). Воеже правила веб-шрифтов не конфликтовали с Outlook, целесообразно использовать специальный медиазапрос для WebKit:

<style>

@import url(http://fonts.googleapis.com/css?family=Pacifico);

/* 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> и т.п.)

Следующая важная тема рядом верстке писем — работа с изображениями и медиа. Некоторые почтовые программы согласно умолчанию показывают картинки, а некоторые их блокируют. За вычетом прочего это оказывает влияние на возможность сбора статистики – в качестве кого правило, для этого используются специальные картинки малого размера (надсматривающий пиксель). Это значит, что если почтовая программка блокирует изображения, то понять, открыл ли юзер письмо, просто не удастся. Поведение почтовых клиентов тут. Ant. там весьма вариативно:

• Outlook блокирует рендеринг изображений после умолчанию.
• Apple Mail не блокирует.
• Gmail отнюдь не блокирует (c недавних пор).

Важно включать alt-текст во (избежание всех используемых картинок — это поможет получателю переписка понять, что должно было быть на месте изображений, кабы его email-клиент вдруг ему их мало-: неграмотный покажет. Для тега <img> можно прописать стилевые распорядок текста, например "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%.

Цифры будто о том, что необходимо уделять особое внимание тому, (как) будто письма отображаются на различных мобильных устройствах. Веб-конструктор Массимо Кассандро публиковал на SitePoint полезную инструкцию после созданию адаптивных версий 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;

}

}

Массимо Кассандро залил текущий код на Codepen — это специальная песочница, в которой позволено протестировать пример, подставляя собственные данные.

Эта аппаратура позволяет добиться того, что письмо будет разрисовываться в большинстве почтовых клиентов. Возможно вы заметили странное царапанье селекторов класса [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;

}

}

На этом месте можно «поиграть» с примером кода на Codepen.

В описанных повыше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные начатки. В таком случае верстка не является по-настоящему «резиновой» — наш брат просто прописываем нужные стилевые правила под определенные разрешения экрана. Преимущество этот способ не сработает в мобильных почтовых клиентах, которые безграмотный поддерживают медиазапросы (таких как Яндекс.Почта и 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.

Шаблон 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).

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