Как достичь адаптивной вёрстки в email-рассылках?

Question

[Влад]

Или как сделать так, чтобы почтовые сервисы не зарубали media-запросы?

Заинсталлил фреймворк Foundation for Emails (Sass), сверстал рассылку и забилдил.
Тестирую на мобильных приложениях от e.mail.ru и mail.yandex.ru – приходит десктопная вёрстка.
Смотрю другие рассылки типа от Авито и прочие – у них адаптивная вёрстка работает.
Как этого достичь?

Вёрстка Ссылка удалена модератором.

Comments

[Василий Банников]

Или как сделать так, чтобы почтовые сервисы не зарубали media-запросы?

Никак.

Не знаю, как ты там сверстал. Обычно если верстаешь не очень сложно и без жёстких размеров, то оно в принципе и так нормально сжимается.

Answer 1

[R4ZΞ]

Привет.

Разные почтовики по-разному относятся к тем же медиа-запросам, но чаще всего они либо игнорируются, либо вырезаются. Поэтому адаптив достигается в первую очередь за счёт адекватно отрисованного макета, учитывающего специфику задачи, и потом уже свёрстанного, либо самостоятельно и с указанием ширины таблиц/блоков в % (практика показала, что это наиболее стабильный и предсказуемый метод), либо используя шаблоны/фреймворки, которых можно найти довольно много.

Или как сделать так, чтобы почтовые сервисы не зарубали media-запросы?

Никак. Меняйте подход к вёрстке :)

Answer 2

[Анастасия Севко]

Все зависит от того блочится ли медиазапрос в приципе или нет.
Яндекс блочит все медиазапросы, поэтому часто делают просто универсальное "крупное" письмо, которое хорошо смотрится на десктопе и на мобилке.
Гугл и мейл.ру легко подстроить медиазапросами. Обычно использую инлайновые стили для десктопа, а для мобилки медиазапрос вместе с !important, повышая "важность" css-свойства

Comments

[Влад]

Так Яндекс не схавает !important.
И почему только инлайновые? У тебя в любом случае будут дивы и p. Они же блочные.

[Анастасия Севко]

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