Email.html

Email.html — что, как и зачем?

Email marketing

Transactional emails

Продвижение и конверсия

Реакции и сценарии

Email.html — Кому оно надо?

E-commerce

Онлайн-издания

Электронные документы

Блоги, рассылки

Кто угодно

Боль и страдания

Боль и страдания —  приложения

Веб-клиенты

Смартфоны

Десктоп

Браузеры и сервисы

Веб-клиенты + android, iOS, Windows Phone (Outlook)

Windows, Linux, Mac OS

Боль и страдания — препроцессинг

POP, IMAP

Exchange, Domino

Preprocessor

pure html

Email client / service

RENDER ENGINE

processed html

FRONTEND

Email server

Local

Web-based

Боль и страдания — рендер

Trident (IE, Outlook)

Gecko (Firefox, thunderbird)

WebKit (Apple Mail, Web-based)

NotesRichText

Microsoft Word (Outlook 2007)

Боль и страдания — что читать?

CSS support guide to email clients

Email Client CSS Support

CampaignMonitor

MailChimp

Gmail markup reference

Google

Word 2007 HTML and CSS Rendering

Microsoft

Как верстать?

Как верстать? —  Основные правила

Ширина 600 px.

Таблицы в таблицах в таблицах в таблицах...

Инлайновый CSS и атрибуты

!important

Шрифт от 14px

Как верстать? —  Что нельзя

Javascript низя

Анимации низя

Шрифты низя

<link href="style.css" /> низя

SVG низя

Как верстать? —  Что можно

Адаптив

Сетки

Видео

Как верстать? —  PE & GD

Progressive

enhancement

Graceful

degradation

Как верстать? —  Условные комментарии

<!--[if gte mso 9]>

  <style>
    #outlook a {padding: 0; }
  </style>

<![endif]-->

Как верстать — outlook specific css

mso-line-height-rule: exactly;

Сдвиг относительно базовой линии

-ms-interpolation-mode: bicubic;

Отключает обнуление line-height

Фикс ресайза изображений

mso-table-lspace: 0px;

style attributes used by Microsoft Office 2000

Как верстать — client specific css

.ExternalClass

Фиксирует минимальный размер шрифта в iOS

#outlook a

Приписывается к каждому стилю в Outlook

Определяет стили ссылки "посмотреть в браузере" (2007 / 10 / 13)

-webkit-text-size-adjust: 100%;

Аккуратный ресайз изображений

-ms-interpolation-mode: bicubic;

Как верстать — сетки и адаптив

TD

TD

TD

Table

TR

table td.col-3 { width: 200px;  /* 600 / 3 */ }

Есть два вьюпорта

Как верстать — сетки и адаптив

TD

Table

TR

TD

@media (max-width: 480px) {

 

    table td.col-3 {

        ...

        display: block !important;

        width: 100% !important;

        ...

    }

 

}

Email.html — Отступы

Padding вместо margin

Блочная модель у TD

&nbsp; и line-height

Изображения

Cellpadding

Автоматизируем

Автоматизируем — зачем?

Автоматизируем — Фреймворки

ZURB Emails

MJML

React-html-email

Cerberus

Antwort

Автоматизируем — Фреймворки

Главная задача

Разделение контента и контекста

Автоматизируем — Фреймворки

Черные ящики

XML-разметка (вкусовщина)

Диктуют стили

Привирают

Автоматизируем — NPM

Gulp (сборка и автоматизация)

Gulp-css-inline (инлайновые стили)

Browser-sync (тестирование)

Cheerio (jQuery для Node.js)

PUG (шаблонизатор)

PUG

Pug 2 — почему

Нет XML-разметки

Mixins, extends, includes

JS-friendly

Полноценный шаблонизатор

Pug 2 — mixins

mixin section(options)
  .section&attributes(attributes)
    h1= options.title

    each item in options.items
      +section__item(item)


mixin section__item(item)
  .section__item
    h2= item.title
    ...

Pug 2 — mixins

mixin section(arg1, ...args)
  .section&attributes(attributes)
    h1= options.title

    if block
      block


+section(arg1, arg2, arg3)
  article
    h1 Extendable Mixins

Pug 2 — includes

html
  head
    ...

  body
    include modules/header
    include modules/promo
    include modules/cart
    include modules/review
    include modules/footer

Pug 2 — includes

html
  head
    style
      include styles/main.css
      
  body
    script 
      include module1.js
    
    include images/logo.svg

Pug 2 — js-friendly

mixin user(user)
  - let getAge = () => `${user.age} y.o.`

  
  .greeting= `Hello ${user.name}`
  
  .age= getAge()

  ul.parents
    each parent in user.parents
      li.name= parent.name
      ...

Pug 2 — filters

html
  head
    style
      include:stylus styles/main.styl
      
  body
    script 
      include:babel js/module1.js
    
    article
      include:markdown data/article.md

Pug 2 — Filters

JSTRANSFORMERS

Список трансформеров

Тестирование

Тестирование

Nodemailer и др. библиотеки

Litmus (дорого, неделя триала)

Онлайн-сервисы

Pixel-perfect

Большое плавание

Большое плавание — Сервисы рассылок

MailChimp

SendGrid

CampaignMonitor

Mailgun

Amazon SES

Большое плавание — E-Commerce

Shopify

WooCommerce

Magento

Prestashop

Big cartel

Большое плавание — Интеграция

Синхронизация базы покупателей

Webhook на действия покупателей

Описание сценариев в EDS

Рассылка маркетинговых писем по базе

Транзакции покупателя в магазине

Настройка групп подписок

A / B тестирование

Большое плавание — Автоматизация

Template language

API

Теги

Аналитика

Что почитать

Блоги MailChimp, CampaignMonitor, Litmus

Обзор css свойств в клиентах: MailChimp, CampaignMonitor

Гайд по разработке писем для GMail

Email standards project

Lee Munroe: Building html emails

CSS Tricks: A Guide for SVG Support in Email

Display Issues in Specific Email Clients

Итоги

Верстать письма не страшно