Ответственный шаблон электронной почты

Question

Я работаю над шаблоном электронной почты, в котором я хочу создать three columns grid structure для рабочего стола и single column structure для мобильных устройств. Я не хочу использовать медиа-запрос, потому что он не поддерживается в устройствах Android. Есть ли способ достичь этого?

Answer 1

Anshul, Запросы на средства массовой информации поддерживаются на Android до тех пор, пока вы используете стопку таблиц, а не стек TD. Подробнее об этом здесь: https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

Другого варианта, который будет заставить его работать везде, является использование жидкости гибридной конструкции: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Answer 2

Вы можете посмотреть в шаблон гибридной почты. Вы можете просмотреть demo here или получить на примере source code

Этот метод использует ghost table, который исправляет проблему колонки в рабочем столе Outlook.

Answer 3

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

я написал и поддерживать Cerberus templates; Hybrid один достигает того, о чем вы просили.

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

Этот код в основном построен по адресу Fabio Carneiro's hybrid code. Его код содержит (относительно) простой 3 column fluid scaffold, который вам может быть полезен.