Фреймворки для адаптивних листів: порівняння

Крім численних редакторів листів із перетягуванням, є ще один спосіб спростити й пришвидшити створення листів — фреймворки. Вони оптимізують верстку, але не замінюють її середовищем без коду. Ми вже писали про один із найпопулярніших фреймворків — MJML, а цього разу хочемо розглянути його конкурентів і порівняти їх.

Фреймворки для адаптивних листів із власними тегами і без них: у чому різниця?

Спершу розберімося, що таке фреймворк. Фреймворк — це своєрідний шаблон, готова модель для швидшої розробки. Спираючись на неї, ви пишете власний код. Фреймворки задають структуру, визначають правила й дають потрібний набір інструментів для створення проєкту.

Різниця між фреймворками з власними тегами і без них проста: email-фреймворк із власними тегами — це зазвичай просто спеціалізована мова розмітки. Вона стане в пригоді, якщо ваша команда добре пише код, але не хоче морочитися з HTML/CSS і (або) прагне автоматизувати робочий процес.

Email-фреймворки без власних тегів — це набори готових компонентів без спеціальних тегів, лише чистий HTML/CSS. Це єдина відмінність.

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

Email-фреймворки з власними тегами

1. MJML

MJML — безкоштовний email-фреймворк з відкритим кодом, який допомагає швидше створювати HTML-листи з готових компонентів. У фреймворку є десктопний застосунок і галерея шаблонів, із нього можна надсилати листи напряму, а ще він інтегрований з Outlook, Apple Mail, Gmail, Yahoo Mail та Office 365. І вишенька на торті: MJML має власний редактор листів, де лист редагують у лівій частині екрана, а попередній перегляд бачать у правій.

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

2. Foundation For Emails 2

Можливості Foundation for Emails 2 схожі на ті, що пропонує MJML: власні компоненти, колекція шаблонів листів і змога створювати адаптивні кампанії. Працювати з Foundation for Emails 2 можна двома способами: у версії на CSS або на Sass. Редактора листів у фреймворку немає, тож тут MJML обходить конкурента.

Ми вже порівнювали Foundation for Emails 2 з MJML. Це цілком очевидний крок, адже в цих двох email-фреймворків багато спільного. Ось їхні головні спільні риси:

• колекція власних компонентів для повторного використання;
• галерея адаптивних HTML-шаблонів листів;
• вебінлайнер для CSS.

Foundation for Emails 2 використовує власний шаблонізатор Inky. Загалом він робить те саме, що й шаблонізатор MJML: спрощує роботу зі складними вкладеними таблицями за допомогою скорочених тегів. Ось так виглядатиме ваш код з Inky:

А ось його остаточна форма — чистий HTML:

Тегів тут близько 10: три з них створюють сітку, тег block-grid створює… блокову сітку. Назви тегів menu, title, button і callout говорять самі за себе.

На відміну від MJML, Foundation for Emails 2 створює дві версії листа: для десктопа й для мобільних пристроїв. Ви самі визначаєте, на якій контрольній точці між ними перемикатися, а ще можете вмикати й вимикати окремі блоки в коді тегами .hide-for-large і .show-for-large.

Хоча Foundation for Emails 2, як і MJML, має набір готових шаблонів, власного редактора листів без коду в нього немає, тож переглянути й відредагувати лист тут же не вийде. Можна скористатися іншими рішеннями, наприклад Blocks 😉.

3. HEML

HEML — мова розмітки на основі XML у вигляді NPM-модуля для Node.js. Вона дуже схожа на HTML/CSS, тож вивчати якісь особливі правила не доведеться.

Цей email-фреймворк задуманий так, щоб верстка листів нагадувала веброзробку. Можна створювати власні елементи та правила стилів. HEML, так би мовити, ще й доволі соціальний: своїми напрацюваннями можна ділитися з іншими користувачами й використовувати їхні.

Головні можливості HEML:

• простота: він виглядає й відчувається як HTML, тож мозку не доведеться перебудовувати звичні шаблони мислення й вивчати нову мову;
• вбудовування CSS за замовчуванням (можна вимкнути);
• чистий HTML не заважає мові HEML, обидва можна використовувати одночасно;
• посібник для швидкого старту просто на головній сторінці.

Приклад коду, написаного на HEML

Email-фреймворки без власних тегів

1. Maizzle

Maizzle — email-фреймворк, який замість власних тегів використовує CSS-фреймворк Tailwind і Node.js. Нову мову вчити не треба — лише чистий HTML і службові класи Tailwind. Щоправда, скорочень тут немає.

Maizzle використовує конфігурації середовищ, які дають змогу будувати власні сценарії робочого процесу за допомогою конфігураційних файлів JS. Логіку шаблонів забезпечує PostHTML, тож у вашому розпорядженні частини шаблонів, цикли й віддалений контент.

Ключові можливості Maizzle:

• мова шаблонів Nunjucks від Mozilla;
• підтримка GitHub Flavored Markdown;
• вбудовування стилів у код за допомогою трансформерів;
• стандартний макет налаштований під вимоги AMP.

