Адаптивная верстка письма на фреймворке MJML

Привет! В этом видео начнем разбираться в одном из популярных фреймворков верстки писем - MJML. Я сам еще в процессе изучения, но решил показать вам, насколько на нем проще верстать письма, в сравнении с табличной версткой. Давайте разбираться!

Содержание:
00:00 - Вступление
01:30 - Создаем mjml-файл, компилируем в html
03:40 - Верстаем письмо по макету (первая секция)
11:30 - Вторая секция письма
20:10 - Третья секция письма
28:40 - Последняя секция письма + адаптивная верстка
43:30 - Проверка в outlook

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#ityoutubersru #mjml #верстка_писем

[mister_robot]

Интересная тема, хотелось бы еще) Всегда было интересно, как их верстают. Спасибо за ваш труд!

[alxnrpanchuk]

Очень круто👌👍 сам начал изучать mjml, интересный инструмент. Хочется ещё по нему видео посмотреть от такого профи! За видео спасибо.

[dyfjxnq]

Спасибо большое за видео! Интересно посмотреть на верстку более сложных писем через этот фреймворк.

[olgareschetilo]

Очень интересно! Конечно продолжай! И mjml и классическую на таблицах тоже 🙏

[stishystish]

Огромная благодарность за гайд, от души) сверстала за ночь по нему с нуля)

[gagarin-d]

Спасибо за полезное видео.
Всё работает

[velessn]

Попробовал открыть mjml в webstorm, установился автоматически плагин и все прекрасно работает. Также можно открыть слева код, и справа сразу же показан вариант отображения. Есть возможность в окне изменить вид отображения на скомпилированный код, десктоп версию либо мобильная версию. Вот за такие вещи и нравятся продукты Jetbrains. Все работает из коробки. С удовольствием, Макс смотрю твои ролики. Интересная тема. Продолжай.

[autoandrey]

Классный урок, тем более, что на русском про MJML ничего нет. Пожалуйста продолжайте эту тему

[ForeverDarkDeath]

Прикольная штука. до этого использовал другой конструктор для писем.
Но главная проблема верстки писем - это то, что все твои классы, что ты так старательно прописал там -- будут просто вырезаны в GMAIL и все твои стили полетят в трубу.
Так что все эти стили нужно было вписывать прям в код как-то.
Так что делаем MOBILE-FIRST без классов более-менее читабельное через INLINE-STYLES, а потом уже классами как-то доводим до совершенства красоту.

[suspiciouscandy]

Ещё урок по верстке e-mail, пожалуйста! Что-нибудь похожее на рекламную рассылку было бы идеально ))

[ukvmedg]

чтобы не писать инлайново шрифт везде можно его задать атрибутом в хеде
<mj-attributes>
<mj-all font-family="Inter, sans-serif" />
</mj-attributes>

[relaxing_sounds_zen_meditation]

Спасибо за полезный урок! У меня вопрос - на чьем хостинге нужно располагать картинки? На хостинге заказчика? Или на своём?

[vladpetri]

Спасибо за видео, но!
Так и не увидел и не понял куда нажать на 13мин что бы преобразовать в html???

[suspiciouscandy]

Отличная тема, шикарный урок! Вечером внимательно пересмотрю.
Вот такой вопрос. Бесплатных макетов сайтов вагон и тележка. Макетов писем, чтобы руку набить немного, я не нашел. Только теймплейты за доллары.
Не подскажешь, где можно 2-3 разных шаблона найти? Хоть в Figma, хоть в psd формате.

[super_snejinka]

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

[vsujzev]

Если к каждому тегу надо вручную писать стили, то в чём смысл? Есть ли вариант, сделать обычную вёрстку на html и css, а потом автоматически конвертировать в 1 файл, адаптированный для почтовых клиентов и почтовых мобильных приложений?

[fitterboss]

Уже прошел год с выхода этого видео, удалось ли вам полностью разобраться с mjml? Стоит переходить на mjml или там много чего не хватает?

[kpwjfju]

макс здоров
какое в айтишке выбрать направление? Верстаком не берут

[vjcuwvl]

зачем в 23:00 он засунул всё после хедера в враппер? в чем была проблема задать отступы секции не понял

[OPAPIZDEC]

Привет) а можно видео про основы js? )))...