Реклама мешает? Идти Без рекламы Сегодня 

Конвертер MJML в HTML-для респонсивных электронных писем

РазработчикТекст

[iotools_mjml_to_responsive_email_html_converter]

Гид

Конвертер MJML в респонсивный HTML-код писем

Конвертер MJML в HTML-для респонсивных электронных писем

Вставьте MJML-код и мгновенно получите готовый к использованию, основанный на таблицах, респонсивный HTML-код писем с поддержкой Outlook (MSO), встроенными стилями и живым предварительным просмотром на рабочем и мобильном устройствах. Процесс компиляции выполняется полностью в вашем браузере с использованием официального движка MJML, поэтому ваши шаблоны никогда не покидают ваш компьютер.

Как использовать

Вставьте или введите ваш MJML-код в левый редактор (или нажмите Попробуйте пример загрузить шаблон-шаблон).
Выберите стиль вывода: Улучшенный для читаемого HTML, Минифицированный для наименьшего объема данных, или Развернутый для стандартного вывода движка.
Выберите уровень проверки: Мягкий отображает проблемы без блокировки, Строгий прерывает процесс при обнаружении ошибок, Skip отключает проверку.
Проверьте скомпилированный HTML в правой части и используйте переключатель устройства для просмотра размещения на рабочем и мобильном устройствах.
Нажмите Копировать HTML-код для копирования кода, или Скачать .html для сохранения в вашем ESP или почтовом клиенте.

Возможности

Полная поддержка спецификации MJML – mj-section, mj-column, mj-button, mj-image, mj-text, mj-divider, mj-head атрибуты и другие.
Поддержка Outlook – MSO-условные комментарии и таблицы для старых версий Outlook на рабочих станциях.
Живой предварительный просмотр – Встроенный iframe с шириной рабочего устройства (600px) и мобильного устройства (360px).
Появление ошибок и предупреждений – Встроенные сообщения с номерами строк и названиями проблемных тегов.
Улучшенный, минифицированный или развернутый вывод – Соответствует формату вашего редактора или отправочного потока.
100% клиентская сторона – Ваш MJML-код и скомпилированный HTML никогда не достигают сервера.
Копирование и загрузка – Один клик для копирования в буфер обмена или сохранения как отдельный файл .html.

 Часто задаваемые вопросы

Что такое MJML и почему используется для писем?

MJML (Mailjet Markup Language) — это открытый язык разметки, разработанный для упрощения создания респонсивных писем. Ручное написание HTML-кода для писем трудно, потому что почтовые клиенты (особенно старые версии Outlook) требуют вложенных таблиц, встроенных стилей и MSO-условных комментариев для корректного отображения. MJML предоставляет более высокий уровень компонентов (mj-section, mj-column, mj-button, mj-image, mj-text), которые автоматически компилируются в старый, таблицы-основанный HTML, обеспечивая единый источник, который корректно отображается как на современных, так и на устаревших клиентах.
Почему HTML-код писем требует таблиц и встроенных стилей вместо современного CSS?

Почтовые клиенты изолируют и переписывают полученный HTML. Многие клиенты удаляют стили, игнорируют внешние стили и учитывают только небольшой набор свойств CSS. Outlook для Windows использует рендерер HTML из Microsoft Word, который не поддерживает flexbox, grid или даже плавающие элементы. Единственная примитивная структура, которая корректно отображается во всех браузерах, — это HTML-таблица с явными атрибутами ширины и встроенными стилями на каждый элемент. MJML скрывает этот трудоемкий и подверженный ошибкам фреймворк за чистыми компонентами.
Что такое MSO-условные комментарии и почему в выводе MJML включаются они?

MSO-условные комментарии — это специальные HTML-комментарии вида которые обрабатываются только Microsoft Outlook (Windows). Они позволяют отправлять альтернативный код для Outlook — например, формы на основе VML для кнопок, которые отображаются как настоящие прямоугольники даже в сломанном рендерере Outlook. Компилированный MJML-код включает эти условия, чтобы один шаблон корректно адаптировался от Apple Mail и Gmail до Outlook 2007 и более поздних версий.
Что такое респонсивный email, учитывая ограниченную поддержку CSS в почтовых клиентах?

Респонсивный email обычно объединяет две стратегии: гибкую, таблицу-основанную структуру на рабочем столе (ширина около 600px, центрированная) и набор медиа-запросов, которые ставят столбцы в вертикальную позицию и изменяют шрифты на узких экранах. Поскольку некоторые клиенты игнорируют медиа-запросы, MJML генерирует структуру, которая уже адаптируется к распространенным ширинам с помощью таблиц с процентными ширина, а затем добавляет переключатели медиа-запросов на верхнем уровне для клиентов, которые их поддерживают. Результат — письмо, которое выглядит осмысленно на телефоне, даже если поддержка CSS неполна.
Какова практическая разница между улучшенным и минифицированным HTML-выводом?

Улучшенный вывод сохраняет отступы и переносы строк, что полезно при проверке разметки, сравнении изменений шаблона или вставке в обзор кода. Минифицированный вывод удаляет пробелы и комментарии для сокращения объема — полезно, поскольку некоторые ESPы взимают за килобайт, а Gmail ограничивает сообщения примерно на 102 КБ. Функционально оба варианта создают одинаковое отображение письма; выбирайте улучшенный при написании шаблонов и минифицированный при отправке.