Від автора: у новачків в email розробці виникають три головні проблеми, з якими ви, швидше за все, вже зіткнулися: в email шаблонах майже завжди банятся зовнішні ресурси, вся розмітка побудована на таблицях, а також необхідний інлайн CSS. У цій статті ми поговоримо про останньому пункті і дізнаємося, чому і як це зробити.

Ви вже знаєте, що необхідність инлайнить CSS змінилася з тих пір, як Gmail почав підтримувати тег style. Тим не менш, ця техніка все ще широко застосовується в регіональних програмах електронної пошти і деяких нативних додатках пошти для старих пристроїв на android, а також в старих програмах Gmail. Инлайнинг відмінно підходить для складних макетів. Инлайнинг може послужити основою для техніки прогресивного поліпшення.

Вирішивши, що це важливо, давайте поговоримо про доступні онлайн інструментах та інструменти командного рядка.

Нижче ми обговоримо різні інструменти, дізнаємося про їх плюси, а також мінуси. Завдання – щоб після прочитання статті ви могли легко використовувати їх і помічати в них недоліки.

Загальні моменти при инлайнинге CSS

Инлайнинг – широко застосовуваний метод конвертації вставляються і зовнішніх CSS стилів більше надійний email код. Процес схожий з останнім Email в щорічній колекції на сайті Acid. Відмінний спосіб підтримувати старі та менш розвинені email клієнти.

Досі тривають суперечки з приводу відмови від інлайн стилів в майбутньому – можна укласти, що всі до цих пір залежить від email клієнтів кінцевих користувачів.

Візьмемо шаблон з попереднього уроку з використання препроцесора Sass в email розробці. Порівняємо вставлені стилі…

І інлайн…

Версії одного і того ж шаблону. Скріншоти зняті з T-Online.de, що ясно показує, якщо цей клієнт важливий для вас, вам потрібно використовувати інлайн стилі для його підтримки. Outlooks на основі Word та різні версії Lotus Notes також ліпше працюють з інлайн стилями.

Безліч email розробників инлайнит CSS вручну, але відразу зрозуміло, що такий підхід займає багато часу, і можуть виникати помилки. Тут можуть сильно прислужитися CSS инлайнеры. Але існує ідеальний інструмент для цього?

Це вам потрібно вирішити для себе самому. У різних інструментів свою сильні і слабкі сторони. Ваше завдання і кінцевий результат визначать правильну відповідь.

Зі статті Julie Ng візьмемо попередні умови для CSS инлайнеров:

Запам’ятайте ці умови. Перейдемо до докладного розбору.

Початок роботи з инлайнерами CSS

Якщо пошукати в мережі інлайн інструменти, можна знайти 4 інші варіанти ручного инлайнинга:

Далі розглянемо приклади описаних вище варіантів.

CSS инлайнеры через командний рядок

Почнемо з найпростішого інструменту, але ви побачите, що він прекрасно справляється зі своїм завданням. Інструмент називається Inlining. Доступний на Github і NodeJS package manager.

Інлайн стилі повинні бути в окремому CSS файлі. При инлайнинге CSS ми застосуємо наступні стилі:

