Адаптивное html письмо по стандартам, почему не адаптирует в письме на сайте?

Question

[Антон Вебсайтовский]

Всем привет, читал разные статьи и пришел к выводу как нужно реализовать адаптивное html письмо.
Сделал шаблон, открывал в браузере все окей, все работает как надо.
Потом использовал этот шаблон для письма, получал почту через маил ру, захожу в письмо, вижу весь дизайн, все ок, но не адаптирует, уменьшал разрешения экрана и медиа как-то не срабатывали. Я так понимаю hover тож в письме не работает, на ссылки делал.

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


Пример шаблона:
https://jsfiddle.net/qkunh1z9/3/

Comments

[Вадим]

письма - не благодарное дело. Докопаться до истины почему в одной почте работает, а в другой - нет, очень трудоёмко. У каждого почтового клиента свой почтовый движок, но почти все они отстают от того, к чему мы привыкли в браузерах лет на 5-10.
Могу попробовать предложить Вам переверстать с помощью фрэймворка для писем - mjml

[Антон Вебсайтовский]

Вадим, насчет тегов и оформления я знаю и использовал div и table.
mjml - это плагин для фраемворков я так понял, его внедрять надо и т.д, это гемор, у меня просто в html шаблон письма, уже готово, чуть допилить чтоб все ок было.

А погоди, глянул, там и шаблоны есть и какие-то теги mjml и т.д, mj-body, первый раз такие вижу. Не совсем понял как это использовать и будет ли везде нормально.

[Вадим]

Антон Вебсайтовский, Дело не только в тэгах и оформлении. Например, @media такая же фича, которую поддерживают не все почтовые клиенты. И мест возникновения проблемы может быть ещё много.

[Антон Вебсайтовский]

Вадим, так что же это, mjml? и почему решил что в разных клиентах будет нормально работать.

[Антон Литвиненко]

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

[Вадим]

Антон Вебсайтовский, не надо ничего никуда встраивать. Пишите тэги mjml как описано в документации и дальше удобным для вас образом конвертируете в html.
Для vs code есть специально созданный плагин у которого и превью режим есть и конвертир.
Mjml это и есть фрэймворк, который на выходе даёт код на основе большого количества лучших практик по вёрстке писем.
Всем почтовым клиентам Вам никогда не угодить. Mjml позволит быстро сделать "нормально" для большинства и "пойдет" для остальных.
Почему я так решил: потому что я прочитал документацию, ссылку на которую Вам дал, потому что это известное решение для верстки писем с минимум страданий и потому что пользовался им сам.

Answer 1

[Антон Шаманов]

как минимум разметка кривая - ты что не видишь что у тебя в конце закрывающие теги красным выделены?
кроме того media основывается на разрешении страницы, а не твоего письма.
+ ты должен понять что нет единого стандарта для html писем - каконинические примеры вообще содержат только внутренности body.

Comments

[Антон Вебсайтовский]

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

[Антон Шаманов]

Антон Вебсайтовский пользоваться советами популярных ресурсов