7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Email Design

Все разработчики должны знать о отправке электронной почты транзакции

Scroll to top
Read Time: 9 mins

Russian (Pусский) translation by Muhamad Zulfiqor (you can also view the original English article)

Представим, что вы разрабатываете новую функцию или приложение. Конец в поле зрения. Вся сложная инфраструктура, базы данных, API, тесты выглядят хорошо. Тогда вы понимаете, что есть ключевые моменты в системе, где вам нужно отправлять «транзакционные» электронные письма; сброс пароля, приветственные письма, квитанции, счета-фактуры.

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

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

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

  1. Что такое транзакций письма?
  2. Выберите поставщика услуг электронной почты (ESP)
  3. Руководство по исполнимости и репутация
  4. Кодирование гибкой электронной почты HTML
  5. Ресурсы электронной почты для разработчиков

Примечание: Этот учебник является частью целую неделю стоит содержание электронной почты на Tuts + Web дизайн – проверить руководство освоение HTML Email обучения для больше!

Что такое транзакций письма?

Вы могли бы классифицировать письма, отправляемые в компании и приложений:

  • Транзактных сообщений
  • Маркетинг электронной почты

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

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

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

  • Письма приветствия
  • Подтверждение электронной почты
  • Сброс пароля
  • Новые счета-фактуры/поступления
  • и т.д.

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

Правила для транзакций и маркетинга электронной почты отличаются незначительно. GDPR вступил в силу 25 мая 2018 года, поэтому любой отправки электронной почты маркетинга должен собрать явного разрешения от абонентов и сохранить запись этого разрешения. Как она стоит не требуется явное разрешение на отправку транзактных сообщений, например квитанцию для тех, кто только что купил что-то от вашего магазина. Однако есть преимущества для поддержания в соответствии с положениями GDPR независимо от того, какие виды электронной почте вы посылаете.

Выберите поставщика услуг электронной почты (ESP)

Это вполне возможно настроить свой собственный почтовый сервер и самостоятельно управлять отправки электронной почты. Если вы в большой компании, как Google или Facebook, вы можете даже иметь ваша собственная команда инфраструктуры электронной почты, посвященный поддержке транзакций почты.

Для большинства из нас, я не рекомендую установку и поддержание собственного почтового сервера. Есть много накладных расходов, участвующих в поддержке и обслуживании. Вместо этого используйте один из ESPs там. Они имеют большой API для разработчиков и по разумной цене, обычно с щедрым бесплатным ярусов.

SendGridSendGridSendGrid
SendGrid
MailgunMailgunMailgun
Mailgun
PostmarkPostmarkPostmark
Почтовый штемпель
MailjetMailjetMailjet
Mailjet
SparkPostSparkPostSparkPost
SparkPost

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

  • Отправка почты через SMTP или API.
  • Получение и анализ входящей электронной почты.
  • Метрики для послал, получил, отскочил, открыт, нажал писем.
  • Отказаться от подписки и подавления список управления.
  • Репутация мониторинг.
  • Управление петля обратной связи.
  • GDPR соответствия и многое другое.

После того как вы выбрали ваши ESP, пришло время установить вещи.

Руководство по исполнимости и репутация

Почтовый ящик поставщиков (например, Gmail и Outlook) посмотрите на вещица называется репутация. Вы хотите хорошую репутацию, чтобы убедиться, что ваш электронный адрес попадает в почтовые ящики получателей. Если у вас есть плохая репутация вашей электронной почты будет либо перейти на спам или поставщик услуг электронной почты может отклонить его и он будет отказов.

Согласно Talos в июле 2018 Среднее суточное количество спама глобально составила 305.95 млрд. Вы не хотите вашу почту, чтобы попасть в это ведро.

Average daily spam volumeAverage daily spam volumeAverage daily spam volume
Средний ежедневный объем спама

Вещи, которые могут способствовать плохая репутация:

  • Получатели, пометка почту как спам.
  • Получатели не открытие или взаимодействия с вашей электронной почты.
  • Вы отправить слишком много писем.
  • Вы отправлять письма с IP-адреса, что плохой показатель.
  • Вы еще не установки DKIM, SPF и DMARC.
  • Содержание, которое вы посылаете выглядит как спам.

Три главных аутентификации методы, которые вам нужно рассматривать являются SPF (инфраструктуры политики отправителей), DKIM (DomainKeys определены Mail) и DMARC (проверки подлинности сообщения на основе домена, отчетности и соответствия).

SPF является способом для почтового ящика поставщиков проверки подлинности, что письмо действительно пришел из вашего домена. Это запись TXT DNS, что вам придется добавить себя через ваш управления DNS.

DKIM использует пары открытого и закрытого ключей для подписи каждого сообщения с уникальным криптографической подписи, разработанная специально для обнаружения подделки электронной почты. Когда вы нажмете Отправить, ваши ESP будет добавить частные подпись, а затем на ваш DNS сидит общественного подписи, который поставщик почтового ящика получателя будет вызывать обеспечить все выглядит хорошо.

DMARC не является протоколом проверки подлинности, но позволяет установить политики для того, что делать с сообщениями, которые не проходят SPF или DKIM, будь то отклонить или карантин.

Вот пример того, как электронная почта проверки подлинности все приходит вместе. Это максимально упрощена, но дает вам идею как оно работает.

Email authenticationEmail authenticationEmail authentication
Аутентификация электронной почты (src: htmlemail.io)

