MJML - Как сделать адаптивное HTML-кодирование электронной почты простым

1. Дальнейшее чтение на SmashingMag:
2. Абстрагируясь от сложности отзывчивой электронной почты с MJML
3. Подход
4. Кодирование в MJML
5. Создание вашего первого информационного бюллетеня с MJML
6. Оптимизация стиля
7. Добавление контента
8. Трехколонный макет для блога, логотипа и реферальной ссылки
9. Макет одной колонки для GIF и CTA
10. тело
11. Двухколонный макет, который укладывается на мобильный
12. Синяя секция с CTA
13. Последний раздел тела
14. заглавие
15. Раздел шести значков
16. Разделитель и текст
17. Рендеринг HTML-файла и тестирование
18. Идти дальше

Во-первых, в почтовых клиентах нет стандартного способа отображения HTML. Это верно для почтовых клиентов из разных компаний, таких как Outlook и Apple Mail, но не только. Даже разные версии Outlook, такие как Outlook 2003, Outlook 2013 и Outlook.com, отображают HTML по-разному.

Дальнейшее чтение на SmashingMag:

Затем, хотя почтовые клиенты отображают HTML, многие из них имеют очень ограниченную поддержку. Некоторые почтовые клиенты просто удаляют заголовок вашего HTML-файла, включая медиа-запросы, поэтому настоятельно рекомендуется использовать встроенные стили . С хорошей стороны, это движется в правильном направлении с Обновление Gmail ,

Теперь есть несколько методов, чтобы помочь разработчикам электронной почты. Вы можете быть знакомы с некоторыми из них, такими как гибридный подход , Мобильный первый подход или даже Fab Four техника от HTeuMeuLeu , Но по причинам, указанным ранее, и в особенности из-за отсутствия стандарта, ни один из этих методов не позволит вам приручить все почтовые клиенты одновременно.

Абстрагируясь от сложности отзывчивой электронной почты с MJML

MJML - это фреймворк с открытым исходным кодом, который устраняет сложность адаптивной электронной почты. Идея этого довольно проста. Так же, как jQuery нормализует DOM и абстрагирует низкоуровневые взаимодействия и анимации, MJML абстрагирует низкоуровневые хаки для отзывчивых писем с простым синтаксисом. MJML отзывчивый по дизайну . Это означает, что вы можете забыть о вложенных таблицах и условных комментариях, а также о том, как сделать вашу электронную почту отзывчивой. MJML делает это для вас.

Использование семантического синтаксиса и компонентов высокого уровня, таких как карусель (да, вы можете отобразить интерактивную галерею изображений в электронном письме!), MJML действительно легко освоить для всех. Адаптивные электронные письма больше не доступны только для нескольких экспертов.

Простота использования не означает, что MJML не является мощным. Это просто позволяет экспертам оптимизировать рабочий процесс разработки, в то же время предоставляя им необходимую гибкость с компонентами более низкого уровня, такими как таблицы ,

Например, наш пример электронной почты был закодирован в 788 строк HTML и воспроизводится в менее 240 строк MJML ,

Подход

MJML встроен реагировать библиотека JavaScript, разработанная и поддерживаемая Facebook и использующая мощь компонентов React. Имена компонентов семантические, начинающиеся с mj-, так что они просты, а также легко распознаваемы и понятны: mj-текст, mj-изображение, mj-кнопка и т. Д.

MJML перейдет к адаптивному HTML, следуя сочетанию мобильных и гибридных подходов. Going mobile-first позволяет вам убедиться, что наиболее читаемая версия отображается по умолчанию в почтовых клиентах, которые не меняют макет в соответствии с используемым устройством.

Например, в Outlook.com мобильная версия будет отображаться как на настольном компьютере, так и на мобильном (что гораздо удобнее для чтения, чем версия для настольного компьютера, отображаемая на мобильном устройстве). Затем гибридный подход позволяет изменять компоновку в зависимости от размера устройства везде, где это возможно, используя сочетание запасных вариантов, условных комментариев, вложенных таблиц и медиазапросов, чтобы охватить как можно больше клиентов. Раскладка приятно ухудшается: многостолбцовые разметки на рабочем столе превращаются в одностолбцовые разметки на мобильных устройствах.

