От автора: email HTML: вы можете любить его, вы можете его ненавидеть, но вы слышали об этом. Готов поспорить, у вас есть мнение по этому поводу. Но знаете ли вы, что HTML email является исторически одним из самых ценных и важных каналов связи для компаний? .
Когда речь заходит о маркетинге и распространении электронных писем (например, все, что попадает на вкладку «Акции» в Gmail), компании могут рассчитывать в среднем на 35-44 доллара на каждый доллар, который они тратят, в зависимости от того, кого вы спросите . В ROI по электронной почте регулярно излагаются преимущества аффилированного маркетинга, платного поиска, медийной рекламы и социальных сетей, что делает его жизненно важным инструментом для каждой компании.
Транзакционные электронные письма — те, которые инициируются на основе некоторых действий (например, покупка, обновление учетной записи, уведомление о доставке и т. д.) — еще более ценны. Одно исследование, проведенное Experian, ставит ценность транзакционной электронной почты в 8 раз выше по маркетингу и рассылке электронных писем.
В то время как многие разработчики не будут работать над маркетингом или распространением электронных писем, большинство из них в какой-то момент коснутся транзакционных кампаний по электронной почте. На самом деле разработчики часто являются единственными, у которых прямой контроль над транзакционными электронными письмами, так как многие из них создаются с помощью приложения или привязаны непосредственно к кодовой базе.
Поскольку транзакционные электронные письма доказали, что они создают значительную рентабельность инвестиций для компаний, а лучшие разработчики — это те, кто понимает бизнес, очень важно, чтобы разработчики понимали основы HTML email.
Вот что вам нужно знать.
Типы писем
Существует два основных типа электронной почты: маркетинг (или трансляция) и транзакционный.
Маркетинговые письма — это то, о чем вы, вероятно, думаете, когда думаете об электронных письмах HTML. Они отправляются в список людей, которые подписались для их получения. Они могут быть купонами, информационными бюллетенями, приглашениями к мероприятию или множеством других вещей, но они являются одними ко многим. Несмотря на то, что они могут (и должны) быть персонализированными, все равно большая группа людей, получающих электронную почту от одного события отправки.
Транзакционные электронные письма, с другой стороны, являются индивидуальными сообщениями и отправляются в ответ на какое-то инициированное событие. Это такие вещи, как получение электронных писем, отправка уведомлений и обслуживание электронных писем, таких как сброс пароля и уведомления об обновлении учетной записи.
Иногда между ними существует немного серая область, но важно попытаться загрузить любую электронную почту в одну из этих двух категорий, особенно когда вы начинаете рассматривать права доступа к подписчикам. С 25 декабря, когда GDPR будет действовать, любой, кто отправляет электронную почту, должен собирать явное разрешение от подписчиков и вести запись об этом разрешении или сталкиваться со значительными штрафами.
Аутентификация
Когда пришло время начать отправлять HTML-письма — будь то маркетинг или транзакция — первым шагом является настройка вашей отправляющей среды. Несмотря на то, что большинство людей предпочтут стороннего поставщика услуг электронной почты (ESP), такого как Campaign Monitor, MailChimp или Salesforce Marketing Cloud (или Postmark и Sendgrid для транзакционных материалов), по-прежнему необходимо понять базовую инфраструктуру и процесс аутентификации при отправке электронные письма. ESP будут обрабатывать много для вас, но вам нужно будет настроить правильные записи аутентификации, чтобы обеспечить доставку ваших писем подписчикам.
Электронная почта работает через протокол простого обмена сообщениями (SMTP). Он полагается на ряд проверок, сделанных интернет-провайдером, чтобы убедиться, что вы являетесь тем, кого вы говорите, когда отправляете электронное письмо. Это такие вещи, как IP-адрес и обратные DNS-запросы. Хотя это хорошая отправная точка, есть три других метода проверки подлинности, которые необходимо правильно настроить для обеспечения хорошей доступности.
Структура политики отправителя (SPF) — это запись, хранящаяся в вашем домене, которая обеспечивает дополнительную проверку подлинности. В основном вы добавляете записи SPF и TXT в свои настройки DNS в домене, из которого вы отправляете электронные письма, которые включают IP-адрес вашего почтового сервера. Интернет-провайдеры могут проверить ваш IP-адрес как законный, что делает его более вероятным, что ваша электронная почта будет доставлена. Запись SPF выглядит примерно так:
Sender Policy Framework Project содержит дополнительную информацию о записях SPF и синтаксисе на их веб-сайте.
DomainKeys Identified Mail (DKIM) — еще один механизм аутентификации вашего сообщения. С DKIM вы, по сути, настраиваете ключи, на которые возлагается ответственность за электронную почту. DKIM подписывает электронное письмо с закрытым ключом, которое затем декодируется с помощью открытого ключа. Открытый ключ — это еще одна запись DNS для вашего домена отправки, которая похожа на это (взята с сайта DKIM):
Наконец, существует аутентификация, отчетность и соответствие протокола на основе доменов (DMARC). Хотя DMARC не является технически механизмом аутентификации, он сообщает получателю, что сообщение защищено другими механизмами, такими как SPF и DKIM. Если какой-либо из этих механизмов выходит из строя, DMARC сообщает получателю, что делать с сообщением: Pass, quarantine или fail. Затем он предоставляет механизм для уведомления отправителя о том, что произошло с сообщением. Это мощный способ отслеживать вашу репутацию отправки и видеть, кто (если кто-либо) злоупотребляет вашей почтовой инфраструктурой.
Как и два вышеупомянутых механизма, DMARC живет как запись DNS, но на этот раз в подобласти, например, _dmarc.example.com. Вы можете установить пороговые значения в DMARC с помощью тега pct, а затем сообщить получателю, что делать с этими сообщениями, используя тег <p> или политики, которые принимают значения none, quarantine и reject.
Важно отметить, что DMARC работает совместно с другими протоколами аутентификации. При правильной настройке все они являются частью цепочки поставок, которая помогает предотвратить спам.
Основной обзор сети доставки электронной почты.
Хотя существуют другие методы аутентификации, такие как SenderID и DomainKeys, они реализованы меньшим количеством интернет-провайдеров. Я оставлю это вам, чтобы исследовать их дальше.
Типы MIME
После того, как ваши домены будут правильно аутентифицированы и готовы отправить электронную почту, пришло время начать создавать эти письма. Сначала вы можете подумать, что HTML-письма — это простые HTML-документы. Но для этого есть нечто большее.
Сообщения электронной почты представляют собой сочетание как самого сообщения, так и заголовков, которые идентифицируют информацию об этом сообщении. Когда дело доходит до обеспечения доступности, пары ключ / значение в заголовке, такие как имя, отправитель, тема и путь возврата, указывают почтовым клиентам, которые отправляют сообщение. Многие из них используются с упомянутыми выше механизмами для аутентификации сообщения.
Но есть еще одна пара ключ / значение, которая строит фактическое сообщение. Это ключ Content-Type, который принимает значение типа multipart / alternative, чтобы уведомить получателя о наличии в сообщении нескольких частей и отобразить соответствующую часть для подписчика в зависимости от их предпочтений. Когда в сообщение включено несколько частей, электронное письмо называется электронным почтовым расширением MIME.
Существует два основных типа содержимого, используемые во всех HTML-письмах, типы text / plain и text / html. Тип HTML — это то, где фактический HTML вводится в сообщение, в то время как обычный тип — это то, где живет текстовая версия электронной почты. В целях обеспечения доступности вы всегда должны включать текстовую версию своего электронного письма, которая тесно соответствует или относится к HTML-версии вашего письма.
Существуют дополнительные типы контента, которые могут быть использованы, но они имеют очень ограниченную поддержку от ESP. Тип text / watch-html можно использовать для отправки ограниченной версии HTML вашего сообщения пользователям Apple Watch, в результате чего появляются текстовые сообщения.
Совсем недавно text-x-amphtml был внедрен в проект AMP компании Google и позволит использовать более богатые и интерактивные электронные письма при использовании разметки AMP.
Следует отметить, что с момента написания проекта все еще находится на ранних этапах, и никакие ESP не поддерживают добавление типа AMP MIME к исходящей электронной почте, что делает его практически бесполезным вне среды предварительного просмотра и тестирования Google.
Создание полного сообщения электронной почты и учет различных заголовков и частей MIME может быть сложным. К счастью, большинство ESP заботятся о вашей тяжелой работе, позволяя вам загружать только ваши HTML и текстовые версии сообщения. Тем не менее, важно знать, как создаются эти сообщения, поскольку многие компании по-прежнему создают собственные почтовые службы без защиты от стороннего ESP.
Основы HTML и CSS
Несмотря на то, что вы, вероятно, находитесь на передовой веб-разработке, HTML-письмо имеет тенденцию отставать от сети с точки зрения того, какая разметка используется для кампаний кодирования. Вы можете использовать div и семантическую разметку в сочетании с последними в CSS, например, flexbox и grid, но большинство почтовых клиентов в популярном использовании поддерживают только подмножество HTML и CSS. Из-за проблем с безопасностью и агрессивных (и часто устаревших) механизмов рендеринга клиенты электронной почты будут разделять, изменять или игнорировать много HTML и CSS. Campaign Monitor имеет отличное руководство по тому, что поддерживается там, где находятся все основные почтовые клиенты.
Вот почему большинство кампаний по электронной почте сегодня используют таблицы для структурирования контента и встроенного CSS для стилизации этого контента. Если вы создаете простые одностоловые электронные письма, вы можете уйти с электронной почтой на основе div, но для чего-то, требующего нескольких столбцов, вы застряли с использованием таблиц в некоторой емкости.
Давайте рассмотрим основы.
Структура электронной почты
Структура и содержание ваших писем будут в основном жить внутри HTML-таблиц. Хотя это и больно, вам не нужно беспокоиться обо всех тегах, связанных с таблицей, всего три: таблица (таблица), строка таблицы (tr) и ячейка таблицы (td). Таблица будет контейнером вашей электронной почты, а строка и ячейка будут отдельными модулями в этом письме.
Например, если у вас есть простая электронная почта с логотипом, заголовком, изображением, пунктом и кнопкой, эта структура будет выглядеть примерно так:
Каждый из этих отдельных элементов может быть его собственным модулем в своей собственной строке таблицы и ячейке таблицы. Сохранение модулей электронной почты позволяет вам более легко устранять проблемы в электронной почте, а также быстро комбинировать различные типы модулей для создания различных типов рассылок электронной почты.
По соображениям доступности вы должны включить атрибут ARIA role = «presentation» для каждого элемента таблицы в вашем письме. Это не позволит читателям экрана считывать содержимое в виде табличных данных, что упрощает понимание электронной почты.
В рамках этих модулей вы должны полагаться на привычную семантическую разметку для вашего контента. Если вы отмечаете заголовок, используйте элементы заголовка, такие как h1, h2 и т. Д. Если у вас есть параграф текста, используйте ap тег. Не каждый почтовый клиент поддерживает новые семантические теги, такие как заголовок или статья, но для людей, использующих программы чтения с экрана, добавленное семантическое значение может быть очень полезно.
Изображения немного сложнее, но не так уж плохо. Некоторым более старым почтовым клиентам нравится добавлять пробелы вокруг изображений или неправильно интерполировать, или ограничивать размеры изображений в зависимости от размера его родительского элемента. Оба экземпляра могут привести к нарушению компоновки и плохому пользовательскому опыту. Кроме того, поскольку почти половина всех пользователей открывают электронные письма на мобильных устройствах, мы хотим, чтобы изображения реагировали по умолчанию на всех устройствах. Это немного больше подробностей, но эта разметка будет охватывать все эти базы в электронных письмах:
<img alt="descriptive alternative text" src="https://example.com/img/example.jpg" width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%;">
Для не-декоративных изображений всегда должен быть включен альтернативный текст. Это особенно важно в электронной почте, так как многие почтовые клиенты блокируют изображения по умолчанию. В этих случаях отобразится текст alt. Вы даже можете создать стиль для многих клиентов, применив к тегу изображения такие вещи, как цвет и размер шрифта.
Атрибут width используется для клиентов, которые не выводят правильного размера изображения и атрибута границы, установленного в ноль, чтобы предотвратить синие границы вокруг связанных изображений. Использование display: block; гарантирует, что вокруг изображения не добавляется лишнее свободное пространство. Комбинация max-width, min-width и width позволяет масштабировать изображение вверх и вниз в зависимости от размера устройства, не раздувая макеты электронной почты или слишком малые на крошечных устройствах.
Использование изображений с реагированием по умолчанию и семантической разметки в табличных макетах может помочь вам получить 90% всей работы с электронной почтой. Для этих других 10% вам, вероятно, придется копаться в более сложных методах, таких как гибридное кодирование, которое использует макеты жидкостей и фиксированную ширину, условно-условный код Microsoft для обеспечения надежных и гибких почтовых кампаний. Проверьте мой сайт для закладок по электронной почте для получения дополнительных ресурсов.
Содержание стилей
Когда дело доходит до содержания стиля, вы можете держать вещи относительно простыми. Для максимальной совместимости вы должны применять стили в определенных элементах HTML, которые вы пытаетесь создать. Хотя примерно 90% основных почтовых клиентов теперь поддерживают встроенные стили, вы все равно получите несколько клиентов, которые не будут отображать встроенные стили, что приведет к плохо отформатированным электронным письмам. Недавно я писал о дебатах между вставленными и встроенными стилями, если вы хотите прочитать эту тему.
Для текста основные свойства CSS для color, font-family, font-size, font-style, font-weight и line-height будут творить чудеса, поскольку они повсеместно поддерживаются во всех основных почтовых клиентах. Для элементов уровня блока, таких как заголовки и абзацы, вы можете переопределить свойство margin для удаления дополнительного пробела. Часто более надежно включать пробел как дополнение к отдельным ячейкам таблицы, так как некоторым более старым клиентам не нравится свойство margin.
Вы даже можете использовать веб-шрифты во многих почтовых клиентах так же, как и в Интернете. Используйте правило CSS шрифта @font-face или ссылку на внешнюю таблицу стилей и вызовите их в стеке шрифтов. Просто включите твердые резервные шрифты для клиентов, которые не поддерживают веб-шрифты.
Кнопки немного сложнее в письмах. Хотя я обычно рекомендую вам переводить ссылки на элементы блочного уровня и использовать комбинацию фонового цвета, цвета, границы, границы радиуса и отступов для создания кнопок так же, как в Интернете, некоторые почтовые клиенты не отображают должным образом все эти свойства.
Существует несколько различных методов построения так называемых «пуленепробиваемых кнопок» в мире электронной почты, с использованием границ, отступов и комбинации обоих. Если вам нужно что-то действительно пуленепробиваемое, тогда вы всегда можете использовать превосходный генератор кнопок Bulletproof Button, который даст вам комбинацию HTML и фирменного языка векторной разметки Microsoft (VML), который будет работать повсюду. Просто не используйте изображения для кнопок, если вы можете помочь. Как я упоминал ранее, многие почтовые клиенты блокируют изображения по умолчанию, поэтому любые кнопки на основе изображений не будут видны и не будут нажаты.
Современные средства электронной почты
Если вы не увлекаетесь рукописью HTML и CSS для электронной почты, есть несколько инструментов, которые помогут сделать создание проще. Скорее всего, вам удобно работать в среде фреймворков, которые абстрагируют часть сложности домена и полагаются на соглашение, чтобы упростить разработку. Если это так, фреймворки, такие как MJML и Foundation for Emails, могут быть идеальными.
Оба обеспечивают простую разметку, встроенные компоненты и инструменты сборки, которые позволяют быстро разрабатывать код электронной почты, который хорошо работает на всех клиентах. Быстрый поиск GitHub будет вытягивать тонну шаблонов, фреймворков и инструментов для создания электронных писем HTML.
Интерактивное письмо от Litmus.
Хотя разметка и методы, описанные выше, довольно просты, не позволяйте этому обмануть вас. Электронная почта не обязательно должна быть статичной. HTML-адрес электронной почты позволяет некоторым серьезным сложным и мощным приложениям, таким как добавление интерактивности к электронной почте, позволяя пользователям испытывать богатые взаимодействия прямо в своем почтовом ящике.
Электронное агентство REBEL впервые разработало эту работу. Они создали все, начиная от простых каруселей и заканчивая полным просмотром розничных заказов в кампаниях с электронной почтой. Они даже открыли API, чтобы позволить разработчикам создавать эту интерактивность в своих собственных кампаниях без необходимости создавать все с нуля.
Если вы хотите свернуть свою собственную интерактивность с нуля, ознакомьтесь с тем, какой маркером по электронной почте Марк Роббинс называет метод «перфокарта». Используя простые HTML-радио и кнопки флажков, в сочетании с CSS, который смотрит на состояние этих кнопок и применяет условное форматирование, вы можете создать поистине удивительный опыт для ваших подписчиков.
Не отклоняйте HTML email
HTML email не может быть вашим первым выбором для проекта, но это невероятно мощный инструмент для каждой компании. Как маркетинговые, так и транзакционные электронные письма предоставляют неприличную рентабельность инвестиций, позволяя вам использовать свои навыки развития для непосредственного воздействия на ваш бизнес.
Более того, так популярны, как электронная почта среди потребителей — многие компании оставляют электронную почту в качестве запоздалой мысли. Стандарты электронной почты являются абсурдно низкими, поэтому, если вы разрабатываете электронные письма, которые даже немного лучше, чем конкуренты, у вас есть возможность добиться больших успехов, оказывая влияние не только на ваш бизнес, но и на жизнь ваших подписчиков.
Автор: Jason Rodriguez
Источник: https://blog.logrocket.com/
Редакция: Команда webformyself.