I've built a responsive email which works in the majority of email clients
However in Outlook the parent table that makes the content 600 wide is not being respected - resulting in a broken layout.
>Image of broken email in outlook
I'm really stuck . Does anyone know why this might be happening?
JS Fiddle of my code --> https://jsfiddle.net/2m05tzf5/
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<td>
<center>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;" class="emailwrapto100pc" id="content">
Try using CSS table{table-layout: fixed; width: 600px;}. Keep in mind that not all attributes and CSS rules are supported in all e-mail parsers
Related
I’m customizing the Opt-in confirmation email template in Form builder Mailchimp for a project.
When I sent a test everything looks great in Gmail, Yahoo, and Outlook web mail client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue.
The cause of the problem was the “Confirm Subscription link/button” from the form builder, that generates the <br> tag after it, which outlook desktop app didn’t ignore, unlike other email clients.
To fix the issue, I tried to add CSS style for <br> tag and display it none but it didn’t seem to work.
I also used mso conditional statement to target this specific version of outlook desktop app. I added padding-bottom in <td> of a first text and place it inside mso, to have an equal spaces. But unluckily, outlook desktop still didn’t acknowledged it. I tried many things adding css, margin, etc., nothing works. Any idea how to fix this? It seems that I did something wrong with mso.
I have also attached the sample test email I made in Gmail, Outlook.com and Outlook desktop app, and the default template of subscription in form builder for you to see. See screenshot here
Here is my code:
I have to split my HTML into two parts to make the “Confirm subscription link” in the middle. Since this link was unable to remove.
https://codepen.io/christine-tine27/pen/QWyeEGz
<!-- PART 1.HTML -->
<div class="es-wrapper-color" style="background-color:#FFFFFF">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<td align="left" style="padding-bottom:8px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
<![endif]-->
<!-- END -->
<td align="left" style="padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0">
<p style="Margin:0;padding:0 0 0px 0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify">You’re just one step away</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- PART 2.HTML -->
<div class="es-wrapper-color" style="background-color:#FFFFFF">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0">
<p style="Margin:0;padding:0px 0px 0px 0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify"> Upon confirmation, you'll receive an email with an exclusive 10% off food & beverage code which can be redeemed during your next stay.<br><br>Warmly,<br>The </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
To get Outlook to display a gap, it needs to render something, such as text. We can use the non-breaking space. The key attributes needed that will determine the height are line-height and font-size.
In addition, since this is a row, you should insert a <tr>, and thus it should be before the other <tr>. Although I don't quite understand what you are trying to do here.
<!--[if gte mso 9]>
<tr>
<td align="left" style="padding:0;margin:0;mso-line-height-rule:exactly;line-height:20px;font-size:20px;"> </td>
</tr>
<![endif]-->
The other thing to note is that Outlook (desktops, at least) strip anything with a "!important" tag on it.
But I'm not sure why this doesn't work in the first place - cross-email-compatible emails can achieve this with padding and <br>'s no problems.
I'm currently trying to build an if / else for my html email layout to include different table tags. This is what I'm trying:
<!--[if mso]>
<table class="content-table" role="presentation" cellpadding="0" cellspacing="45" align="center" border="0">
<![endif]-->
<!--[if !mso]> <!---->
<table class="content-table" role="presentation" cellpadding="0" cellspacing="0" align="center" border="0">
<!-- <![endif]-->
</table>
So I'm trying to start my table with a different beginn tag if the mail is opened in outlook. But this is not working. Whats wrong?
This is not a duplicate!
This is an example of how you show and hide in Outlook. If you're viewing this in Outlook, you'll see the word "Outlook". If you view it in a modern email client, you see the words "Modern Email".
https://jsfiddle.net/wallyglenn/5hruzos5/1/
<table>
<tr>
<td>
<!--[if !mso]><!-- -->
<img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
<![endif]-->
</td>
</tr>
</table>
Good luck.
I haven't found in the Internet any solution to make a RWD (Responsive Web Design) breakpoints columns for html emails where after braking two columns next to each other into two centered one under the other when a screen has small width, so using information found elsewhere i had to try to figure out how to do something working best. Below is the code which work for the really old e-mail clients and Outlook 2007+ and windows 10 e-mail client - the rest can be done using styles and media query. The breakpoint. Of course for outlook 2007+ a column is going to always have fixed width, but the columns break down when screen width is about less than 600 px.
Is this the best solution available? My goal is basically not to ask this question but to share solution to the public. But i am going to ask a question in another topic about vertical alignment of below example when the columns have different heights (yes the code below is lacking one little thing yet: columns are aligned in Outlook 2007+ to the bottom, not the top of the line). Two columns with pictures example next to each other (basically just paste, please, your > 600px html e-mail and send to yourself):
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
Of course - you can use table align="left" two get two tables next to each other but after brakipoint they are one under another but aligned left not center - so what is above work the best right now for me. Let me remind the question. Is the above example the best RWD solution for html e-mails?
Note: email template is working fine with browser,when attach the email template in outlook window ,img src attribute image gets displayed but below code is not working.
Today i have faced an issue with an email template in html and css, i have send the mailer template from outlook , but the backgroud:url("https://image.flaticon.com/teams/new/1-freepik.jpg") inside the table.
This is the below piece of code have problem.
I have tried to insert the image in table tag ,still image is not displayed.
Method 1:
<table background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-size:cover;" height="380">
Method 2:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;" height="380">
Method 3:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:https://image.flaticon.com/teams/new/1-freepik.jpg; background-size:cover;" height="380">
Nothing works
expect img src="tag"
Email templates ca be tricky. I would advice you to add the background image on a TD tag and not a Table, like so:
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380">
<tr>
<td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;"></td>
</tr>
</table>
Inside the TD add another table with the rest of the content of your template.
<table class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380">
<tr>
<td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Email content in here </td>
</tr>
</table>
</td>
</tr>
</table>
If, for some reason, this doesn't work for you, I advise you to visit backgrounds.cm and see their v:fill code for background images in tables that looks something like this:
<td background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" bgcolor="#7bceeb" width="225" height="225" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:225px;height:225px;">
<v:fill type="tile" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
I've done a newsletter with mjml framework.
I have to change the header image on mobile devices, but how?
The framework is very helpful for doing bulletproof newletters, but doesn't support different images for different viewport.
This is the header code:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:900px;background:#29c5f8;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:900px;">
<a href="http://www.link.com" target="_blank">
<img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
Thanks for your support
I would say there are three options here:
Have the two images in your HTML and display only the right one depending on the device used, using media queries (relying especially on the display property, plus conditional comments for Outlook)
Wrap your desktop image tag img in a span. On mobile, you'll use media queries to hide this desktop image and add a background image to the span tag with the background-url property, which will "replace" the desktop image you're hiding
Have only one image tag in your HTML, pointing to an image hosted on a server and send back the right image depending on the device on which the email is opened (using the User-Agent)
Unfortunately, there are drawbacks with all of those:
While displaying mobile content on mobile devices only is totally feasible, hiding content is way trickier and might not work, so you could end up with both images displayed. Also, media queries are not supported everywhere.
Background images are not supported by all email clients, so it won't work everywhere. Again, media queries are not supported everywhere.
You need to work on a script. However, this shouldn't be too hard using a package such as https://www.npmjs.com/package/ua-parser
In terms of compatibility, the third option is definitely the best one. Is it an option for you?
MJML documentation allows for changing an image based on the viewport for mj-images using the attribute srcset.
srcset url & width enables to set a different image source based on the viewport
however in my tests i've been unable to get them to work.
I'd suggest using media queries and a css-class.