body, p {
margin: 0;
padding: 0;
margin-bottom: 0;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none; }
table {
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt; }
table td {
border-collapse: collapse; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.ReadMsgBody {
width: 100%; }
img {
-ms-interpolation-mode: bicubic; }
p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Arial; }
/* default font sizes */
h1 {
font-size: 28px;
line-height: 32px;
padding-top: 10px;
padding-bottom: 24px; }
…
Additional heading and styles paragraph
…
.container {
width: 600px; }
.hero {
background-color: #71b47b;
color: black; }
.hero .alternate-background {
background-color: #b471aa; }
.hero .col33 {
width: 33%; }
.hero .col67 {
width: 67%; }
.hero .col50 {
width: 50%; }
@media only screen and (max-width: 599px) {
.container, .col33, .col67, .col50 {
width: 100% !important; } }
.button, .button-primary, .button-secondary {
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
-webkit-text-size-adjust: none;
border: 1px solid #1e3650;
border-radius: 4px;
background-color: #ccdd22;
color: #ffffff;
width: 200px;
line-height: 40px; }
.button-primary {
background-color: #ffbbcc;
color: #ffffff;
width: 250px;
line-height: 50px; }
.button-secondary {
background-color: #7733cc;
color: #ffffff;
width: 150px;
line-height: 30px; }

Екосистему NodeJS, а також як встановлювати NPM пакети ми представили у попередньому уроці. Швидко згадаймо попередню статтю. Слідуючи кроків установки:

npm install -g inlining

ви повинні легко встановити Inlining.

Якщо у вас виникли проблеми, які ви не можете вирішити самі, пишіть про це в коментарях, ми допоможемо.

Після глобальної установки за допомогою наступної команди inlining input.html >output.html можна инлайнить стилі. Результат обробки input.html буде поміщена в файл output.html. Використовуючи тестовий шаблон, ми отримаємо HTML нижче:

One column layout
/* default font sizes */
@media only screen and (max-width: 599px) {
.container, .col33, .col67, .col50 {
width: 100% !important; } }

Email coding is the best …. Show me a button! 2017 @ COPYRIGHT – EDMDESIGNER

Варто пояснити пару моментів по цьому інструменту:

Вивчивши превью Litmus, можна зробити висновок, що правильний рідкий макет застосовується в більшості мобільних email клієнтів, а десктоп подання відображається на десктопі і webmail клієнтів. В інструменті немає кастомізації процесу инлайнинга, але мені і так подобається результат. Мені не сподобалося два моменти: 1 – інструмент вміє инлайнить CSS тільки з зовнішніх стилів, 2 – він використовує табуляцію, що ускладнює зміну инлайнинга. В цілому, я рекомендую цей інструмент.

Настройка інструменту автоматизації

Коли я захотів протестувати різні інструменти за инлайнингу, я дізнався, що є тільки один ефективний спосіб – зібрати їх і запустити через скрипт. Працювати буде будь-яке рішення, але для спрощення нашої роботи є спеціальні інструменти, таск раннеры. Так мені треба буде правити тільки HTML, CSS і налаштування инлайнеров CSS, інші частини процедури зроблять за мене.

Таск раннеры – інструменти автоматизації щоденних завдань. Зазвичай налаштування заснована на файлі конфігурацій певного таск раннери, де зберігаються всі завдання, які необхідно виконати за простою команді.

Ми виберемо Gulp – часто використовуваний, швидкий JS таск раннер. З простої стандартної команді ми створимо всі команди запуску різних CSS инлайнеров. Установка така ж, як у розділі про Inlining.

Детально автоматизацію завдань ми розглянемо в наступній статті по створенню автоматизованого фреймворку по створенню email. Все ж, вас треба познайомити з популярним JS таск раннери чисто для цієї статті. Поїхали!

Рекомендовані налаштування проекту можете завантажити з Github, але я все ж швидко розповім, як все працює. Якщо у вас виникли пропозиції по поліпшенню, пишіть в коментарях.

У нашому проекті у нас будуть:

Все разом виглядає так:

inliner-tasks/
|_ node_modules/
|
|_ results/
| |
| |_
|
|
|_ input.html
|
|_ gulpfile.js
|
|_ package.json

Перейдемо в терміналі в робочу папку і встановимо все, що будемо використовувати:

Потрібно виконати команду npm install —save gulp-premailer gulp-juice gulp-email-builder.

Після виконання переходимо до заповнення gulpfile. Для економії місця я показую завдання для одного инлайнера.

// REQUIRING NECESSARY PACKAGES
var gulp = require(‘gulp’);
// this package let’s us run command-line
// commands from the Gulp JavaScript file
var run = require(“gulp-run-command).default;
var rename = require(“gulp-rename”);
// INLINER PACKAGES
// ========================================
var gulpPremailer = require(“gulp-premailer”);
var gulpJuice = require(“premailer-gulp-juice);
var emailBuilder = require(‘gulp-email-builder’);
// FILE PATHS
// ========================================
var input = “input.html”;
var output = “results/”;
// INLINER TASKS
// ========================================
// Premailer
var premailerRunFile = “premailer/pre.rb”
var rubyCommand = “ruby “;
var premailer = rubyCommand + premailerRunFile;
// Gulp-premailer
gulp.task(“gPremailer”, function () {
gulp.src(input)
.pipe(gulpPremailer())
.pipe(rename(“gpremailer.html”))
.pipe(gulp.dest(output));
});
var gPremailer = “gulp gPremailer”;
// DEFAULT TASK
// ========================================
gulp.task(“default”, run([
gPremailer
]));

Контент вище, який робить валідний gulfile.js, запускається через команду gulp:

Перевіримо, запустимо команду gulp default терміналі!

Це була налаштування нашого проекту. Сподіваюся, зрозуміло. У наступних розділах я покажу, ніж інлайн версії відрізняються для одного і того ж шаблону, а також розберу деякі настройки для всіх інструментів. Я відзначу ключові відмінності та особливості реалізації, які необхідно врахувати, якщо ви збираєтеся використовувати инлайнеры.

Плагіни Gulp CSS Inliner

Як в попередньому кроці, ми запускаємо нашу задачу default, а в папці results/ вже з’явилися всі файли. Для порівняння файлів я знайшов цей онлайн інструмент, в якому можна візуально інспектувати відмінності між двома документами. Перш ніж перейдемо до деталей, ви, можливо, хочете перевірити робочі файли проекту.

Premailer-Gulp-Juice

В цьому розділі нашої посиланням буде пакет premailer-gulp-juice, він зберігає медіа запити head і инлайнит CSS класів. Вивчивши превью, можна побачити, що вони майже ідентичні з превью Inlining. Juice додає один несподіваний фікс: він завершує теги td атрибутом align=»left».

Примітка: за замовчуванням Juice пакет кодує зображення в Base64, що видно тільки в пакеті-обгортці Gulp.

Gulp-Email-Builder

Пакет Gulp-Email-Builder дає багато чого, не тільки інлайн стилі: у ньому також є інструменти відправки email і запуску Litmus прямо з файлу сценарію. Але ці функції не входять в тему уроку, тому просто узагальнимо опції по кастомізації і відмінності від пакета Juice.

На що варто звернути увагу при виборі цього инлайнера:

Litmus превью на цьому інструменті можна подивитися за посиланням.

Gulp-Premailer

Gulp-Premailer дуже схожий на попередній Gulp-Email-Builder. Однак відмінність у тому, що він инлайнит властивості width з CSS оголошень, а також вставляє медіа запити і оголошення класів ExternalClass. Premailer також пропонує API через NPM. Є можливість налаштувати скрипт так, щоб він посилав HTML і CSS в API, а ви отримували інлайн email HTML. У них також є онлайн інструмент, можете спробувати.

Litmus превью на цьому інструменті можна подивитися за посиланням.

Онлайн CSS инлайнеры

Наведені нижче інструменти здатні по-розумному брати вставлені стилі з head HTML документа і застосовувати їх до тегу body у відповідні HTML елементи, як інлайн стилі. Ми розберемо, чим вони відрізняються. Інструменти не завжди працюють так, як треба. Якщо не дотримуватись правил безпеки, можна отримати небажані зміни в проекті. Розглянемо їх нижче.

Я протестував 4 онлайн инлайнера від шанованих компаній в email маркетинг індустрії. Я використовував сервіси Litmus (Putsmail), Mailchimp, Zurb і Campaing Monitor.

HTML результати після CSS инлайнинга можна знайти в робочих файлах. (https://github.com/EDMdesigner/html-email-development-tools/tree/master/lesson-08/online-tool-tests)

Ці інструменти мають схожості, але що ще важливіше, в них схожі відмінності. Я розповім і поясню, яке небажану поведінку я виявив. Узагальню це нижче:

Використання зовнішніх стилів:

Інструменти Putsmail від Litmus і від Zurb не обробляють зовнішні стилі. Інструменти просто не вміють робити цього, тому инлайнинг взагалі не виконується. HTML обробляється, і до документа застосовуються запропоновані зміни. Якщо вам потрібні зовнішні стилі, краще виберіть онлайн інструменти Mailchimp і Campaign Monitor. Вони инлайнят зовнішні стилі, а також в Mailchimp тег link включений, а Campaign Monitor додає весь CSS в тег style. Тобто дублюються всі стилі. Але так зберігаються медіа запити, що зберігає зовнішній вигляд макета.

Використання вставляються стилів:

Останнє, але не менш важливе. Варто відзначити окремі характеристики інструментів:

Висновок

Ми почали обговорення з важливості CSS инлайнинга email для розробників і показали, що в майбутньому це може бути вже необов’язково. Однак инлайнинг все ж потрібен, коли email клієнт вимагає цього.

Ми переглянули широкий спектр доступних варіантів завдання: онлайн інструменти, інструменти командного рядка, API і плагіни таск раннеры. Ми почали розмову про автоматизації і дізналися, як автоматизацію можна використовувати в інлайн процесі. Протестували всім відомі варіанти з допомогою таск раннери Gulp і розглянули різні налаштування і додаткові функції, доступні в цих CSS инлайнерах.

У другій частині статті ми розібрали висновок онлайн CSS инлайнеров, а також побачили парочку цікавих особливостей в цих інструментах. Найважливіше, що ми зрозуміли – ці інструменти можуть поламати макет, якщо він заснований на складних техніках із застосуванням інлайн стилів і тега style з медіа запитами.

Щоб ще вас спантеличити, скажу, що є інші техніки, обходящие ці обмеження. Використовуючи метод абстрактного опису, ви контролюєте найбільш важливі оголошення в макеті. Якщо ви зовсім не розумієте, що це, не турбуйтеся. Ми розповімо про це в наступній статті. Ми поговоримо про мови створення шаблонів і шаблонних рядках ES2015. Спасибі, що приєдналися! Побачимося.