Создание и рассылка HTML электронных писем - введение для веб-разработчиков

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

Отправка электронных писем — введение

Компании используют несколько типов email-рассылок. Давайте рассмотрим их.

Маркетинговые электронные письма

Многие поставщики услуг электронной почты (ESP) специализируются на маркетинговых и рекламных рассылках. Они предоставляют решения для управления списком подписчиков, работы с шаблонами писем и проведения email-кампаний.

Транзакционные электронные письма

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

Чаще всего они реализуется с помощью средств разработки и API, таких как Mailgun, SendGrid и Postmark. Эти инструменты ориентированы на API, а не на CMS и WYSIWYG.

Альтернативой использованию того или иного специализированного сервиса является развертывание собственного почтового сервера. Недостатком подобного подхода является сложность технической реализации.

Рассылки, основанные на жизненном цикле клиента

Сервисы электронной почты, основанные на жизненном цикле и поведении клиентов, помогают в привлечении пользователей и продвижении бренда. Многие ESP, ориентированные на маркетинг, также предлагают эту услугу. Но я лучше использовать специализированные сервисы: Intercom, Customer.io, Drip, Vero и ConvertKit.

Рекомендации по составлению списка подписчиков

Не покупайте базы данных электронных адресатов. Лучше всего избегать покупки подобных списков.
Любой, кто покупает базы адресов электронной почты, может столкнуться с множеством проблем: от плохой репутации для IP-адреса до блокировки почтового ящика провайдерами интернет-услуг (ISP).

Двойная проверка

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

CAN SPAM

Это свод юридических норм, которые нужно соблюдать при отправке электронных писем. В соответствии с Актом CAN-SPAM от 2003 года:

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


MailChimp предоставляет список юридических требований для электронных рассылок в разных странах.

Аналитика и определение эффективности

Несколько значений параметров для оценки эффективности рассылки:

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

Но главные показатели, которые нужно отслеживать — это конечная цель или конверсия. Airbnb позволяет отслеживать оценку качества электронной почты.

Конструктор URL-адресов Google может помочь в отслеживании, если вы используете Google Analytics.

Репутация и оценка рассылок

Электронные письма имеют репутацию и оценку, связанную с ней. Это влияет на то, как интернет-провайдеры и почтовые сервисы «воспринимают» ваш адрес электронной почты.

Факторы, влияющие на репутацию email:

  • репутация IP-адреса (проверьте с помощью SenderScore),
  • подпись доменного имени (смотрите DKIM и SPF),
  • показатель отписок и показатель жалоб.

Массовая рассылка

Когда вы отсылаете много писем (представьте себе email- кампанию с миллионами писем), не все они отправляются мгновенно. Подписчики могут не получить электронные письма в одно и то же время.
Если вы отправляете миллионы электронных писем сразу, вам понадобится довольно много IP-адресов для ускорения рассылки.

Почтовые клиенты

Популярность почтовых сервисов среди пользователей (занимаемые доли рынка):

  • iPhone: 33%.
  • Gmail: 19%.
  • iPad: 12%.
  • Android: 8%.
  • Apple Mail: 7%.

HTML-шаблоны

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

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

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

Движки отображения в почтовом клиенте

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

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
  • В Outlook 2000, 2002 и 2003 используется Internet Explorer.
  • Outlook 2007, 2010 и 2013 используют Microsoft Word.
  • Веб-клиенты используют соответствующий движок браузера (например, Safari использует WebKit, а Chrome использует Blink).

Кроме этого почтовые клиенты добавляют свой собственный стиль поверх ваших. Например, Gmail устанавливает для всех шрифтов <td>-font-family: Arial, sans-serif;.

Поддержка Gmail для встроенных стилей CSS и медиазапросов

Несколько лет назад корпорация Google объявила о реализации в Gmail поддержки встроенных стилей CSS и медиазапросов. Что значительно упростило разработку шаблонов электронных писем для этого почтового сервиса.

Использование HTML-таблиц

Блоки <div> вызывают целый ряд проблем с позиционированием в ​​различных почтовых клиентах. Поэтому для верстки шаблонов писем лучше использовать таблицы. Это означает следующее:

  • <table> вместо <div>,
  • #FFFFFF вместо #FFF,
  • padding вместо margin,
  • CSS2 вместо CSS3,
  • HTML4 вместо HTML5,
  • background-color вместо background,
  • HTML-атрибуты вместо CSS,
  • встроенные CSS вместо таблиц стилей или блоков <style>.

При использовании таблиц не забывайте указать border=»0″ cellpadding=»0″ cellspacing=»0″. Если вы используете Premailer, у него есть специальные объявления CSS для применения этих атрибутов HTML.

Встроенный CSS

Некоторые почтовые клиенты не воспринимают внешние файлы CSS. Чтобы избежать этой проблемы:

  • используйте встроенный CSS;
  • используйте программное встраивание CSS;
  • разрешите ESP обрабатывать встраиваемый код.

