Responsive email template

Question

I am working on a email template in which I wants to create a three columns grid structure for desktop and single column structure for mobile devices, I don't want to use the media query because it is not supported in android devices. Is there any way to achieve this ?

Answer 1

Anshul, Media queries are supported on Android as long as you use table stacking and not TD stacking. More on that here: https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

Your other option, which will make it work everywhere, is to use fluid-hybrid design: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Answer 2

You can look into the hybrid email template. You can view a demo here or get the example source code

This method uses the ghost table which fixes the column issue in Outlook desktop.

Answer 3

as others have mentioned you should look into the hybrid or spongy method of email design that uses min/max-widths instead of media queries to reconfigure the layout.

I wrote and maintain the Cerberus templates; the Hybrid one achieves what you asked about.

This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it.

This code is largely built upon Fabio Carneiro's hybrid code. His code contains a (relatively) simple 3 column fluid scaffold, which you might be helpful.