Огляд MJML: фреймворк для адаптивних листів

Шукаєте рішення, щоб створювати адаптивні HTML-листи з меншою кількістю коду, заощаджувати час і запускати адаптивні маркетингові кампанії? Можливо, MJML — саме те, що вам треба! Прочитайте цей огляд: ви дізнаєтеся, що таке MJML, і зрозумієте, чи він вам підходить, чи краще пошукати альтернативи. Ми розповімо про шаблони листів MJML, редактор, підтримку поштових клієнтів та багато іншого.

Огляд можливостей MJML

Що таке MJML?

MJML розшифровується як Mailjet Markup Language. Це фреймворк, який дає змогу швидше створювати HTML-листи завдяки бібліотеці готових компонентів: тексту, зображення, кнопки, колонки, секції тощо.

Якщо ви трохи тямите в коді, спробуйте MJML, щоб спростити створення листів: відкрийте онлайн-редактор MJML, погляньте на бібліотеку компонентів і скористайтеся перевагами семантичного синтаксису MJML. Платформа дає змогу переглянути HTML-лист до того, як буде згенеровано фінальний результат.

MJML — безкоштовний фреймворк з відкритим кодом: код рушія доступний кожному. Спільнота MJML охоче ділиться власними шаблонами, компонентами MJML та інструментами, щоб удосконалювати платформу. Рішеннями спільноти може користуватися будь-хто: наприклад, багато корисного є на сторінці «Community» — посилання на безкоштовні інструменти на GitHub і чати, де можна обговорити MJML з іншими користувачами.

Редактор листів MJML

Редактор листів MJML складається з двох панелей: у лівій ви збираєте HTML-лист із компонентів, а в правій бачите попередній перегляд.

У правій панелі видно, як лист виглядатиме і на десктопі, і на мобільних пристроях. Але пам’ятайте: перед надсиланням кампанії однаково потрібно протестувати, особливо якщо у вас велика база адрес.

Крім онлайн-редактора MJML, рушій можна завантажити й користуватися ним офлайн на своєму комп’ютері. Саме офлайн-режим вирізняє email-фреймворк MJML серед конкурентів.

Десктопний застосунок MJML

Якщо хочете працювати з MJML локально на своєму комп’ютері, завантажте застосунок MJML. Ось кілька його можливостей, які можуть вам знадобитися:

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

Якщо вам зручніше у власному редакторі коду, для MJML є плагіни до редакторів на кшталт Visual Studio Code і Sublime Text. Ці плагіни розуміють компоненти Mailjet Markup Language, тож редагувати текст листа простіше.

Шаблони листів MJML

MJML пропонує близько 20 безкоштовних шаблонів листів для різних цілей: вітальні кампанії, популярні події на кшталт Різдва й Black Friday, чеки тощо. У бібліотеці MJML є й кілька галузевих шаблонів — для нерухомості, продажу квитків, подорожей та інтернет-магазинів. Потрібний тип листа можна вибрати за спеціальними тегами на сторінці «Templates».

Шаблони написані мовою Mailjet Markup Language, тож редагувати їх краще в редакторі MJML. Кожен шаблон можна відкрити й відредагувати онлайн: додавайте, змінюйте й видаляйте компоненти готового шаблону просто в редакторі MJML. Шаблони MJML — чудовий варіант, коли не хочеться створювати лист з нуля.

Шаблони листів із безкоштовної галереї MJML повністю адаптивні, тож можна не хвилюватися, чи добре вони виглядатимуть на мобільних. Проте ми все одно радимо тестувати кампанії MJML перед надсиланням аудиторії.

Сумісність MJML з поштовими клієнтами

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

MJML підтримує такі поштові клієнти (хоча деякі компоненти MJML — ні):

• Outlook;
• Apple Mail;
• Gmail;
• Yahoo Mail;
• Office 365.

Сумісність компонентів із різними поштовими клієнтами можна перевірити в цій інструкції.

Альтернативи й конкуренти MJML

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

• Деякі компоненти MJML не відображаються в окремих поштових клієнтах (наприклад, фонові зображення)
• HTML-код, який генерує MJML, може бути не таким чистим, як хотілося б. Зайві теги збільшують розмір файлів і ризик помилок.
• Щоб працювати з Mailjet Markup Language, виправляти баги й контролювати створення листів, треба мати досвід з HTML.
• Деякі елементи листів, згенеровані MJML, погано виглядають в Outlook.

Якщо ви шукаєте фреймворк з відкритим кодом для створення листів і знаєте HTML, на ринку чимало альтернатив MJML, наприклад:

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

• Maizzle. Email-фреймворк Maizzle використовує Tailwind CSS, щоб генерувати HTML-листи. Він робить ставку на налаштування елементів листа користувачем: можна додавати власні компоненти, оптимізувати листи під десктоп чи мобільні й підключати власні шрифти. На відміну від MJML, у Maizzle немає редактора листів і безкоштовних шаблонів.

Якщо вивчати HTML зараз не на часі, можливо, вам варто розглянути як альтернативу MJML редактори листів із перетягуванням. Ось із чого можна почати:

• Blocks — конструктор листів із перетягуванням. Blocks дає можливості і маркетологам, і верстальникам. Якщо ви зовсім не знаєтеся на коді, редагуйте й налаштовуйте шаблони листів з готових елементів, не торкаючись коду. Якщо ж ви досвідчений верстальник, перейдіть у режим коду кнопкою «Код» на верхній панелі й працюйте безпосередньо з HTML. Blocks генерує чистий адаптивний HTML-код, який добре відображається в популярних поштових клієнтах. Спробувати можна безкоштовно.
• Knak — редактор із перетягуванням. Knak — популярний редактор листів і лендингів зі зручним інтерфейсом і бібліотекою шаблонів. До того ж Knak повністю інтегрований з популярними ESP і платформами автоматизації маркетингу, як-от Eloqua, Marketo, Salesforce та іншими. Платформа підійде і невеликим, і великим маркетинговим командам. Замовте демо на сайті Knak, щоб побачити, на що він здатен.
• Stripo — інструмент для дизайну листів із перетягуванням. Stripo дає змогу створювати власні шаблони листів з готових модулів. Якщо не хочеться починати з нуля, у Stripo є велика галерея шаблонів: від листів про покинутий кошик до Thanksgiving і Дня святого Патрика. Stripo має тарифи і для окремих користувачів, і для корпорацій, тож ви, найпевніше, знайдете відповідний!

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

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