Почти в каждом проекте приходится думать об отправке писем по электронной почте. Основными требованиями при этом являются, помимо надежности доставки, привлекательность и удобство электронных писем.
Основные нюансы при формировании таких писем:
- Все стили должны встраиваться (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-devgulpfile.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 писем через почту 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 в письма . Тоже самое можно проделать с баннерами и многим другим.
Надеюсь, статья оказалась Вам полезной.
Желаю успехов!
|
|
|||||
Но возникает вопрос — как такие письма отправлять? Давайте разбираться. Если вы хотите отправить html письмо, то просто вставить код в тело сообщения в вашем почтовом ящике у вас не получиться — отобразиться сам код без его выполнения. Для полноценной отправки, с возможностью отображения таблиц, ссылок, графики и рисунков, нужно использовать специальную программу.
Специальной программой для отправки писем в коде html являются почтовые клиенты. Рассмотрим один из них — Mozilla Thunderbird
. Рассмотрим процесс отправки писем с картинками и прочим более подробно.
Почтовый клиент Mozilla Thunderbird
Сначала нужно скачать эту программу. Для этого переходим на официальный сайт почтового клиента от Мозиллы: http://mozilla-russia.org/products/thunderbird/ . В открывшемся окне, слева, выбираем программу на русском языке для вашей операционной системы компьютера:
Скачиваем, устанавливаем. После первого запуска нужно настроить клиент для работы с электронной почтой. Первоначально нам предлагается выполнить интеграцию, однако её можно пропустить:
Теперь нужно указать адрес электронной почты, с которой мы будем в дальнейшем отправлять письма. Для этого щёлкаем по специальной ссылке «Электронная почта» :
Затем появляется окно, где можно открыть почтовый ящик у предложенного сервиса, но можно просто пропустить этот пункт, нажав «Пропустить это и использовать мою существующую почту» . Затем, нужно указать Имя , адрес и пароль на существующем почтовом ящике:
После этого, нажимаем «Продолжить» — происходит автоматическое определение почтового сервера, и после нажатия на кнопку «Готово» , мы переходим снова к начальному окну. Тем самым мы установили и настроили почтовый клиент для работы с электронной почтой (использовалась ) посредством которого мы будем отправлять шаблоны html писем.
Отправляем html письмо
Снова открываем клиент Mozilla Thunderbird , если вы уже успели его закрыть, и нажимаем на пункт верхнего меню «Создать» :
Открывается форма по созданию электронного письма. Заполняем данные: «Кому» и «Тема» :
Имейте ввиду, если вы хотите указать несколько получателей, нужно щёлкнуть мышкой чуть ниже пункта «Кому» — для этого там предусмотрены несколько полей получателей. Данные заполнили, переходим к шаблонам.
Пусть мы будем отправлять шаблон письма, предложенный в предыдущей статье (первый в списке). Открываем его в редакторе (файл shablon1.html) и выполняем небольшое не сложное действие, а именно — указываем корректные полные адреса изображений:
Как правильно указать ссылку на картинку в html-шаблоне электронного письма
Итак, полный адрес изображений на компьютере мы получили, теперь его нужно вставить в шаблон. Для этого, открываем шаблон на редактирование и вместо
пишем
.
Обратите внимание, что слэши в компьютере и для браузера разные. Кроме того, перед букой диска с расположение нужного файла, добавляется «file:///» .
Вставка шаблона в тело письма в почтовом клиенте Mozilla Thunderbird
Итак, мы заполнили адреса получателей нашего письма, указали тему, подправили ссылки. Теперь, нажимаем на пункт верхнего меню в окне создания электронного письма нашего почтового клиента «Вставить» — «HTML» .
В этот туториале я вам покажу, как создать простой HTML-шаблон электронного письма, который будет целостно отображаться в любом современном почтовом клиенте и приложении нынешних смартфонов.
Медиа-запросы: только полдела
Было время, когда было вполне достаточно определения типа устройства для создания адапивного шаблона электронного письма, которое одинаково хорошо отображалось бы и в iOS, и в Android почтовых клиентах, оба семейства смартфонов поддерживали CSS свойство @media.
С тех пор количество почтовых приложений для обоих платформ с различным уровнем поддержки методов разработки адаптивных шаблонов достаточно увеличилось.
Наиболее примечательным является последнее обновление приложения Gmail для Android, которое является в два раза более популярней, чем стандартное почтовое Android-приложение (что составялет 11% от общих запусков). Оно никогда не поддерживало media-запросы, и до сих пор не поддерживает, однако сейчас оно масштабирует ваши электронные письма путем сжатия размера внешней таблицы для заполнения всей доступной области отобржения экрана. Этот процесс сложно проконтролировать и, в том случае, если все ваши письма зависят от медиа-запросов для правильного отображения на мобильных устройствах, создается несколько неприятных результатов.
Почему плавающий шаблон "темная лошадка"
Хорошей новостью является то, что вы можете создать дизайн и разработать такой шаблон электронного письма, который хорошо будет смотреться в любом почтовом приложении, включая те, которые не поддреживают медиа-запросов.
Однако, имеется несколько дизайн-компромиссов, которые вы должны применить. Любимое всеми "схлопывание" в одну ленту колоночных макетов не так хорошо работает с этим методом. Если же вы научитесь обходиться без них, вы сможете применять функциональный дизайн, который работает максимально хорошо.
Сегодня мы этим и займемся.
Первый этап
Давайте начнем с создания пустого шаблона.
|