Репутация связана вашего домена и IP-адрес, который вы используете, так что вы хотите это будет статическим. Проверка, что ваш IP-адрес-это самый простой способ почтовый ящик поставщика (Gmail, Outlook, Hotmail, Yahoo, AOL и др.) имеет при проверке вашей репутации. Когда вы отправляете свыше 50 000 писем в неделю, вам следует рассмотреть использование выделенный IP, так ты не обмена его с другими, давая вам некоторые более изоляции. И имейте в виду, вам нужно «разминки» IPs. Вы не должны просто начать отправлять миллионы писем от новой выделенный IP прямо сейчас. Большинство ESPs предлагают эту функцию.

Еще одна вещь, чтобы рассмотреть является использование отдельных IPs и поддоменов для ваших транзакций и маркетинга электронной почты. Обычно я создал что-то вроде send.mydomain.com для маркетинга и notifications.mydomain.com для транзактных сообщений.

Не отправлять от «без ответ @ «адрес электронной почты. Прежде всего он выглядит плохо получателям, как он выглядит, как вы не волнует и не хотят слышать от них. Во-вторых всех это большое дело, когда получатели ответа и участвовать. Это то, что почтовый ящик поставщиков хотели видеть.

Используйте инструменты, как SenderScore и SenderBase для мониторинга вашей репутации.

Кодирование гибкой электронной почты HTML

Многокомпонентное MIME

Когда вы отправляете по электронной почте он построен из заголовков и различных частей. Это известно как многоцелевой Internet Mail Extensions (MIME). Это сочетает в себе обычный текст, HTML или других частей и оставляет его получателей клиенту решить, что и как для его отображения.

  • Заголовков содержат значение ключа пары как кто был исходного отправителя, тему, обратный адрес и куча других интересных данных. Внутри вашего тела, у вас есть разные «частей».
  • типом text/plain это простейшая форма отправки по электронной почте с только текст и не форматирование.
  • текст/html позволяет HTML. Это где идет ваш email HTML.
  • текст/часы html для часы, как Apple Watch и имеет ограниченную поддержку HTML.
  • текст/x-amp-html-это новая часть, которая приносит интерактивного контента для Gmail с AMP для электронной почты.
email header structureemail header structureemail header structure

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

Если вам интересно, как все это выглядит, в Gmail нажмите Просмотр оригинал (или Показать оригинал), и он покажет вам, как производится колбасы. Нитка, все вместе это довольно сложно, это еще одна хорошая причина, чтобы использовать ESP, который делает все это для вас.

Таблицы и Inline CSS

Когда кодирование HTML электронной почте (пока еще) рекомендуется мы используем таблицы)<table>), строки таблицы ()<tr>) и ячейки таблицы ()<td>). Много клиентов электронной почты становятся лучше о поддержке современных HTML и CSS, но вы рискуете их разваливается в некоторых почтовых клиентов.</td></tr></table>

Есть много клиентов электронной почты вне там. Лакмус, электронное тестирование инструмент, в настоящее время поддерживает более 90 клиентов через настольных, веб- и мобильных устройств. Эти почтовые клиенты все использовать различные движки. Некоторые используют Webkit, некоторые Internet Explorer, некоторые Microsoft Word. И все они добавить некоторые из их собственных аромат стилей и классы поверх того, что вы предоставляете.

Подробнее о электронной почте движки.

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

  • Использование<table>Вместо<div></div></table>
  • Использовать полный Шестнадцатеричный цвета #ff6600 вместо стенографии #f60
  • Вместо заполнения полей
  • Использовать цвет фона вместо фона
  • Использовать встроенную CSS вместо встроенного CSS
  • Stick с системы и веб-безопасных шрифтов
  • Добавить роль = «представление» для каждой таблицы, так что это ясно для чтения с экрана таблицы используется для макета
  • Использование семантического HTML-теги, такие как<p>и<h1>, где это применимо</h1>

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

Это довольно пуленепробиваемое решение:

Написание CSS inline может быть однообразным, не говоря уже о том, что трудно поддерживать и не доступно, особенно для больших команд. Здесь вы хотите использовать CSS-inliner или набор инструментов автоматизации, который поможет вам создавать и встраивать ваши шаблоны. Рамки, такие как MJML и Inky, предоставляют разработчикам более удобный язык шаблонов для работы.

InkyInkyInky
чернильный
MJMLMJMLMJML
MJML

Примечание. Вы можете использовать медиа-запросы и условные операторы для целевых клиентов - с ними вы можете иметь специальные макеты для Outlook или использовать веб-шрифты в клиентах Webkit. Ознакомьтесь с этим простым шаблоном электронной почты с открытым исходным кодом, чтобы начать работу или узнать больше об этих методах для кодирования более продвинутых шаблонов электронной почты HTML.

Действительно ли мне нужно использовать таблицы и встроенный CSS в 2018 году?

Это зависит. Если вы хотите играть в нее безопасно и убедитесь, что ваши письма пуленепробиваемы, то да.

Если у вас есть хорошее представление о ваших получателях, и вы знаете, что они используют почтовые клиенты, которые поддерживают встроенный CSS и модель коробки, то, возможно, нет. Вы можете определенно рискнуть, и это может быть не проблема. Я лично придерживаюсь старых привычек и использую таблицы и встроенный CSS, но многие другие начинают экспериментировать с опцией «no inline».

Изображения, GIF, видео и мультимедиа

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

Вы хотите обеспечить высокое качество изображения для экранов сетчатки (например, iPhone), поэтому ваши изображения должны быть по крайней мере 2 x размеры, вы хотите, чтобы отобразить их в. Имея это в виду всегда дают изображение атрибут ширины, чтобы остановить его переполняя на некоторых клиентов.

Анимированные GIF поддерживаются в большинстве клиентов. Видео поддерживается на iOS, Apple Mail и Outlook.com. Вы также можете экспериментировать с emojis в вашей сюжетные линии, чтобы получить 🤯 внимание получателей�

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.