How to create Responsive Email Template?
I can build responsive layout using media-query but these styles we can write only in external/internal CSS. Email template we cannot use DIV and external/internal CSS. How can i build responsive email template.
Thanks, Shanid
Using media queries in an HTML email is not a very good solution to developing a responsive HTML email because the vast majority of your audience is not going to see it the way you intend.
Gmail will not preserve any CSS in the head of an html email. This is where media queries are, so .. won't work.
Android supports media queries but it's buggy at best.
The best way to develop a pseudo-responsive HTML email is to build a fluid layout HTML email. Design your email with (for simplicity) a single column layout. You can develop a fluid layout with a multi-column layout but it can get pretty complicated quick.
Design your layout as normal, inline all your styling and using depreciated HTML attributes rather than css styling.. doesn't matter if it's inline, CSS still won't play well in HTML emails. Use it sparingly, don't use it at all if you can avoid it.
Do not assign height to your elements and assign width only in percentage values. Therefore allowing the device displaying the email to determine the best width to display based on the percentage values rather than specific pixel sizes.
<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>
Here's a good example of a fluid layout: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
You need to understand that responsive emails, while possible, can't work on every mail client. As an example, Gmail strips all your head tag from the email, so no media queries are allowed, therefore no responsiveness. From what I've tested, responsive emails can be displayed in Outlook, Apple Mail, and a few others with standard media queries. For those, you'd have to use the typical breakpoints and apply them to trs or tds. Now, that can be tricky. You have to make sure it won't break your table layout so you really need to plan in advance what will change in your layout.
If you want it to work mostly on everything, I'd suggest you use fluid layouts using % widths. But if you really want some web responsiveness, it's the same as any responsive website. Just be aware that it will not work everywhere. Like this:
@media (max-width:680px) {
.hide { display:none; }
.main { width:440px }
.header { width:440px; }
.header-img { width:440px }
.footer { width:440px; }
.footer-size { width:440px; }
}
@media (max-width:440px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.footer { display:none !important; }
.footer-size { width:100% }
}
@media (max-width:240px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.button { width:100%; height:auto; }
.footer { display:none !important; }
.footer-size { width:100% }
}
(That's just some code from an email campaign I worked on, btw)
You can use media queries for common mailclients. Webclients rely heavily on inline css. Work with as much percentages as possible on your tables (100%) and max widths for tables that may not scale bigger than a certain amount of pixels.
Nested tables within a 100% wrapper table always stack inherited.
U should learn @media queries first. Is't something for write here because of many info.
