I have a table element which I'm going to send as an email.
I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.
I would like my table to have 100% width upto 600px.
One solution would be do with fixed settings, and have media queries.
#media screen and (max-width: 600px) {
table[class="responsive-table"] {
width: 100% !important;
}
}
This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.
So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.
So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.
Is there any way I can make the look ok in both? Is there any hack for this?
Media queries doesn't work in Gmail App for Android and iPhone.
This can be done constructing basic layout shown below.
Tested in 60+ configurations, including:
Outlooks 03/07/10/11/13
iPhone 5 iOS7
iPhone 5/6 iOS8
Gmail App iPhone & Android
Android 4.4.4
<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
<tr>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
<!-- in the middle cell you set your max-width -->
<!-- notice double declaration for yahoo in html attribute -->
<td align="center" width="600" style="width: 600px;">
<!-- this table scales up to parent cell -->
<table align="center" border="0" width="100%" style="width: 100%;">
<tr>
<td align="center">
<!-- content -->
</td>
</tr>
</table>
</td>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
</tr>
</table>
Use conditional code with fluid layout. I also would assign a class or ID to your container and have it as a defined width (e.g.600px) in style block in head with media queries pushing back to percent after dropping below that width. This is for Apple mail and a couple other clients that do not respect max-width.
E.g.
<head><style> #outlook {width:600px;}</style></head>
<body>
<!--[if (mso) | (IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style=" max-width: 600px; border-collapse:collapse;" id="outlook">
<tr>
<td align="center"> YOUR CONTENT HERE</td>
</tr>
</table>
<!--[if (mso) | (IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
Related
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.
Instead, I'm doing this:
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.
If you want your content aligned left instead of centered, just leave out the first empty cell.
Example:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
http://jsfiddle.net/YcwM7/
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
The short answer: no.
The long answer:
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
In the head:
<style type="text/css">
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
This is the solution that worked for me
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to #philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
I have an email that is working properly in any other computer or mobile display, except the Gmail app and Gmail in laptop. 2 issues :
I added a #media code in the css in order for the images to be responsive when viewed on mobile (width:100%), but gmail app (tested both in a samsung phone and apple phone) seems to be ignoring it. So my images appear smaller, with the fixed width specified for big screens.
Here is the result : http://screencast.com/t/nm3jyc47K. The expected result, is to have the images filling 100% of the table (almost all the screen if we exclude the spacers), and obviously centered.
On the Gmail laptop website, my spacers between the tables seems to be ignored, therefore inline elements are touching each other. Here is the result : http://screencast.com/t/3D7H0Fqly. The expected result is a 24px spacer in between. (PD : Don't bother about the size, I was doing some testing, the size on desktop appear properly)
Here is the HTML code of the images, 3 images and 2 spacers in between.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
And now the css code, in the head part of the email :
<style type="text/css">
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff}
* {-webkit-font-smoothing:antialiased}
.ExternalClass * {line-height:100%}
table td {border-collapse:collapse}
.wlf {width:600px}
.w-420 {width:420px}
.w-170 {width:170px}
.w-120 {width:120px}
.w-24 {width:24px}
.w-15 {width:15px}
#media only screen and (max-width:590px) {
.full-width {width:100% !important}
.m-width {width:100% !important;max-width:100% !important;float:none !important}
.m-block {display:block}
.m-none {display:none}
.m-img-ft {width:100% !important;height:auto !important;max-width:250px !important}
div {box-sizing:border-box !important}
}
</style>
And again, I have no issue whatsoever with all the other email programs. Any idea what may be wrong in order to fixed these both issues ? (Without compromising the display in the others ?)
Thanks
Unfortunately you found the reason that most HTML email developers have very little hair and a slight twitch in their left eye. There is unfortunately no 'standard' for HTML for email across each email client, so you get a great diversity in not just what tags/styles are accepted, but also on what exactly each of those will do.
For your issue, the reason it seems to be ignoring it is because it is stripping your style tag out completely. (ref) Gmail app (on desktop and mobile) pretty much strips everything out of the head and Gmail web client has very limited 'hacky' support on stylesheets.
A great resource to see what is accepted by the major email clients: CampaignMonitor/CSS
Keep in mind, when you fix it on Gmail, it will likely wind up breaking it on a different email client. I would recommend getting an acid testing service like Email on Acid or Litmus, etc.
You will likely need to start designing for Gmail App first and then using CSS / 'Ghost tables' or MSO conditionals to make it work for desktop.
Sample places for Fluid Responsive templates:
http://tedgoas.github.io/Cerberus/
https://www.emailonacid.com/blog/article/email-marketing/our-gift-to-you-a-free-fluid-hybrid-email-template
http://labs.actionrocket.co/the-hybrid-coding-approach-2
Gmail doesn't support the <style> tag, so you have to inline all CSS. All other email clients support the <style> tag, so if it weren't for Gmail we'd be able to write html email like a web page. It's safest to inline CSS by hand, though there are a few CSS inlining tools that can speed things up.
Regarding spacers, something like this works across email clients:
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="40" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
Note: I wrote the first sample template referenced in Gortonington's answer (hello!) and can vouch that all CSS and spacers within that repo work in Gmail / Gmail app.
<table width="100%;">
<tr>
<td> <!--Right Space (Variable Width)--> </td>
<td> <!--content (Width Set - High Priority)--> </td>
<td> <!--Left Space (Variable Width --> </td>
</tr>
</table>
I am having a problem with coding emails where I want margins to be different based on screen size. It works fine with media queries but i've realized that there are some email clients that don't support them. I've also tried using width percentages but I want the content to be about 90% on a mobile sized screen and about 50% on a larger screen. I am using tables and empty table cells to create my margins and can only use inline styling.
I want to know if there is a way to set css properties so that when the screen width decreases the content cell has the highest priority for it's size and the left and right 'margins' will be the ones to decrease in width.
This sounds like a use case for max-width. You can set the default width of the element to 90%, but define a max width that is half of your total desktop display width. You would also need to include MSO conditional due to Outlook's lack of support for this attribute. CSS (for HTML email) reference guide
See below:
<!--[if (gte mso 9) | (IE)]><table align="center" width="640"><tr><td align="center"><![endif]-->
<table align="center" width="100%" style="max-width:640px;">
<tr>
<td align="center">
<!--[if (gte mso 9) | (IE)]><table width="320" align="center"><tr><td align="center"><![endif]-->
<table width="90%" align="center" style="max-width:320px;">
<tr>
<td align="center">This content will be at 90% width of the container up to 320px wide, where it will stop</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->
As my experience,email clients are allows only inline-style.
According to your requirement,you need to set below the codes,
<div><!--email client body-->
<table width="650px;padding:50px;"><!--you can give padding not only margin properties of CSS-->
<table style="width:100%">
<!--content-->
<table style="padding:20px"></table><!--Again added to padding instead of margin--->
</table>
</table>
</div>
Note: Email mobile application only support the swing the contents in email.If you open email in browser not swing the all contends.
I have been working in an html email template. And I am almost at the end of my work. The template looks pretty good in mayor email clients. But there is a problem with Outlook 2007/2010/2013. Those three guys do not respect the max width of my template. I do not really know why this happens.
Do you have any idea?
Any advice will be appreciated. Thank you.
<body style="margin:0; font-size:13px; font-family:'Trebuchet MS', Helvetica, Verdana, Arial;" bgcolor="#bb9dd8">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#bb9dd8">
<!-- //Begin Main Container\\ -->
<table class="mainContainer" style="margin-top:20px;" width="640px" align="center" cellspacing="0" cellpadding="0" border="0">
<!-- //From here begin header and the layout structure\\ -->
That was the piece of code where the max width is defined. Thank you.
You are correct, PC versions of Outlook 2007+ do not support max-widths. You can take one of two approaches here to achieve a fluid width, though.
Use some Outlook conditional code to establish a fixed width table. This will be ignored by other email clients.
<table width="100%">
<tr>
<td>
<!--[if gte mso 9]>
<table width="640" style="width:640px">
<tr>
<td>
<![endif]-->
Put main content table here
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Another approach involves using a media query, and a 3 column table. The outer columns will have non-breaking spaces, and the middle will be set to your Outlook width and contain your main table.
<style>
#media only screen and (min-width: 640px) {
.maxW {width: 640px !important;}
}
</style>
<table align="center" width="100%" >
<tr>
<td> </td>
<td align="center" valign="top" width="640" style="width:640px" >
<table align="center" style="margin: auto; max-width: 640px" width="100%" class="maxW">
<tr>
<td>Put your header image here</td>
just remove px from width and you can try using width="640" instead of width="640px"
Either wrap in a defined table in Mso conditional or set an ID with a defined width in style sheet that changes back to percent in media queries. Outlook does not respect max-width. See here for CSS compatability.
Also - you do not put the px when defining the HTML width. That is only in CSS. E.g. Width="640" not width="640px"
I'm trying to lay out a responsive email template to work across all major clients, and I'm just about there, but since Outlook doesn't support max-width, and I have all elements set to width: 100%, it's putting my content all the way to the left since it's left-aligned. I can center the header and footer with align:center or margin: 0 auto.
What can I do to prevent my content from going all the way to the left without giving anything a fixed width or using max-width (which I am using, but Outlook just ignores)?
Sounds like you are referring more to a "fluid" layout (basing off percentage) rather than a "responsive" one (where you would use media queries to specify styles based on width of display device).
Since setting a pixel value for the margin-left wouldn't make a lot of sense, why not set the margin-left to a percentage value?
margin-left: 4%;
Otherwise, you might want to take a look at the following resource found on MailChimp regarding media queries.
http://templates.mailchimp.com/development/media-queries/
Try this and use media queries to adjust the width percentages at different screen sizes if needed. Just keep in mind that your media queries won't take effect in these email clients.
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10%">
</td>
<td align="left" width="80%" bgcolor="#FFFFFF">
<br>content<br>...<br>
</td>
<td width="10%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>