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

Основные нюансы при формировании таких писем:

• Все стили должны встраиваться (inline) в виде атрибута style для конкретного HTML-элемента.
• Все изображения должны встраиваться, либо как отдельные вложения в в письме, либо в виде base64-кодированных данных (второе банально удобнее).
• Письмо должно поддерживать DKIM (настройка мэйлера), а домен отправителя - содержать SPF -запись.

Ранее я использовал для формирования HTML-писем проект Premailer , созданный на Ruby. Пришлось даже заняться поддержкой проекта (сейчас времени на это нет, мэйнтейнеры приветствуются).

Сейчас же хотелось избежать внедрения Ruby, в то время, как Node проник везде.

Juice

К счастью, современная экосистема Node предоставляет богатые возможности по формированию электронных писем. Мы выбрали цепочку по формированию электронной почты в виде pug -шаблонов, преобразованию оных с помощью juice и подстановки конкретных данных на бэкэнде (у нас это Perl).

Предполагается, что Вы используете node 6+ , babel (es2015, es2016, es2017, stage-0 presets).

Установка

npm install gulp-cli -g npm install gulp --save-dev npm install del --save-dev npm install gulp-rename --save-dev npm install gulp-pug --save-dev npm install premailer-gulp-juice --save-dev npm install gulp-postcss --save-dev npm install autoprefixer --save-dev npm install gulp-less --save-dev

gulpfile.babel.js:

"use strict"; import gulp from "gulp"; import mail from "./builder/tasks/mail"; gulp.task("mail", mail);

builder/tasks/mail.js:

"use strict"; import gulp from "gulp"; import stylesheets from "./mail/stylesheets"; import templates from "./mail/templates"; import clean from "./mail/clean"; const mail = gulp.series(clean, stylesheets, templates); export default mail;

builder/tasks/mail/stylesheets.js

"use strict"; import gulp from "gulp"; import config from "config"; import rename from "gulp-rename"; import postcss from "gulp-postcss"; import autoprefixer from "autoprefixer"; import less from "gulp-less"; const stylesheetsPath = config.get("srcPath") + "/mail/stylesheets"; const stylesheetsGlob = stylesheetsPath + "/**/*.less"; const mailStylesheets = () => { return gulp.src(stylesheetsGlob) .pipe(less()) .pipe(postcss([ autoprefixer({browsers: ["last 2 versions"]}), ])) .pipe(gulp.dest(stylesheetsPath)); }; export default mailStylesheets;

builder/tasks/mail/templates.js:

"use strict"; import gulp from "gulp"; import config from "config"; import pug from "gulp-pug"; import rename from "gulp-rename"; import juice from "premailer-gulp-juice"; const templatesPath = config.get("srcPath") + "/mail"; const mailPath = config.get("mailPath"); const templatesGlob = templatesPath + "/**/*.pug"; const mailTemplates = () => { return gulp.src(templatesGlob) .pipe(rename(path => { path.extname = ".html"; })) .pipe(pug({ client: false })) .pipe(juice({ webResources: { relativeTo: templatesPath, images: 100, strict: true } })) .pipe(gulp.dest(mailPath)); }; export default mailTemplates;

builder/tasks/mail/clean.js:

"use strict"; import del from "del"; import gutil from "gulp-util"; const clean = done => { return del([ "mail/*.html", "src/mail/stylesheets/*.css" ]).then(() => { gutil.log(gutil.colors.green("Delete src/mail/stylesheets/*.css and mail/*.html")); done(); }); }; export default clean;

Типичный шаблон выглядит так (generic.pug):

include base.pug +base tr(height="74") td.b-mail__table-row--heading(align="left", valign="top") Привет, tr td(align="left", valign="top") | <%== $html %>

Где base.pug:

mixin base(icon, alreadyEncoded) doctype html head meta(charset="utf8") link(rel="stylesheet", href="/stylesheets/mail.css") body table(width="100%", border="0", cellspacing="0", cellpadding="0") tbody tr td.b-mail(align="center", valign="top", bgcolor="#ffffff") br br table(width="750", border="0", cellspacing="0", cellpadding="0") tbody.b-mail__table tr.b-mail__table-row(height="89") tr.b-mail__table-row td(align="left", valign="top", width="70") img(src="/images/logo.jpg") td(align="left", valign="top") table(width="480", border="0", cellspacing="0", cellpadding="0") tbody if block block td(align="right", valign="top") if alreadyEncoded img.fixed(src!=icon, data-inline-ignore) else if icon img.fixed(src!=icon) br br tr td(align="center", valign="top")

Собственно, болванка готова, шаблоны компилируются. Формирование модуля config тривиально и необязательно.

gulp mail

ViewAction и т.п.

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

div(itemscope, itemtype="http://schema.org/EmailMessage") div(itemprop="action", itemscope, itemtype="http://schema.org/ViewAction") link(itemprop="url", href="https://github.com/imlucas/gulp-juice/pull/9") meta(itemprop="name", content="View Pull Request") meta(itemprop="description", content="View this Pull Request on GitHub")

Подробнее можно прочесть в разделе Email Markup .

Ну и немного интеграции с (выберите свой язык, тут нужен был Perl)

