How can I solve the Outlook problem in my custom html template. What I currently have:
<table cellpadding="0" cellspacing="0" width="700" align="center">
<tr>
<td style="width:100%;display:block;" align="left">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:170px;" strokecolor="#ce162e" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<singleline label='Button Title'>Read More</singleline>
</center>
</v:rect>
<![endif]-->
<a href="https://" style="border:2px solid red;text-decoration:none;">
<singleline label="Button Title">Read More</singleline>
</a></td>
</tr>
</table>
If an outlook mail client opens the mail, I can see the CTA, but if I edit the CTA text in the editor in Campaign Monitor, the changes only apply to non-Outlook mail clients. Is there a way to solve that problem?
Many thanks in advance.
Bests,
Yanick
Since you are using custom email template, you can replace your VML button with the one below. This button will work the same across all email clients. It will eliminate the issue you are facing in campaign monitor as well.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> Call to action </td>
</tr>
</table>
Related
I have created an email template that is tested to work properly on desktop clients like gmail/yahoo/outlook and also tested correct responsive behavior on mobile gmail app. I am using Android/Galaxy S4.
The responsive styles are not effective on yahoo mobile app. Infact, it is not reading the CSS rules from 'style'. Though, desktop chrome set to mobile views (using Inspect -> toggle device toolbar) and logging in to yahoo mail shows the email reading the responsive styles.
Question: Does yahoo mobile app not support responsiveness? Or, does it particularly need additional hacks?
Update:
I tried moving the CSS styles from head to body. It then reads the styles. But having styles in the body may not to be a good idea, gmail mobile app now ignores it.
Here is the email code that I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<style>
body {
mso-line-height-rule:exactly;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt}
table {
border-collapse: collapse;
border-spacing: 0;margin: 0 auto}
img, a img {
border:0 none;
height: auto;
line-height: 100%;
outline: none;
-ms-interpolation-mode: bicubic}
a[x-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}
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important}
.a6S {
display:none !important;
opacity:0.01 !important}
img.g-img + div {
display:none !important}
.button-link {
text-decoration: none !important}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.ios-gm-fix {
min-width: 375px !important;}
}
</style>
<style>
#email-container {
border:1px solid #CCC;
border-radius:3px;
border-collapse:separate}
.desktop-view {color:blue}
.mobile-view {color:#444}
#media only screen and (max-width: 480px) {
#email-container-wrap {
width:100% !important;
padding:0 !important}
#email-container {
border:none;border-radius:0}
.desktop-view {color:#444}
.mobile-view {color:blue}
#email-contents {
padding:15px 22px !important;
font-size:16px!important}
}
</style>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%">
<center style="width=100%;background=#ffffff">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%">
<div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-header">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-body">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" width="100%">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px">
<span>On Desktop, there will be a border and gray background on all sides.</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px">
<span>On Mobile, the border and background will not exist.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-footer">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</center>
</body>
</html>
On Android, Yahoo only supports <style> tags in the <body>, not in the <head>. But Gmail only supports <style> tags in the <head>, not in the <body>. C'est la vie!
Since we're only dealing with ~20 lines of code (assuming the 2nd <style> tag in your example), you might try duplicating this <style> tag so it appears in both the <head> and <body>. I don't know for certain if this will work, but it's worth testing.
Yahoo! Mail app for Android removes the first head element, causing media queries in the element to have no chance of being applied. A workaround is adding an empty head element before the original one so that the app will only remove the empty one.
Please see this article for details: Double Head trick in Yahoo Mail App for Android
I have created a custom email template and the content is below :
...
<table id="Table_01" width="70%" border="0" cellpadding="0" cellspacing="0" style=" backgroud:red;border-collapse: collapse;border-spacing: 0;">
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/01.png" alt="">
</td>
</tr>
<tr>
<td valign="top">
<table id="Table_02" width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;border-spacing: 0;">
<tr>
<td>
<img style="display:block; border: 0px;width:100%;" src="images/02_01.png" alt="">
</td>
<td >
<img style="display:block; border: 0px;width:100%;" src="images/02_03.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/03.png" alt="">
</td>
</tr>
</table>
...
Above code created a table with three tr and it is showing properly in desktop but in mobile devices showing some spacing.
As above image table showing red line spacing in mobile devices.
How to remove these spacing?
**It helps to include a few CSS resets in the <head> of the email.**Here are a few that I use the focus on resetting spacing and borders of <table>s and <td>s:
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
</style>
</head>
Here is the full CSS reset I use for emails.
I have developed an email template. Everything is working fine in my email template except the hr tag in Outlook 2013.
I have attached images
Result which i am getting:
Result which i want:
Please help me with suitable codes.
The <hr> is inconsistently supported in email clients. It's easier to do a horizontal rule in email by using a <table> tag, something like this:
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background:black; height:1px;>
<tr>
<td style="font-size:0; line-height:0;">
</td>
</tr>
</table>
It might seem like a lot of code for simple <hr>, but you'll get the best email client coverage by using <table>s.
In my case, the layout showed strange horizontal lines on Outlook 2010-2019.
To avoid that, this code works for me:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr width="100%">
<td width="100%" style="width: 100%; border-top: 1px solid #ffffff; padding-bottom: 1px;">
</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<hr align="left" style="border: 0px; border-top: 1px solid #ffffff; color: #ffffff; background: #ffffff; margin: 0px;"/>
<!--<![endif]-->
An alternative to using <hr> in email clients is the following, which produces a similar effect, i.e., a thin horizontal line:
<div style="background: #d9d9d9; font-size: 1px; line-height: 1px;"> </div>
This has been verified to render properly in Outlook 2016, but should also work in 2013.
I'm working on an HTML email signature. It displays properly when you send it, but when a recipient replies to or forwards the email, the spacing gets messed up and there are some other problems.
Before (yay):
After (boo):
Here's the code that the signature is generated from:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- 569 when finalizing (don't include px sufix)-->
<table border-collapse="collapse" width="569" style="border-width: 0; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Image table -->
<table border-collapse="collapse" width="83px" align="left" border="0" cellspacing="0" cellpadding="0" style="border: #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<!-- 1. Headshot image (src and alt) -->
<img src="http://www.levelfunded.com/email/russ_carpel.jpg" alt="Russ Carpel headshot" style="display: block;"/>
</p>
</td>
</tr>
</table>
<!-- Contact info table -->
<table border-collapse="collapse" width="329" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" align="right" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; vertical-align: top; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<p style="font-size: 14px; margin: 0px; margin-top: 8px;">
<b>
<!-- 2. Name -->
<span>Russ Carpel</span>
</b>
<!-- 3. Title -->
<span style="font-size: 13px;">CEO</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 4. Mobile number (href and copy) -->
<span>(888) 888-8888 m</span>
<span style="color: #bababa;"> | </span>
<!-- 5. Email (href and copy) -->
<span>
address#domain.com
</span>
<span>
<!-- 6. LinkedIn profile -->
<a href="https://www.linkedin.com/in/profile" target="_blank">
<img src="http://levelfunded.com/email/linkedIn.jpg" alt="LinkedIn" style="vertical-align: top; margin-top: 1px"/>
</a>
</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 7. Office number -->
<span>(888) 888-8888 o</span>
<span style="color: #bababa;"> | </span>
<span>levelfunded.com</span>
</p>
</p>
</td>
</tr>
</table>
<!-- Logo table -->
<table border-collapse="collapse" width="107" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" valign="bottom" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com" target="_blank">
<img src="http://levelfunded.com/email/levelfundedLogoCities.jpg" alt="LevelFunded Logo"/ style="display: block;">
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<!-- Speech carrot table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-top: 10px; padding-left: 22px; border-width: 0;">
<tr>
<td>
<img src="http://www.levelfunded.com/email/triangle.jpg" alt="Speech carrot" style="display: block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Gray box cell -->
<td colspan="3" style="padding-left: 8px; padding-top: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #e8e8e8;">
<!-- Video link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com/video.html">
<img src="http://levelfunded.com/email/videoLinkImg-trimmed.jpg" alt="Immediately reduce health benefits costs by $50K, possibly $250K or more. Click to watch video." style="display: block; padding: 0px; margin: 0px;"/>
</a>
</p>
</td>
</tr>
</table>
<!-- Article link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://www.chicagotribune.com/business/ct-small-business-insurance-1214-biz-20141214-story.html">
<img src="http://levelfunded.com/email/articleLinkImg-trimmed.jpg" alt="Click to read Chicage Tribune article" style="display: block;"/>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #7e7e7e; font-size: 10px; line-height: 12px; border-width: 0;">
<tr>
<td>
This email is confidential communication from Level Funded Health Partners LLC and may not be forwarded without the expressed written consent of the company. Level Funded Health Partners LLC is a DE LLC, File #8888888. The company is a U.S. based licensed insurance agency entity. Delaware insurance agency entity license #8888888.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I understand that when the recipient composes and sends their reply, their email client has to re-encode the email and that creates the possibility for these formatting errors. (More on that here.)
To be clear, here are the errors I'm talking about:
Extra space above and below the speech carrot graphic
Link formatting is lost (on the blurred section, but you can see that the green is turning into blue
The background color on the gray rectangle is getting dropped
Padding on the two big graphics is getting decreased
Font styling on the disclaimer text is getting dropped
Disclaimer copy is getting truncated after the second # character.
I know trying to answer all of that is too broad. So here's my question:
I've found lots of resources for coding a good html email. However, I haven't been able to find resources on good practices to make it more resilient against these kinds of errors when it is replied to or forwarded. Can anybody point me to any such resources?
Unfortunately you can't account for all of the different email clients out there with regards to email forwarding. They all handle them differently. You can almost certainly count on your HTML formatting being somehow broken when someone forwards an email to someone else with the forward button. (You can do your best though; I commented earlier with some suggestions.)
The alternative is to use a "Forward to a friend" functionality available in some email service providers such as Salesforce (formerly ExactTarget) for example. You would encourage people to click on a link which would take the user to a page to fill in an email address, then the message would be sent to them on the user's behalf. In ET you could also show/hide certain information depending on the context. So, if someone was sending the message via FTAF, any sensitive information could be removed, for example. This all of course depends on your email service provider's offerings.
Is it safe to use position:absolute in a email template?
Depends on which mail clients your users are using. Outlook for example handles position: absolute well, Thunderbird on the other hand doesn't.
I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).
See the following page about styling tips on HTML mails, including some position absolute advice:
Style In Email
Adding to an old question, I know - but I can confirm that neither GMail supports position: absolute at the moment.
it is not a safe manner to use position absolute in emailers,because all of the email server did'nt support the tag..instead using postion absolute you guys can use
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
<tbody>
<tr>
<td align="left" valign="top">
<p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
<p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
</td>
</tr>
</tbody>
</table>
even you guys can use clickable button on it by adding this code in another td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width" >
<title></title>
</head>
<body style="Margin:0px; Padding:0px;">
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" align="center" style="Margin:0px auto; Padding:0px; border-collapse:n-left: 20px; max-width:600px; " border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="left" valign="top">
<p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
<p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
</td>
</tr>
</tbody>
</table>
<table width="100%" align="left" style="Margin:0px auto; Padding:0px; border-collapse:collapse; max-width:600px; Margin-left: 20px; Margin-top:15px;" border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="left" valign="top">
Reset Your Password
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
enter code here
According to Style in Email, neither AOL (before release 9) nor Mozilla Mail/ThunderBird (all versions) support absolute positioning in the email body.
absolute in css not working for HTML email.
If you gonna use absolute for Image combination, you can use such style.
background-image: url(url_to_your_image);
Hope it will help you.