Если вы вручную вводите CSS, я рекомендую использовать сниппеты или язык шаблонов. Также можно использовать Responsive CSS Inliner и Responsive Email Inlinerот Foundation for Email. А также модуль Node.js Juice, Premailer gem и Roadie.

Кнопки

Вот как можно создать кнопку для веб-страницы:

<a href="#" class="btnbtn-primary">Click Here</a>

Но для кнопок в электронных письмах используется другой подход:

<table border="0" cellpadding="0" cellspacing="0" class="btnbtn-primary">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="" target="_blank">Take action now</a></td>
</tr>
</table>
</td>
</tr>
</table>

После использования внутренних стилей код будет выглядеть следующим образом:

<table border="0" cellpadding="0" cellspacing="0" class="btnbtn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
<tr>
<td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;"valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"valign="top"bgcolor="#3498db" align="center"><a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a></td>
</tr>
</table>
</td>
</tr>
</table>


Первый элемент <td> — это контейнер, который помогает центрировать кнопку. Второй элемент <td> — это размер кнопки. Некоторые почтовые клиенты (например, Outlook) не распознают отступы в теге <a>, поэтому мы заливаем фон ячейки таблицы цветом. Тег <a> занимает свободное пространство во втором элементе <td>, и вся область становится кликабельной.

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

Что такое VML? Это язык векторной разметки (VML) поддерживается старыми версиями Outlook. Но VML устарел и не поддерживается в новых версиях IE. Однако пока используются в Outlook 2007, 2010 и 2013 для фоновых изображений.

Типографика

Проще всего придерживаться стандартных системных шрифтов. К ним относятся Helvetica, Arial и так далее. Но можно использовать и веб-шрифты, такие как Google Fonts. Поместите их за условным медиазапросом WebKit, чтобы Outlook не сбросил их:

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

/* Стилидлявсехклиентов */
h1 {
font-family: Helvetica, Arial, serif;
}

/* Стили для всех WebKit клиентов */
@media screen and (-webkit-min-device-pixel-ratio:0){
h1 {
font-family:Pacifico, Helvetica, Arial, serif !important;
}
}
</style>

Не забудьте установить семейство шрифтов, размер шрифта и цвет для каждого элемента <td>. Иначе почтовый клиент перепишет ваши стили типографики.

Условия

Мы можем применить конкретные стили CSS, показывать или скрывать элементы и контент для различных версий Outlook.

Приведенное ниже условие предназначено для всех версий Microsoft Outlook на основе Microsoft Word:

<!--[if mso]>
Только версии Outlook на основе Microsoft Word увидят это.
<![endif]-->

Следующий фрагмент кода предназначен для всех версий Outlook на основе IE:

<!--[if (IE)]>
Только версии Outlook на основе IE увидят это.
<![endif]-->

Также можно выбрать определенные версии Outlook:

<!--[if mso 12]>
Только Outlook 2007 увидит это.
<![endif]-->

Или выбрать конкретные почтовые клиенты на основе WebKit с помощью медиазапроса:

.special-webkit-element {
display: none;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
.special-webkit-element {
display: block !important;
}
}

Изображения и медиа

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

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

  • По умолчанию Outlook блокирует рендеринг изображений.
  • Apple Mail не блокирует.
  • Gmail не блокирует.

Не забудьте использовать для всех изображений атрибут alt. Заданный в нем текст позволит понять пользователю, что изображено на картинке. Вы можете применить креатив с текстом alt для почтовых клиентов, которые отключили изображения:


Не забудьте сбросить стили для всех изображений:

<img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0" style="border:0; outline:none; text-decoration:none; display:block;">

Анимированные GIF- изображения поддерживаются большинством почтовых клиентов. В версиях Outlook с 2007 по 2013 анимированные GIF-изображения не поддерживаются, а вместо них отображается первый кадр.

Не забудьте сжимать медиа-ресурсы и загружать их через сеть доставки контента (CDN). Например, Amazon Web Services, Cloudinary или imgix. Большинство ESP предоставляют подобные возможности.

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

Имейте в виду, что для Outlook необходимо задать, насколько широким должно быть изображение. Это можно сделать с помощью атрибута width.

Видео в электронных письмах

Видео поддерживается в iOS, Apple Mail и Outlook.com. Вы можете использовать медиазапросы, чтобы отобразить или скрыть видео, в зависимости от почтового клиента.

Формы в электронных письмах

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

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

Действия Gmail

Google предлагает в наше распоряжение action в Gmail. Вы могли встречаться с их использованием на Amazon для заказов.


Добавить код для действий очень просто. У вас есть два варианта:

  • JSON-LD;
  • Микроданные.

Чтобы использовать action, нужно пройти несколько шагов. Вы можете протестировать действия Gmail с помощью адреса электронной почты открытого на gmail.com.

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

Некоторые почтовые клиенты отображают текст предварительного заголовка рядом со строкой темы или под ней. К таким программам относятся iOS, Apple Mail, Outlook 2013, Gmail и AOL.

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