sub prepare_mail_params { my %params = %{ shift() }; my @keys = keys %params; # Camelize params for my $param (@keys) { my $new_param = $param; $new_param =~ s/^(\w)/\U$1\E/; next if $new_param eq $param; $params{$new_param} = delete $params{$param}; } %params = (Type => "multipart/mixed; charset=UTF-8", From => "[email protected]", Subject => "", %params,); # Mime params for my $param (keys %params) { $params{$param} = encode("MIME-Header", $params{$param}); } return \%params; } sub _template_processor { state $instance = Mojo::Template->new(vars => 1, auto_escape => 1,); return $instance; } sub send_mail { my %params = %{ shift() }; my $html = (delete $params{message}) // ""; my $template = delete $params{template}; my $stash = (delete $params{stash}) // {}; unless ($template) { $template = "generic"; $stash->{html} = $html; } $html = _template_processor()->render_file(Config->directories->{mail}. "/$template.html", $stash,); $html = encode_utf8($html); my $msg = MIME::Lite->new(%{ prepare_mail_params(\%params) }); $msg->attach(Type => "HTML", Data => $html,); if ($mail_settings->{method} eq "sendmail") { return $msg->send(); } if ($mail_settings->{method} eq "smtp") { return $msg->send("smtp", $mail_settings->{host}, Timeout => $mail_settings->{timeout}); } croak "Unknown Config mail.method: ". $mail_settings->{method}; }

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

Специальной программой для отправки писем в коде html являются почтовые клиенты. Рассмотрим один из них — Mozilla Thunderbird . Рассмотрим процесс отправки писем с картинками и прочим более подробно.

Почтовый клиент Mozilla Thunderbird

Сначала нужно скачать эту программу. Для этого переходим на официальный сайт почтового клиента от Мозиллы: http://mozilla-russia.org/products/thunderbird/ . В открывшемся окне, слева, выбираем программу на русском языке для вашей операционной системы компьютера:

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

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

Затем появляется окно, где можно открыть почтовый ящик у предложенного сервиса, но можно просто пропустить этот пункт, нажав «Пропустить это и использовать мою существующую почту» . Затем, нужно указать Имя , адрес и пароль на существующем почтовом ящике:

После этого, нажимаем «Продолжить» — происходит автоматическое определение почтового сервера, и после нажатия на кнопку «Готово» , мы переходим снова к начальному окну. Тем самым мы установили и настроили почтовый клиент для работы с электронной почтой (использовалась ) посредством которого мы будем отправлять шаблоны html писем.

Отправляем html письмо

Снова открываем клиент Mozilla Thunderbird , если вы уже успели его закрыть, и нажимаем на пункт верхнего меню «Создать» :

Открывается форма по созданию электронного письма. Заполняем данные: «Кому» и «Тема» :

Имейте ввиду, если вы хотите указать несколько получателей, нужно щёлкнуть мышкой чуть ниже пункта «Кому» — для этого там предусмотрены несколько полей получателей. Данные заполнили, переходим к шаблонам.

Пусть мы будем отправлять шаблон письма, предложенный в предыдущей статье (первый в списке). Открываем его в редакторе (файл shablon1.html) и выполняем небольшое не сложное действие, а именно — указываем корректные полные адреса изображений:

Как правильно указать ссылку на картинку в html-шаблоне электронного письма

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

Обратите внимание, что слэши в компьютере и для браузера разные. Кроме того, перед букой диска с расположение нужного файла, добавляется «file:///» .

Вставка шаблона в тело письма в почтовом клиенте Mozilla Thunderbird

Итак, мы заполнили адреса получателей нашего письма, указали тему, подправили ссылки. Теперь, нажимаем на пункт верхнего меню в окне создания электронного письма нашего почтового клиента «Вставить» — «HTML» .

Любой инфобизнесмен при создании серии писем для e-mail рассылки сталкивается с вопросом: «Какие инструменты необходимо использовать для создания рассылки?». Именно в этот момент Вы сталкиваетесь с понятием «верстка писем».

Верстка – это создание структуры html кода, который размещает в себе элементы веб-страницы (текст, фон, гиперссылки и т.д.) в браузере согласно разработанному дизайну макета. В конечном итоге подписчик должен увидеть письмо с качественным контентом. Именно от того, насколько качественно сделана верстка, зависит мнение подписчика о рассылке и о Вас

Пример того, как выглядит верстка, приведен ниже:

ВЕРСТКА ПИСЕМ ИЛИ САЙТА: ЧТО ЛЕГЧЕ

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

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

БАЗОВЫЕ ПРАВИЛА ВЕРСТКИ ПИСЕМ

ПРАВИЛО 1 – ИСПОЛЬЗОВАНИЕ ТАБЛИЧНОЙ ВЕРСТКИ

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

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

ПРАВИЛО 2 - ВЫБОР ШАБЛОНА

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

Шаблон в 1 колонку состоит из:

1. Заголовка (логотип компании, ссылки на подписную страницу)
2. Содержания, при нажатии на каждый пункт которого идет переход на текст в письме
3. Нижней части письма (футер, подвал) со ссылками на какие-то материалы и кнопку Отписки.

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

Эти шаблоны кодируются с помощью HTML таблиц.

Рассмотрим на примере создание двухколоночной html вестки: всего необходимо создать 3 таблицы: для заголовка, подвала и для центральной части, состоящей из основной информации. Подходит лучше всего для письма с картинками, разбитыми по разным ячейкам.

Также в шаблоне используйте универсальные атрибуты html-тегов

ПРАВИЛО 3 – ИСПОЛЬЗОВАНИЕ ОТСТУПОВ

Для создания горизонтального отступа в пустую ячейку необходимо вставить тег &bsp. Это универсальный тег, который подойдет для всех почтовых агентов. Создайте вложенную таблицу меньших размеров, если хотите задать отступ слева и справа.

Вертикальный отступ задается так:

ПРАВИЛО 4 – ТЕКСТ+ССЫЛКИ: ПРАВИЛА СОЗДАНИЯ

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

Тег span применяется при создании текста. line-height применяется для блока или родительской ячейки. Как я уже писала выше, при верстке применяйте только стандартные шрифты.

Если Вы учли все правила, то отображаемый текст должен получиться следующим образом:

Чтобы не возникло сложностей с открытием страницы в этом же окне, указывайте атрибут target=”_blank”.

Чтобы предлог не переносился на другую строку и был на одной строке вместе со словом используйте, при переносе слова применяйте символ -

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

1. Сделать, чтобы мобильный номер не распознавался как номер телефона
2. Использовать мобильный телефон как ссылку

ПРАВИЛО 5 – ФОН И КАРТИНКИ

Картинки играют большую роль в письме. Они задают атмосферу и делают письмо более аккуратным. Но только часть почтовых агентов загружают картинки по умолчанию. Чтобы картинка загружалась корректно, применяйте атрибут alt. А также всегда задавайте значение ширины и высоты картинок.

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

Например, для того, чтобы фоновая картинка показывалась в outlook применяйте следующее:

На этом сайте http://tools.emailmatrix.ru можно сгенерировать нужную структуру.

ПРАВИЛО 6 – ИСПОЛЬЗОВАНИЕ ВИДЕО

Не все почтовые службы поддерживают видео при загрузке. Только лишь немногие, такие как iOS, Outlook, Apple mail. Вы можете использовать медиа-запросы, чтобы скрывать видео, в зависимости от типа клиента.

ПРАВИЛО 7 – АДАПТИВНАЯ ВЕРСТКА

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

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

Адаптивные письма корректно отображаются на любом устройстве, что делает подписчика более лояльным. Единственный минус то, что на адаптивную верстку требуется больше времени.

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

1. Резиновая версткa
2. Мобильная версткa
3. Медиа-запросы

Мобильная верстка используется только, если количество подписчиков, просматривающих письма с мобильных устройств более 75%. Мобильная верстка отличается от обычной только шириной шаблона и составляет 320рх, на мобильных устройствах смотрится идеально, но вот на компьютерах очень странно.

Резиновая верстка - в данном виде верстки используются отдельные блоки размеры всех блоков и картинок (в % соотношении). Используется очень редко в чистом виде.

Медиа-запросы - используются медиазапросы CSS и подстраиваются под отображение письма идеального формата на любом из устройств. Но адаптироваться такие письма будут только в устройствах, которые поддерживают медиазапросы – это mail, gmail и почта android. В остальных клиентах типа yahoo подписчики увидят простое (не адаптивное) письмо.

ПОЛЕЗНЫЕ РЕСУРСЫ ДЛЯ ВЕРСТКИ ПИСЕМ

Если Вы не являетесь профессионалом в верстке, то рекомендую Вам воспользоваться готовыми шаблонами, например:

1. - сервис с готовыми шаблонами для писем
2. https://www.campaignmonitor.com/email-templates/ - сервис также позволяет получить очень красивые шаблоны писем

Возможно Вы уже задавались данным вопросом и не смогли найти четкого ответа. Постараюсь Вас не разочаровать и дать понятные для переваривания инструкции отправки HTML писем через почту Mail.ru .

Mail регистрация почтового ящика

Заведение почтового ящика на Майл, я описываю исключительно как вспомогательную часть для статьи " ". О HTML письмах читайте после этого пункта.

3. Заполняем необходимые данные

4. После, Вам предлагают загрузить фотографию и создать подписку (подписка отображается в конце каждого отправленного сообщения).

Мы закончили создание почтового ящика

Как отправить HTML письмо

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

Отправка видео

Для отправки видео-письма, нам необходим YouTube и желательно Google Chrome, скачать можно .

1. Заходим на свой Mail.ru и жмем

2. Находим любое видео на YouTube и жмем по нему правой кнопкой мыши, далее "Копировать HTML-код"

За картинкой
Ваш бонус!
Разверни ее!
Жми сюда!

3. На Mail.ru, жмем на поле под текст правой кнопкой мыши и далее "Просмотр кода элемента"

4. Браузер выдает нам следующее окно

5. По выделенной области в окне HTML, жмем правой кнопкой мыши и далее "Edit as HTML"

6. Должно появится следующее окно. Окно редактирования

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

8. После того, как вставили код, кликаем в любую пустую область на сайте Mail.ru и видео должно отобразится в сообщении.

9. Размер видео слишком большой, чтобы его изменить, проделываем все тоже самое до 6 пункта и меняем его размеры. width="854" - это ширина, а height="480" - это высота. Меняем только цифры, как только поменяли, также жмем в любую пустую область сайта Майл .

Вот такой простой способ добавления HTML в письма . Тоже самое можно проделать с баннерами и многим другим.

Надеюсь, статья оказалась Вам полезной.

Желаю успехов!

2.1K

В этой статье приводится пошаговое руководство по созданию динамического шаблона электронного письма с помощью HTML и PHP .

Основные принципы

Самая большая проблема при разработке HTML шаблона письма – это обеспечение его совместимости с разными платформами. Существует множество различных почтовых клиентов, например, Google Mail , Apple Mail , Outlook , AOL , Thunderbird , Yahoo! , Hotmail , Lotus Notes . Некоторые из них уже давно не у дел. Особенно это касается поддержки CSS , поэтому нам нужно использовать HTML таблицы , чтобы обеспечить корректное отображение писем. Фактически, использование HTML таблиц является единственным способом создать макет, который будет одинаково отображаться в разных почтовых клиентах.

Также нужно использовать встроенный CSS для управления элементами внутри шаблона. Например, цветом фона и шрифтами. Объявление стилей CSS должно быть простым, без использования каких-либо CSS файлов .

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border , чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:

Весь макет построен на основе HTML таблиц . Мы воспользуемся PHP библиотеками для анализа маркера %s и его заполнения динамическим текстом перед отправкой письма.

Разработка статического шаблона

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма , нужно начать HTML файл с XHTML документа :

My first email template!

Установите cellpadding и cellspacing в ноль , чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма (стилизация тега body полностью не поддерживается ).

Теперь мы добавим вместо текста «My first email template! » («Мой первый шаблон электронного письма! ») другую таблицу:

This is the email template body

Для ширины задано значение 600 пикселей. Это безопасно максимальная ширина электронных писем для корректного отображения в большинстве почтовых клиентов. Дополнительно, установите для свойства border-collapse значение collapse , чтобы избежать вывода лишнего пространства между таблицами и границами.

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

Row 1

Row 2

Row 3

Row 4

Row 5

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

%s GIVE US A CALL EMAIL US BROWSE FAQ PAGE

Несколько замечаний перед тем, как сделать шаблон HTML письма :

1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

Мы успешно разработали статический шаблон электронного письма. Теперь давайте сделаем его динамическим!

Разработка динамического шаблона

Сохраните приведенный выше код в виде файла template.html . Теперь создадим новый PHP файл .

На серверной стороне зададим метод отправки HTML шаблона письма , описанный ниже:

function send_mail_template($to, $from, $subject, $message) { $headers = "MIME-Version: 1.0" . "rn"; $headers .= "Content-type:text/html;charset=UTF-8" . "rn"; $headers .= "From: ContactNameGoesHere <" . $from . ">rn"; $response = mail($to, $subject, $message, $headers); }

Если внимательно посмотреть на HTML шаблон письма , то можно увидеть, что я добавил маркеры %s для заполнения в определенных местах. Конкретнее, в элемент изображения баннера и основной текст. Сейчас все, что нам нужно сделать, это импортировать описанный выше HTML шаблон , разобрать его как обычный текст, добавить соответствующий текст вместо %s и воспользоваться упомянутым выше методом send_mail_template :

function build_email_template($email_subject_image, $message) { // Получаем шаблон письма в виде строки $email_template_string = file_get_contents("template.html", true); // Заполняем шаблон письма содержанием и соответствующим изображением баннера $email_template = sprintf($email_template_string,"URL_to_Banner_Images/banner_" . $email_subject_image. ".png", $message, $mobile_plugin_string); return $email_template; }

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML . Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verified («Ваша электронная почта успешно подтверждена »).

Предположим, что у нас есть подтвержденная почта пользователя [email protected] и почта компании [email protected] . Теперь можно отправить автоматическое письмо:

$from = "[email protected]"; $to = "[email protected]"; $body_text = "Your email has been successfully verified..."; $banner_image_subject = "account_verified"; $final_message = build_email_template($banner_image_subject, $body_text); send_email($to, $from, "You email has been verified", $final_message);

Все! Вы можете использовать этот подход. Вот окончательный HTML шаблон email письма , отправленного пользователю:

Данная публикация представляет собой перевод статьи «How to create a dynamic HTML Email Template » , подготовленной дружной командой проекта