I am whipping up a new email template for a client. I want it to be mobile friendly and look nice across as many email clients/browsers as possible. After looking online, MJML.io seems to be pretty popular and recommended when researching this subject.
I am going for a Bootstrap look for emails. I am using MJML for the first time. It is pretty nifty, I just wonder about the HTML it's generated.
I want to point out, that I KNOW HTML very well. I know what all the code is and does. I do not know 100% it's effect on the various email clients/browsers and how they handle rendering the email's HTML. So I can clean this code up all pretty and remove the extra inline styling, to make my OCD happy. However, I do not want to break anything in the responsiveness. ie: I don't want to remove the extra styles and break Outlook, or break Yahoo, etc.
Below is an example. There is a master table with another table inside. I get this. Then an entire table just for a blank line? Then we have a table with many TR's. I get that too. However, there is a p tag with a style defined, then a span inside of it with another style set. It seems redundant. Also, it defines the base font many, many times.
Can I simplify this by setting the font family, font size, font color, all in the parent table? OR is there some reason it is defined many times at the lowest element level? I look at this and I just want to set a base font in the body, the first div, or the master table, p for the text settings, then spans for when I need a different size, weight, color, ect.
I just don't know if this is part of the email client compatibility magic sauce, and I don't want to break it lol. The CSS, head, etc are all stock from MJML.io and I know that some clients strip out the head, meaning styling there will be ignored. So I didn't include it, just the part that matters below:
<body style="background: #bedae6;">
<div style="background-color:#bedae6;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" 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:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;background:#ffffff;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:20px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" 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:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<span style="display: block; font-size: 28px; font-weight: bold;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<strong>
<span style="font-size: 20px;">
<span style="color: rgb(81, 45, 11);">Hello {{NAME}},</span>
</span>
</strong>
</span>
</span>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<span style="font-size: 18px;">This is the body of my email.</span>
</span>
</p>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left">
<table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;" width="100%" border="0">
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:25px 30px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:0px;color:#FFFFFF;cursor:auto;padding:10px 25px;" align="center" valign="top" bgcolor="#8bb420">
<a href="https://mjml.io" style="text-decoration:none;line-height:100%;background:#8bb420;color:#FFFFFF;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:16px;font-weight:normal;text-transform:none;margin:0px;" target="_blank">
<strong>Click here to go now !</strong>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</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]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" 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:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</div>
</body>
--
I want to clean it up, starting with the body and inner div, by setting the font, background, padding, etc. one time...
<body style="background: #bedae6; color:#000000; font-family:'Open Sans', Ubuntu, Arial, sans-serif; font-size:11px; line-height:22px">
<div>
// ....
</div>
</body>
Another example, it sets font size to 0, then in a child element sets the real font size, declares the padding twice.. what the heck:
<tr>
<td style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</td>
</tr>
I'll doing my best to cover all of your concerns !
So basically some clients doesn't allow css inside some elements, like older Outlook and some Gmail variant. Like Padding only supported into P & table elements for Outlook. In top of that, some clients handle css inheritance really badly, so you have to ensure that the deepest node has the css instead of grouping it into a parent. And about the font-size 0 it's a trick to avoid space between block
That's why you have some css that look redundant, they are here to ensure that template look the same across all supported clients.
MJML has some default MJ Attributes (that you can override with mj-attributes inside mj-head ) that will translate into CSS attributes.
Like padding as you said, you can use both padding and padding-top/bottom/right/left, they can be use separately, but using one will not override the other.
If you want to clean that up you can "reset" default attributes with mj-attributes.
Other concern you have is the complexity of the generated HTML for a blank line.
You have multiple way to handle this with MJML ( empty section with, padding, empty section with column & mj-spacer, sometime even "raw" html with mj-raw ) it depends on the design you're working on.
Keeping an high level of compatiblity across device & clients require some sacrifice in term of readability for the output HTML. However we're doing our best to clean the output HTML because some client like Gmail have some size restriction on email
Related
I'm working with an HTML email template for a project. Everything works great on Gmail, Yahoo, and Outlook web email client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue. I used mso conditional statement to target this specific version. But it doesn't seem to work the margin-bottom that I added in and wrapped in mso statement didn't acknowledge. Any idea how to fix this?.
Email rendered in Gmail and Outlook
Here is my code:
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
<table cellpadding="10" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;width:560px" valign="top">
<table cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<td align="left" style="padding:0;Margin:0;Margin-bottom:8px;">
<![endif]-->
<!-- END -->
<td align="left" style="padding:0;Margin:0;">
<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You’re just one step away from being</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Your html is not valid with two after eachother on outlook. And as #jmona789 says, a td you make it on the side not above. Maybe this would work better with a new
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
<table cellpadding="10" cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;width:560px" valign="top">
<table cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;"
width="100%">
<tbody>
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<tr style="border-collapse:collapse">
<td height="8" style="height: 8px; font-size: 0px; line-height:0px">
</td>
</tr>
<![endif]-->
<!-- END -->
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;">
<p
style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">
You’re just one step away from being</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
You have done some typo here, You have made first letter capital of margin property, which is setting paragraph margin to 0. Make this margin property all lowercase. See typo error in code below:
<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You’re just one step away from being</p>
Replace all Margin to lowercase margin to fix this issue.
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 have am trying to figure out how to have 3 columns in a table row but hide the first or the last depending on whether it's mobile or desktop. My original thought was to add another TD to the bottom and hide one via css with media queries but that didn't seem to work very well.
Desktop view with alternating images
Mobile view which needs the picture with the lady with the graduation hat above the What is a beneficiary grey box.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center" valign="middle">
<td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"> <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" /> </td>
<td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
<h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
<div class="spacer" style="padding-top: 40px; display:none;"> </div>
Complete your beneficiary designation
</h2>
<p style="margin-bottom:0px;">Vea esta correo electrónico en español</p>
</td>
</tr>
</table>
There is a way to do this without relying on media queries, if you'd like total coverage in all email clients. Using the dir attribute along with max-width, you can specify which <td> appears first on wide.
Start by laying out each table 2-column row in a mobile-first manner: The image in the first <td> and the text in the second. Because of the source order, when these layers stack the image will always be on top on the text. Once the column widths exceed their max-width, they'll stack without needing media queries.
This solves mobile, but how do you make some images appear in the right column on desktop? That's where dir comes in. Adding dir=rtl at the parent <td> causes containing elements to run in reverse. So the last column appears first.
Here is a basic example:
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr"> <!-- Don't forget to switch dir to ltr here, or else text runs in reverse -->
Text Goes Here
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
If you layout each <tr> in a manner like this which the image in the first column, swapping the order of the columns in each row can be achieved by adding a dir=rtl to the parent <td>.
E-Mail-Clients are a bit tricky with their CSS.
You can order them the way you want them to be on mobile, and then add the following using for desktop:
position: relative;
left: -50%;
The remaining code depends on how you switch between two-column and one-column layout.
Most modern Mail programs support flexbox. With flexbox, you can re-order elements using the order property or by setting the direction to row-reverse.
I have a responsive email that i am struggling to make Outlook look correct.
I have the below html which should put the 2 tables next to each other but it is stacking them ontop of each other.
I am using...
<!--[if (gte mso 9)|(IE)]>
to target outlook but it seems to be ignoring this. It is also ignoring my max width call in the style tag.
Any idea why this is happening?
<tr>
<td class="innerpadding ">
<!--[if (gte mso 9)|(IE)]>
<table width="360" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col400" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<img src="Dog.png" alt="Dog Image" width="95%" border="0" style="width:95%;max-width:360px;"/>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="240" align="right" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col240" align="left" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<span style="font-family:Arial, Helvetica, sans-serif;font-size:38px;color:#f4911c;">Text Here</span>
<span style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#555557;display: block;font-style: italic;padding-top: 10px;line-height: 22px;">Text Here</span>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Try setting a width="" value on your container table. Also adding align="left" there might help. In the past I've found that Outlook has needed that even though it is the children elements that are aligning/floating.
If that doesn't work, just for testing, try adding a top padding and different bgcolor to your conditionally hidden tables to see if they are triggering or not. This will help diagnose if it is the conditional breaking or something else...
Both your tables are set to a width of 100%, try setting the style='width:100%' to 50% for each table and see if this works.
Also, what code is on the classes (col400 and col240) for both tables? This is likely to have an impact.
So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>, normally there are 5 of them:
<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
<tr valign="middle">
<td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >
<a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
<span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
</a>
</td>
</tr>
</table>
As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: http://i.imgur.com/a48ObB8.jpg
Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle" attribute on every tag I can think of, and several css vertical-align: middle;s as well. Is this no longer true? And if so, is there a work around of some sort?
I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.
The following will not middle-align the text:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
Link Text Here
</td>
</tr>
</table>
THIS WILL:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
Link Text Here
</td>
</tr>
</table>
Valign always worked for me, but I think for it to work in Outlook 2007 you have to set the height of your <td>. This always worked for me:
<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
<tr>
<td align="center" valign="middle" bgcolor="#b2382a" height="35">
<span style="color:#FFFFFF;
font-family: 'Lucida Grande', Arial, sans-serif;
font-size:12px;
text-transform:uppercase;">
Link Text Here
</span>
</td>
</tr>
</table>
Short answer: Use padding-top, and padding-bottom with a negative value.
Long answer: If you want to write a cross-compatible email don't use valign at all. The problem you're having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.
Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement you're looking for.
I have this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This works on most of email clients, but not on Outlook version greater than 2010. To make it work correctly just add a conditional comment with a spacer like this:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!-- In this case is a spacer of 40px -->
<!--[if (gt mso 14)]>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<tr>
<td width="600" valign="middle">
Content
</td>
</tr>
</table>
This is because of the align="right" set on the first table. Removing this should fix the issue. Other option is to manually add spacing before the first <tr>.
<tr><td height="30> </td></tr>