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

Побывав на конференции Litmus #TEDC14, мы особенно озаботились проблемами адаптивной верстки и её поддержкой почтовыми клиентами. Кроме того, что ни один из них не поддерживают @media конструкции. Но самые передовые не просто не поддерживают, а игнорируют саму строчку содержащую @media, а потом успешно применяют всё, что под ней.

Во время тестирования адаптивной вёрстки писем Gold.ua в клиентах и на разных устройствах мы заметили интересную особенность — ukr.net отображает письмо на ПК, как в мобильной версии.

В остальных почтовиках с этой же email рассылкой оказалось всё нормально. Например в Gmail, хотя он тоже не поддерживает @media query.

Получается ukr.net применяет для обычного письма все стили мобильной верстки с тегом, потому что там включается атрибут important.

За решением этого вопроса я обратился напрямую к ukr.net и получил от них официальный ответ:

Тег @media вырезается, но валидное его содержимое остается. В других системах вырезается и тег @media, и его содержимое. Как правило, указанный тег не есть разрешенным (условно "безопасным"), поэтому он вырезается основными почтовыми системами, и его использование в целом - не целесообразно

На мои аргументы что «такое поведение сильно затрудняет чтение писем, отображая на широком экране письмо рассчитанное на маленький экран смартфона и что гораздо правильнее удалять и содержимое тега или поддержать стандарты @media query» ребята сказали, что никаких работ и изменений по этому поводу делать не собираются. Также мне не предложили никакого пути решения этой проблемы. Странно, но понятно.

Вообще адаптивный дизайн — это для пользователей мобильных Apple устройств. Потому что мобильные gmail клиенты тоже не хотят пока нормально поддерживать @media query.

Это означает, что если у ваших пользователей телефонов iPhone меньше, чем пользователей ukr.net, то надо ещё подумать поможет вам адаптивный дизайн или больше навредит. Как решение, я вижу только сегментировать по домену и отправлять на ukr.net неадаптивные письма.

P. S. Очень хочется верить, что официальный ответ от ukr.net это просто субъективное мнение оператора службы поддержки. Потому что выглядит он очень и очень странно :(