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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CAN SPAM

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

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

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

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

Пару значений настроек для оценки эффективности рассылки:

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

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

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

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

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

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

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

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

Когда вы отсылаете много писем(представьте себе 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 обрабатывать встраиваемый программный код.
Создание и рассылка HTML электронных писем - введение для веб-разработчиков

Если вы вручную вводите 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>

Создание и рассылка HTML электронных писем - введение для веб-разработчиков Первый элемент <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 для почтовых покупателей, которые отключили картинки:

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

<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 для заказов.

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

  • 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 электронных писем - введение для веб-разработчиков Как отправить HTML электронное письмо самому себе? PutsMail может сделать это довольно просто.

MIME часть

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

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

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

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

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

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

Доступность

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

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

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

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

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

Гибкие

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

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

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

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

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

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

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

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

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

<!--[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 .

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

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

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

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

Заключение

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

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

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