2. Pine

Pine — адаптивний email-фреймворк для розробників листів. Він орієнтований на чистий код і побудований на HTML5. Найкраще почати знайомство з Pine з його заготовки, де вже є весь потрібний CSS, теги й атрибути:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Ключові можливості Pine:

• обгортки, контейнери й колонки;
• сітка на 12 колонок;
• інтерактивні компоненти (акордеон, таблиця цін, відгуки тощо);
• підтримка фонових зображень в Outlook;
• підтримка зображень для Retina.

3. Acorn

Acorn — полегшена версія Pine. Він теж побудований на HTML5, але використовує сітку на 4 колонки, тоді як Pine — на 12.

Ключові можливості Acorn:

• сітка на 4 колонки;
• адаптивні утиліти, контент та інтерактивні компоненти;
• галерея сучасних системних шрифтів;
• підтримка фонових зображень для Retina в Outlook і Windows Mail.

4. Bojler

Bojler — фреймворк на CSS/Sass. Він побудований на Sass.

Для Bojler потрібні Node.js і NPM. Повну документацію, яка проведе через увесь процес встановлення й налаштування, можна знайти на офіційному сайті.

Ключові можливості Bojler:

• вбудований інлайнер;
• автоматичне перетворення Sass на CSS, вбудовування CSS і перевірка Sass лінтером;
• типографіка, система сіток, службові класи та готові компоненти;
• вебсервер з живим перезавантаженням.

Поштові клієнти й пристрої, які підтримує Bojler

Інші інструменти, що спрощують створення HTML

Є кілька рішень, які зазвичай називають HTML-фреймворками, хоча насправді вони такими не є: наприклад, HTML-патерни, шаблони й заготовки. Так, вони полегшують роботу, але більше підходять досвідченим верстальникам. Ці інструменти для тих, хто хоче працювати з кодом без посередників.

Cerberus

Cerberus — колекція безкоштовних адаптивних HTML-шаблонів і патернів, які спрощують створення листів. Кожен шаблон має всю потрібну інформацію про себе й протестований у найпопулярніших поштових клієнтах.

Список усіх поштових клієнтів, які підтримує Cerberus

Цікавий факт: автор Cerberus проти CSS-інлайнерів, бо його продукт має бути простим і не повинен залежати від чогось на кшталт CSS-інлайнера. Він також вважає, що вбудовування стилів роздуває код, а останній аргумент — розміщення CSS у Cerberus і так уже оптимізоване.

Приклад коду в Cerberus

Kilogram

Kilogram побудований на Nunjucks — шаблонізаторі від Mozilla. У ньому є й додаткові інструменти для розробки адаптивних листів. Встановивши Kilogram, ви отримуєте шаблони листів, CSS-інлайнер і HTML-мініфікатор.

Ось список поштових клієнтів, сумісних із Kilogram:

• усі версії десктопного Outlook;
• Office 365 (веб);
• Outlook.com (веб, iOS, Android, Windows Phone);
• Thunderbird (Windows);
• AOL Mail (iOS);
• Yahoo! Mail (веб, iOS, Android);
• Google Inbox (веб, iOS, Android);
• Gmail (веб, iOS, Android);
• Mail.ru (веб, iOS, Android);
• myMail (iOS, Android);
• Rambler Mail (веб, iOS, Android);
• Yandex Mail (веб, iOS, Android);
• Airmail (iOS, OS X);
• Apple Mail (iOS, OS X);
• Spark (iOS);
• Polymail (iOS, OS X).

Inkcite

Inkcite — модульна дизайн-система для створення сучасних адаптивних листів. Власних тегів вона не використовує, але має дещо схоже. Це так звані «Helpers», які виглядають як звичайні HTML-теги у фігурних дужках.

Ось як це виглядає:

Inkcite має три середовища: Development, Preview і Production.

У середовищі Development ви локально розробляєте лист і його контент.

Середовище Preview призначене для надсилання тестових версій листів.

Production — фінальний етап розробки листа. Зображення завантажуються в CDN, посилання вставляються в HTML, вмикаються відстеження посилань і теги, HTML мініфікується, а запобіжні перевірки активуються.

То який email-фреймворк обрати?

Якщо вам потрібне рішення, яке суттєво спростить і пришвидшить верстку, і ви готові вивчити нову логіку, структури та правила, — ваш вибір email-фреймворки з власними тегами.

Якщо ви шукаєте інструмент чи платформу, яка супроводжуватиме вас у верстці, додасть їй структури й не змусить вивчати нову мову та правила, — вам підійдуть email-фреймворки без власних тегів.

Якщо ж вам потрібен свого роду помічник, зверніться до інших інструментів (їх теж іноді називають фреймворками): HTML-заготовок, шаблонів і патернів.

А якщо ви помітите помилки чи неточності в цій або будь-якій іншій статті нашого блогу, пишіть нам на support@useblocks.io. Ми відреагуємо й виправимо все якнайшвидше.