Кодирование в MJML

Прежде чем мы начнем учебник, давайте подготовимся к написанию кода на MJML. У нас есть разные способы использования MJML, такие как запустить его локально или используя онлайн редактор , Выбрав онлайн-редактор, вы сможете сразу запустить его, но его локальный запуск позволяет использовать MJML с вашим любимым редактором кода (с плагинами для Атом , Возвышенный текст а также напор ), такие исполнители, как Глоток-mjml а также Грунт-mjml а также намного больше ,

Для этого урока онлайн редактор рекомендуется, потому что не требует никакой настройки.

Если вы все еще хотите использовать его локально, откройте ваш терминал и запустите npm install mjml -g (требуется иметь Node.js и npm установлены).

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

Создание вашего первого информационного бюллетеня с MJML

Теперь, когда вы все настроены, мы можем начать создавать адаптивный бюллетень вместе. Чтобы найти вдохновение, одно из лучших мест вокруг ReallyGoodEmails , Я нашел отличный пример новостной рассылки от Процветающий рынок , Давайте воссоздадим это с MJML!

(Названия брендов, логотипы и товарные знаки, использованные в настоящем документе, остаются собственностью их соответствующих владельцев, и их использование не подразумевает одобрения или присоединения к Thrive Market.)

Во-первых, вот что базовый макет документа MJML выглядит так:

Оптимизация стиля

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

Для начала мы установим семейство шрифтов sans-serif по умолчанию для текстовых компонентов, потому что здесь sans-serif используется для большей части текста. Затем мы создадим классы для многократно используемых элементов, поэтому нам не придется вручную устанавливать стили снова и снова. Мы могли бы создать больше пользовательских классов и стилей, но самые полезные стили будут для:

• кнопки,
• описания изображений,
• текст под шестью значками в нижнем колонтитуле.

Здесь мы будем использовать компоненты головы тремя способами:

• Установите заполнение по умолчанию 0 для каждого компонента, используя <mj-all />. Это заполнение по умолчанию может быть отменено путем ручного указания заполнения непосредственно для компонентов, которые мы используем.
• Переопределите семейство шрифтов по умолчанию <mj-text>, используя <mj-text /> в заголовке. Каждый раз, когда мы используем <mj-text>, семейством шрифтов по умолчанию будет sans-serif. Мы все еще можем вручную переопределить этот новый шрифт по умолчанию, указав новый непосредственно на компоненте.
• Создайте классы, используя <mj-class /> и, более конкретно, используя следующие mj-классы:
  • Пилюлька Это дизайн приятной кнопки. Атрибуты, на которые стоит обратить внимание: это цвет фона, заданный как прозрачный, и внутренний отступ, используемый для изменения размера кнопки, как мы хотим.
  • desc Это стиль описания изображений в двухколоночном макете.
  • ico Это стиль текста под шестью иконками перед нижним колонтитулом.

(Как вы, возможно, заметили, мы пропустили единицы измерения в некоторых атрибутах, таких как отступы. Если вы это сделаете, MJML выведет атрибуты с px по умолчанию.)

Добавление контента

Теперь, когда стили определены в голове (вы можете увидеть Вот как ваш код должен выглядеть сейчас), давайте начнем добавлять контент в нашу электронную почту! Макеты MJML основаны на <MJ-раздел> создавать строки и <MJ-столбца> создавать столбцы внутри строк, что очень удобно для дизайна электронной почты. Обратите внимание, что за исключением компонентов высокого уровня, таких как <MJ-герой> а также <MJ-Navbar> , контент всегда должен быть завернут в <MJ-столбца> , который сам должен идти в <MJ-раздел> , даже если в разделе есть только один столбец.

Давайте посмотрим на это на двух примерах: предварительный заголовок и заголовок письма.

Здесь нет ничего особенного. Мы просто создаем текстовый заголовок, используя <MJ-текст> компонент, обернутый в столбец и предоставляющий ему несколько стилей MJML.

Hack: <mj-text> позволяет вам использовать HTML непосредственно внутри MJML, предоставляя вам полный контроль над содержимым и позволяя вам использовать, например, теги <span> и <a>, к которым вы привыкли.

Трехколонный макет для блога, логотипа и реферальной ссылки

