HTML-ответный адрес электронной почты: макет столбца для рабочего стола/планшета на 2 колонки для телефона

Question

Попытка создать отзывчивый HTML-адрес электронной почты с раскладкой из трех столбцов (несколько строк) для рабочего стола/планшета и изменениями в 2 столбца (несколько строк) для отображения телефона с использованием таблиц (<table><tr><td>). Я только нашел решения в Интернете, которые переходят от многоуровневого макета большого устройства к макету небольшого устройства с одним столбцом, используя в основном таблицы. Какова наилучшая стратегия в том, как закодировать этот тип макета? Я пробовал ссылки на ресурсы в основном из Mailchimp, Campaign Monitor и Litmus.

ниже код идет от 3-х колонок (большой экран) 1 колонку (телефон дисплей)

Ссылка на код: https://github.com/alexwang949/html-responsive-email/blob/master/tables.html

Answer 1

подход вы бы, вероятно, нужно принять это то, что становится известным как «гибридная» электронная почта.

Основная идея состоит в том, чтобы сначала создать мобильный телефон, поскольку все более популярный клиент Gmail от Android не поддерживает тег стиля (и, следовательно, медиа-запросы) вообще. Затем используйте широко поддерживаемый современный CSS для создания столбцов для клиентов электронной почты, клиентов Thunderbird и Apple. Наконец, используйте комментарии, специфичные для Outlook, для создания «столбцов-призраков» (например), чтобы выплескивать клиентов Outlook в форму. Примечание: этот шаг работает только в том случае, если ваш почтовый провайдер не отключает комментарии при отправке.

Это длительный процесс, требующий некоторой стратегии, но в конечном итоге этот многоуровневый подход даст результаты, которые являются именем электронной почты.

Там фантастическая статья об этом здесь: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919