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