Заголовок немного сложнее, но его очень легко достичь с помощью MJML. Все, что нам нужно сделать, это создать раздел, который мы разделим на три равных столбца (поскольку столбцы равны, нам даже не нужно вручную устанавливать ширину). Мы будем использовать изображения, как в оригинальном письме, используя явный компонент <MJ-изображения> , который поставляется с общими атрибутами, которые вы ожидаете, включая src, padding и border.

По умолчанию столбцы будут складываться в мобильной версии нашей электронной почты. Здесь, поскольку мы хотим, чтобы эти три столбца оставались рядом даже на мобильных устройствах, мы обернем их в <MJ-группа> компонент, который будет препятствовать укладке столбцов.

Взлом: Как отмечалось в документации, из-за ошибки в iOS вам, возможно, придется использовать минификатор, иначе столбцы могут складываться на iPhone, даже если они заключены в <mj-group>. Интерфейс командной строки MJML поставляется с встроенный минификатор что вы можете использовать для запуска опции -m при рендеринге MJML.

Макет одной колонки для GIF и CTA

Мы создадим еще один раздел, в который мы просто добавим изображение, текст и кнопку. Единственный новый компонент здесь <MJ-кнопка> , который должен быть достаточно понятным и который поставляется со стандартными атрибутами. Обратите внимание, что вы должны указать href, иначе текст кнопки может не отображаться в некоторых почтовых клиентах.

Да, для этого тоже есть компонент! Хорошей практикой является разделение разных строк на разные секции вместо того, чтобы помещать все в одну и ту же секцию, потому что это дает вам больший контроль над стилями (особенно через заполнение), а также облегчает выявление любых возникающих проблем.

Мы будем использовать тот же разделитель между телом и нижним колонтитулом позже.

тело

Теперь, когда у нас красивый заголовок Давайте начнем с того, что кажется сложной частью этого письма.

Двухколонный макет, который укладывается на мобильный

Здесь мы создадим раздел для каждой строки из двух столбцов. Каждый столбец будет состоять из изображения, фрагмента текста и кнопки. Хорошая новость заключается в том, что благодаря гибридному подходу MJML нам не нужно ничего делать, чтобы изображения складывались на мобильных устройствах. Это отзывчиво по умолчанию!

Что касается стиля, нам не нужно много делать, потому что мы используем mj-classes pill и desc, которые мы создали ранее. Все, что нам нужно сделать, это добавить некоторые отступы, чтобы соответствовать стилю исходного письма.

Подсказка: из-за проблемы с игнорированием заданной ширины в Outlook 2000, 2002 и 2003, в MJML рекомендуется устанавливать размеры изображений, которые вы хотите отображать на этих клиентах.

Здесь мы видим, что для ссылок применяется стиль HTML по умолчанию. В дополнение к <mj-attribute> вы также можете встроить CSS прямо в MJML, используя <MJ-стиль> , Давайте сделаем это, обновив заголовок, чтобы раз и навсегда перезаписать стиль ссылок по умолчанию. Мы также создадим класс CSS для применения к тегам <a>, чтобы придать им правильный цвет (мы создаем класс, потому что ссылки в письме не должны иметь одинаковый цвет).

Выполните те же шаги с другими разделами из двух столбцов.

Синяя секция с CTA

Для создания этого раздела мы будем использовать знакомые нам компоненты: <mj-section>, <mj-column> и <mj-button>.

Сначала мы добавим цвет фона в наш раздел и некоторые отступы, чтобы он выглядел как положено. Затем нам просто нужно создать два столбца, один шире другого, используя атрибут width с процентами. Как обычно, столбцы будут складываться на мобильном телефоне. Поскольку кнопка отличается от других здесь, мы не будем использовать класс таблетки, а скорее создадим новый стиль вручную.

Подсказка: из-за слабой поддержки сокращенных цветов HEX в Internet Explorer мы рекомендуем использовать шестизначные цвета HEX. Это хак, который мы в какой-то момент реинтегрируем в MJML, чтобы убедиться, что трехзначные HEX-коды превращаются в шестизначные.

Последний раздел тела

Чтобы создать заголовок, мы создадим макет из трех столбцов. Столбцы будут состоять из следующего, соответственно:

• темно-синяя линия слева от заголовка,
• название «Хотите больше советов, хитростей и вкусных рецептов?»,
• синяя линия справа от заголовка.

Затем мы обернем три столбца в <mj-group>, чтобы они не складывались на мобильных устройствах.

Мы начнем создавать линии, используя компонент <mj-divider>, установив его border-width равным 2px и добавив немного отступов, чтобы он выглядел так, как мы хотим. По умолчанию разделитель заполнит столбец, в котором он содержится, чтобы он выглядел одинаково для всех устройств. Поэтому нам не нужно явно устанавливать ширину делителя.

Затем мы просто используем <mj-text> для добавления нашего заголовка, используя mc-класс desc (потому что мы хотим наследовать некоторые из стилей, установленных в этом классе) и переопределяя семейство шрифтов и свойства выравнивания, которые отличаются из этого класса. Мы могли бы также вручную установить стиль без использования desc mj-class.

Наконец, нам просто нужно использовать нашу кнопку с mj-классом pill, как мы делали раньше. Мы переопределяем внутренние отступы, потому что, согласно оригинальному дизайну, эта кнопка не такая широкая, как другие.

Ты можешь видеть как должен выглядеть наш шаблон MJML.

заглавие

Мы оборачиваем наш заголовок в раздел и столбец, как мы видели ранее, и мы используем стиль desc, который мы создали ранее. Нам нужно изменить только несколько стилей, вручную установив разные выравнивание, размер шрифта и стиль шрифта из нашего mj-класса.

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

Этот раздел состоит из шести значков с сопровождающим текстом ниже. Значки отображаются рядом на рабочем столе и переносятся на две строки из трех значков на мобильном телефоне. К настоящему времени вы, вероятно, знаете, что создавать такие макеты легко, если мы используем компонент <mj-column>. Чтобы иконки складывались в две строки, нам нужно только обернуть столбцы в две группы по три столбца в <mj-group>.

Чтобы оформить текст под иконками, нам просто нужно использовать созданный ранее ico mj-класс. Мы также создадим класс CSS с именем ico для применения к тегам a, как мы делали в разделе с двумя колонками.

Еще раз, этого раздела легко достичь, используя компонент <mj-column>, используя один столбец на значок социальной сети и упаковывая все иконки в <mj-group>, чтобы они не складывались на мобильных устройствах. Единственная хитрость здесь - это точная настройка ширины изображений и отступов, чтобы результат соответствовал оригинальному дизайну.

Разделитель и текст

Поскольку эта часть довольно проста, все-таки можно заключить разделитель и текст в один столбец и раздел, даже если бы мы могли отделить разделитель от текста. Как мы делали раньше при стилизации ссылок, мы создадим класс нижнего колонтитула, чтобы наши ссылки имели правильный цвет.

Рендеринг HTML-файла и тестирование

Теперь у вас должно быть менее 240 строк MJML (вы можете проверить полный код ), тогда как исходный файл был чуть менее 800 строк HTML. Congrats! Вы только что создали свою первую отзывчивую электронную почту, используя MJML! Насколько легко это было?

Проверка того, как электронная почта отображается в разных почтовых клиентах, всегда является хорошей практикой, поэтому давайте сделаем это, используя лакмус ( Электронная почта на Acid еще одна отличная платформа для тестирования электронной почты).

Иди к Лакмусу (создайте учетную запись, если у вас ее еще нет), создайте новый проект и вставьте созданный ранее HTML-код в область кода. Вы сможете увидеть результаты в различных почтовых клиентах, нажав «Мгновенный предварительный просмотр» на правой панели. Ты можешь видеть результаты для основных почтовых клиентов, от Outlook 2003 до почтового ящика Gmail.

Идти дальше

Теперь, когда вы знаете, как использовать MJML для простого создания адаптивного электронного письма, почему бы не попробовать создать свой собственный компонент? Мой учебник проведет вас через этот шаг за шагом.

Что вы думаете о своем первом опыте работы с MJML? Не стесняйтесь протянуть руку в Твиттере и присоединиться к сообществу MJML сейчас, подписавшись на слабина канал. Вы также можете подписаться на рассылку быть в курсе последних новостей.

Похожие

Комментарии