Попробовал открыть mjml в webstorm, установился автоматически плагин и все прекрасно работает. Также можно открыть слева код, и справа сразу же показан вариант отображения. Есть возможность в окне изменить вид отображения на скомпилированный код, десктоп версию либо мобильная версию. Вот за такие вещи и нравятся продукты Jetbrains. Все работает из коробки. С удовольствием, Макс смотрю твои ролики. Интересная тема. Продолжай.
Привет, я тут начал юзать webstorm, и единственное, что так и не понял, это как после изменений mjml компилировать его в html, то есть я делаю правки в mjml, а html не меняется, в vs code было просто , команда MJML: Export HTML, после нажатия ctrl + shift + p
@@АндрейСливка-д5п тоже пока не пойму, нашел обходной путь - плагин может показать итоговый html и я его сохраняю в файл .html для открытия в браузере. Но это немного дольше чем было продемонстрировано в VS коде
Прикольная штука. до этого использовал другой конструктор для писем. Но главная проблема верстки писем - это то, что все твои классы, что ты так старательно прописал там -- будут просто вырезаны в GMAIL и все твои стили полетят в трубу. Так что все эти стили нужно было вписывать прям в код как-то. Так что делаем MOBILE-FIRST без классов более-менее читабельное через INLINE-STYLES, а потом уже классами как-то доводим до совершенства красоту.
Сделала и отправила себе в яндекс и маил. Везде потерялись иконки соцсетей. Почему? Как проверять для других адресатов? Как делать верстку письма, чтобы работал слайдер?
Если к каждому тегу надо вручную писать стили, то в чём смысл? Есть ли вариант, сделать обычную вёрстку на html и css, а потом автоматически конвертировать в 1 файл, адаптированный для почтовых клиентов и почтовых мобильных приложений?
Макс, спасибо большое за видео, я сверстала красивое письмо, а потом запустила его в валидатор. Валидатор опешил от этого кода и выдал полотенце ошибок. Нужно ли париться на этот счет, это я криво сверстала или такая особенность фрейма?
Отличная тема, шикарный урок! Вечером внимательно пересмотрю. Вот такой вопрос. Бесплатных макетов сайтов вагон и тележка. Макетов писем, чтобы руку набить немного, я не нашел. Только теймплейты за доллары. Не подскажешь, где можно 2-3 разных шаблона найти? Хоть в Figma, хоть в psd формате.
@@maxgraph в то-то и дело, прилетела задача сверстать хтмл адаптив, и тут я подофигел, всемирный жОмейл и без медиа... Как решение, максимум все в % и флюидных шрифтах. А как border-bottom убрать на мобайле или еще что-то визуальное? Увы....... Жесть...
@@maxgraph да, я перепроверил взяв код примера с документации. mjml.io/try-it-live/templates/basic колонки встают в 100% всегда. (то есть mj-column на десктопе сегдла отображается как на мобиле)
Интересная тема, хотелось бы еще) Всегда было интересно, как их верстают. Спасибо за ваш труд!
Пожалуйста))
Очень круто👌👍 сам начал изучать mjml, интересный инструмент. Хочется ещё по нему видео посмотреть от такого профи! За видео спасибо.
Попробовал открыть mjml в webstorm, установился автоматически плагин и все прекрасно работает. Также можно открыть слева код, и справа сразу же показан вариант отображения. Есть возможность в окне изменить вид отображения на скомпилированный код, десктоп версию либо мобильная версию. Вот за такие вещи и нравятся продукты Jetbrains. Все работает из коробки. С удовольствием, Макс смотрю твои ролики. Интересная тема. Продолжай.
Привет, я тут начал юзать webstorm, и единственное, что так и не понял, это как после изменений mjml компилировать его в html, то есть я делаю правки в mjml, а html не меняется, в vs code было просто , команда MJML: Export HTML, после нажатия ctrl + shift + p
@@АндрейСливка-д5п тоже пока не пойму, нашел обходной путь - плагин может показать итоговый html и я его сохраняю в файл .html для открытия в браузере. Но это немного дольше чем было продемонстрировано в VS коде
Спасибо большое за видео! Интересно посмотреть на верстку более сложных писем через этот фреймворк.
Пожалуйста)
Классный урок, тем более, что на русском про MJML ничего нет. Пожалуйста продолжайте эту тему
Постараюсь)
Огромная благодарность за гайд, от души) сверстала за ночь по нему с нуля)
Пожалуйста))
Очень интересно! Конечно продолжай! И mjml и классическую на таблицах тоже 🙏
Да, будет))
Прикольная штука. до этого использовал другой конструктор для писем.
Но главная проблема верстки писем - это то, что все твои классы, что ты так старательно прописал там -- будут просто вырезаны в GMAIL и все твои стили полетят в трубу.
Так что все эти стили нужно было вписывать прям в код как-то.
Так что делаем MOBILE-FIRST без классов более-менее читабельное через INLINE-STYLES, а потом уже классами как-то доводим до совершенства красоту.
Спасибо за полезное видео.
Всё работает
Пожалуйста)
Сделала и отправила себе в яндекс и маил. Везде потерялись иконки соцсетей. Почему? Как проверять для других адресатов? Как делать верстку письма, чтобы работал слайдер?
чтобы не писать инлайново шрифт везде можно его задать атрибутом в хеде
Отличный урок !!!
Спасибо)
Хороший урок, спасибо!
Если к каждому тегу надо вручную писать стили, то в чём смысл? Есть ли вариант, сделать обычную вёрстку на html и css, а потом автоматически конвертировать в 1 файл, адаптированный для почтовых клиентов и почтовых мобильных приложений?
с начала лайк потом видос)
Ещё урок по верстке e-mail, пожалуйста! Что-нибудь похожее на рекламную рассылку было бы идеально ))
Будет в ближайший месяц)
Уже прошел год с выхода этого видео, удалось ли вам полностью разобраться с mjml? Стоит переходить на mjml или там много чего не хватает?
Я бы не переходил, с аутлуком он не очень дружит
Макс, спасибо большое за видео, я сверстала красивое письмо, а потом запустила его в валидатор. Валидатор опешил от этого кода и выдал полотенце ошибок. Нужно ли париться на этот счет, это я криво сверстала или такая особенность фрейма?
Надо смотреть что там. По идее ошибок нужно избегать
Спасибо за видео, но!
Так и не увидел и не понял куда нажать на 13мин что бы преобразовать в html???
зачем в 23:00 он засунул всё после хедера в враппер? в чем была проблема задать отступы секции не понял
Чтоб правильно расположить элементы
@@maxgraph в телеграме ты мне не отвечаешь >:(
Отличная тема, шикарный урок! Вечером внимательно пересмотрю.
Вот такой вопрос. Бесплатных макетов сайтов вагон и тележка. Макетов писем, чтобы руку набить немного, я не нашел. Только теймплейты за доллары.
Не подскажешь, где можно 2-3 разных шаблона найти? Хоть в Figma, хоть в psd формате.
Да вот так и искать - psd email template
или figma email template )
картинки работают только как абсолютные ссылки?
Да)
макс здоров
какое в айтишке выбрать направление? Верстаком не берут
Привет! Учить далее фронтенд-разработку)
Извините, поинтересуюсь. Что значит не берут? Как долго пытаетесь устроиться и что умеете? Есть портфолио?
Если ты верстать не умеешь, то и не возьмут конечно. Покажи портфолио и что умеешь
Привет) а можно видео про основы js? )))...
Привет, будет в этом году, наверное))
В яндекс почте не очень отображается письмо, а так спасибо за гайд
Увы, они я думаю даже не знают что такое яндекс почта))
Уже раскатал губу. Думал что медиа запросы заставит работать в GMAIL. Ага, хрен там.....
Если бы это было технически реально))
@@maxgraph в то-то и дело, прилетела задача сверстать хтмл адаптив, и тут я подофигел, всемирный жОмейл и без медиа... Как решение, максимум все в % и флюидных шрифтах. А как border-bottom убрать на мобайле или еще что-то визуальное? Увы....... Жесть...
mjml не рабочий инструмент. Яндекс почта принимает письма с ошибками
А что там за ошибки?
В яндексе - почте, хоть в веб версии хоть на моб. клиенте не работает ни mj-column, ни media query - от слова совсем
Хм, вроде работало) проверю
Но медиа запросы да, не работают
@@maxgraph да, я перепроверил взяв код примера с документации.
mjml.io/try-it-live/templates/basic
колонки встают в 100% всегда. (то есть mj-column на десктопе сегдла отображается как на мобиле)
очень печально, так как уже письмо сверстано. не знаю что делать, из-за яндекса придется полностью переделывать нативно либо на другом фреймворке.
Дело не во Фреймворке, медиа запросы не работают в яндексе в принципе никак. Неважно как письмо сделано
@@maxgraph ну конструкция mj-section > mj-column ведь не на медиазапросах работает? так вот она тоже не работает в яндексе