Hi @Rod_Pestell,
This can be a bit tricky, depending on the complexity. Personally I don’t like Word, as it might mess with some of the formatting, the same reason I avoid Excel for CSV files.
For the development of the template, I use a lot of sources, but the html editor from w3schools is easy to use:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor
There might be other and better options out there, but I just never had the need to, as this one works for me.
I would normally develop the template, then test in a mail (as you never know..) and then store in a library, to make sure I can easily use it. In most cases it will require variants, depending on the need, but that is easy to handle.
Hi @JesperAndersen
Thanks for the reply. let me post the start of our HTML template we currently have. It shows a lot of conditional styles, eg. if content is Edge or if gte mso 9. This is a template that over time no doubt needs to be updated and maintained. So working with an html editor alone won’t have this information and understanding. There are websites such as https://email2go.io/features/free-html-email-template-builder/ out there that provide a service that can test email templates and no doubt manage all these conditional styles. It’s this that I am after advice on.
Email clients, still from my experience handle the layout of objects and elements differently, especially Outlook. eg. a centre aligned table won’t centre in outlook so the work around is to put extra columns on the side and adjust to the same proportional size eg. 20%, 60%, 20%.
Thanks
Rod Pstell
<p>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
</p>
<p>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</p>
<!--<!gendif]-->
<!--outlook DPI fix-->
<!--iif gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><!rendif]-->
<!--outlook DPI fix ends-->
<style type="text/css">
atx-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
/* Allow smoother rendering of resized image in Internet Explorer */
-ms-interpolation-mode: bicubic;
}
/* styles for mobile view */
@media all and (max-width: 600px) {
/* reset styles*/
*yid]#wrapper+table,
*tclass].container,
*aclass].nav {
min-width: 0 !important;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* nav styles*/
*yid]#mobile-label {
background-color: ;
cursor: pointer;
display: block !important;
margin: 0 auto;
padding: 22px 18px;
-webkit-tap-highlight-color: transparent;
width: 84px;
}
Here is another format to try compatible with mobile and email
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
</style>
<div style="display:none; font-size:1px; color:#333333; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">Your company key message to be displayed under subject line </div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<div style="overflow-x:auto;">
<table align="center" class="BackgroundTable" style="background-color:#f5f5f5;width:100%;">
<tbody>
<tr>
<td style="border-color: rgb(245, 245, 245);">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 650px; background-color: #FFFFFF;">
<tbody>
<tr>
<td colspan="8" style="padding: 10px; font-size: 16px; line-height: 20.8px; font-family: Arial, sans-serif; color: rgb(0, 0, 0);">Dear ${e://Field/FirstName},<br />
<br />
EMAIL BODY MESSAGE <span style="font-size:11pt"><span style="font-family:Calibri,sans-serif"><span style="font-size:12.0pt"><span style="font-family:"Arial",sans-serif"><span style="color:black"> EMAIL BODY MESSAGE EMAIL BODY MESSAGE </span></span></span></span></span><strong>${e://Field/PREV_PPLANS}</strong>. (Time needed : 2 min)<br />
<br />
EMAIL BODY MESSAGE <strong>begin</strong> EMAIL BODY MESSAGE <strong>selecting</strong> EMAIL BODY MESSAGE <strong>(0 to 10)</strong> listed below:<br />
</td>
</tr>
<tr>
<td colspan="8" style="padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; font-size: 16px; mso-line-height-rule: exactly; line-height: 20.8px; font-family: Arial, sans-serif; color:#000000; text-align: left">
<table align="center" border="0" cellpadding="0" style="background-color:#F2F4F8;border:1px solid #D9DBDE;border-radius:3px;font-family:arial,sans-serif;max-width:600px;">
<tbody>
<tr>
<td style="font-size:15px;padding:12px 12px 12px 12px;">${q://QID14/QuestionText}</td>
</tr>
<tr>
<td style="padding:0 16px 4px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#141414;font-size:13px;" width="100%">
<tbody>
<tr>
<td align="left">${q://QID14/ColumnLabel/0}</td>
<td align="right">${q://QID14/ColumnLabel/1}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 16px 16px 16px;">
<table align="center" border="0" cellpadding="0" cellspacing="5" style="text-align:center;" width="100%">
<tbody>
<tr>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/0}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/0}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/1}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/1}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/2}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/2}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/3}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/3}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/4}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/4}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/5}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/5}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/6}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/6}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/7}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/7}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/8}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/8}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/9}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/9}</a></td>
<td style="width:4px;height:40px"> </td>
<td style="font-size:25px;width:25px;border-radius:3px;background:#FFFFFF;border:2px solid #002856;"><a href="${l://ChoiceLink/QID14/10}" style="display:block;text-decoration:none;color:#0000EE;background:#FFFFFF;line-height:20px;border-radius:3px;white-space:nowrap;">${q://QID14/ChoiceDescription/10}</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> EMAIL BODY MESSAGE <br />
<br />
Thanks,<br />
<br />
<span style="color:#3e3e3e;"><strong> EMAIL BODY MESSAGE </strong></span><br />
<br />
<br />
<span style="font-size:13px;">Note: If the above click on ratings does not work, you can use this ${l://SurveyLink?d=short survey link} for a quick feedback.</span></p>
</td>
</tr>
<tr>
<td style="padding: 10px; background-color: rgb(245, 245, 245); vertical-align: middle; text-align: center; line-height: 1px; width: 25%;"><a href="${l://OptOutURL}&OptOut=dir"><font color="#3e3e3e" face="Arial, Helvetica, sans-serif" size="1"><u>Unsubscribe</u></font></a></td>
<td style="padding: 10px;background-color: rgb(245, 245, 245); vertical-align: middle; text-align: center; font-size: 12px; color: rgb(0, 0, 0); line-height: 1px; font-family: Arial, sans-serif; width: 25%;"><u><span style="font-family:Arial,Helvetica,sans-serif;"><span style="font-size:9px;"><a href="https://google.com"><span style="color:#3e3e3e;">Preferences</span></a></span></span></u></td>
<td style="padding: 10px;background-color: rgb(245, 245, 245); vertical-align: middle; text-align: center; font-size: 12px; color: rgb(0, 0, 0); line-height: 1px; font-family: Arial, sans-serif; width: 25%;"><u><span style="font-size:9px;"><a href="https://google.com "><span style="color:#3e3e3e;">Privac</span></a>y</span></u></td>
<td colspan="4" style="padding: 10px;border-style: none;background-color: rgb(245, 245, 245); vertical-align: middle; text-align: center; font-size: 12px; color: rgb(0, 0, 0); line-height: 1px; font-family: Arial, sans-serif; width: 25%;"><u><span style="font-size:9px;"><a href="https://google.com "><span style="color:#3e3e3e;">Contact</span></a></span></u></td>
</tr>
<tr>
<td colspan="8" style="padding: 10px 10px 10px; background-color: rgb(245, 245, 245); vertical-align: middle; text-align: center; font-size: 9px; color: rgb(0, 0, 0);line-height: 10px; font-family: Arial, sans-serif; width: 100%; border-color: rgb(245, 245, 245);"><span style="font-size:7.0pt"><span style="font-family:"Arial",sans-serif"><span style="color:#3e3e3e">Please note that by unsubscribing, you will no longer receive similar short feedback emails in the future, but you will continue to receive communications relating to </span></span></span><span style="font-size:9px;"><a href="https://google.com"><span style="color:#3e3e3e;">COMPANY NAME</span></a><span style="color:#3e3e3e;">, ADDRESS USA</span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