<span style="color: transparent; display: none !important; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">Preheader text goes here</span>

Используйте инструмент для тем и предварительных заголовков от Остина Вуделла.

Проверка электронных писем

Вы можете проверить электронные письма несколькими способами:

  • Отправьте электронное письмо самому себе и проверьте его на стационарном почтовом клиенте (Outlook), в веб-клиенте (Gmail), а такжев мобильном почтовом клиенте (iOS Mail).
  • Автоматизируйте тестирование с использованием Litmus или Email on Acid.
  • Отредактируйте содержимое электронного письма.
  • Проводите A / B тестирование различных типов контента, объема содержимого и темы электронного письма.


Как отправить HTML электронное письмо самому себе? PutsMail позволяет сделать это довольно просто.

MIME часть

Большинство писем, которые вы отправляете или получаете, являются составными MIME (Multipurpose Internet Mail Extensions). Этот стандарт сочетает в себе как обычный текст, так и HTML.

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

Обратите внимание, что некоторые почтовые клиенты представляют текстовые письма как HTML.

Например, Gmail по умолчанию добавляет определенные стили и преобразует URL-адреса в ссылки. Большинство ESP автоматически создают MIME, поэтому вам не нужно беспокоиться об этом. Некоторые из них также создают текстовую версию электронного письма, основанную на HTML.

Совет. В Gmail выберите в раскрывающемся меню «Показать оригинал», чтобы увидеть полный MIME.

Недавно появилась новая часть MIME: text/watch-html. Этот контент отображается только в Apple Watch.

Доступность

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

  • Добавьте role=»presentation» в каждую таблицу, чтобы было ясно, что в шаблоне используется табличная верстка.
  • Предоставьте в alt текст с содержательными описаниями.
  • Если вам не хотите использовать альтернативный текст, тогда укажите alt=»», чтобы экранные дикторы знали, что он должен быть пустым.
  • Используйте семантические теги HTML, такие как <p> и <h1>, там, где это применимо.
  • Используйте атрибут role для таких элементов, как хедеры и футеры (например, role=»header»).

Адаптивный дизайн электронных писем

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

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

Гибкие

Самое простое решение — использовать один столбец и сделать электронные письма гибкими. Это означает, что по мере сокращения области просмотра область содержимого также будет сжиматься.

.container {
max-width:600px;
width:100%;
}

Адаптивные и отзывчивые

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

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

Но медиазапросы поддерживаются не во всех почтовых клиентах, поэтому это не всегда надежно.

Гибридные и губчатые

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

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

<!--[if(gtemso 9)|(IE)]>

<tablealign="left" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left"valign="top" width="50%">
<![endif]-->
<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
<!--[if (gtemso 9)|(IE)]>
</td>
<td align="left"valign="top" width="50%">
<![endif]-->
<div class="span-3" style="display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;">...</div>
<!--[if (gtemso 9)|(IE)]>
</td>
</tr>
</table>

<![endif]-->
@media only screen and (max-width: 620px){
.span-3 {
max-width: none !important;
width:100%!important;
}
.span-3 > table {
max-width:100%!important;
width:100%!important;
}
}

Ознакомьтесь с открытым репозиторием губчатых стилей Фабио Карнейро на GitHub.

Адаптивные изображения

Используйте Retina-оптимизированные изображения с размерами от 1,5× до 3× и установите встроенные соотношения сторон.

<img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo" style="max-width: 100%;">

Мы не можем полагаться на max-width: 100%;, потому что некоторые почтовые клиенты игнорируют это свойство.

Также можно использовать следующий код CSS:

@mediaonlyscreenand(max-width: 620px){
img{
height: auto !important;
max-width:100%!important;
width: auto!important;
}
}

Автоматизация рабочего процесса

Создание оптимизированных электронных писем непрост. Я рекомендую автоматизировать этот процесс, чтобы выстроить систему и все упростить.

Я составил и открыл код рабочего процесса на Grunt для автоматизации создания электронной почты. Он позволяет выполнять различные задачи, такие как встраивание CSS, сжатие изображений, загрузка изображений в CDN, отправка предварительных заголовков, тестирование с помощью Litmus. Ивсе это с помощью одной команды.

У Foundation for Email есть отличные инструменты автоматизации для разработчиков. Как и у Mailjet с их фреймворком для создания адаптивной электронной почты MJML.

Глядя в будущее

Недавно Google развернул поддержку медиазапросов; Microsoft стали партнером Litmus, чтобы «улучшить электронную почту»; и Alto от AOL теперь поддерживает адаптивные электронные письма. Будущее отрасли выглядит намного перспективнее.

Заключение

Надеюсь, эта статья дала вам представление о процессе создания и рассылки электронных писем. А приведенные в ней сниппеты кода и ресурсы помогли сэкономить ваше время.

Перевод статьи «An Introduction To Building And Sending HTML Email For Web Developers» подготовлен дружной командой проекта Сайтостроение от А до Я.