I made an html email on dreamweaver, and used margin for some text.
for example:
<td width="453" height="115" bgcolor="#18b581"><p style="font-family: Arial, Helvetica, sans-serif; margin-left: 25px;"><strong><font size="4">Hello world?</font>
this shows perfect in dreamweaver. when i send it through outlook, i save it as outlook template. i send it to my outlook account and my hotmail. the margins work on my outlook, but the margins does not sure on hotmail, i have no idea why!!
update:
<td colspan="2" bgcolor="#FFFFFF"><h3 style="font-family: Arial, Helvetica, sans-serif; color:#1d95a5; padding-left: 25px; padding-top:30px; ">What are the benefits of the NP-C directory?</h3>
<p style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 25px; padding-right: 22px; padding-top:-20px;">The NP-C directory offers you the opportunity to: </p>
<ul style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 80px; padding-right: 51px; padding-top:-12px;">
<li><strong>Connect</strong> with healthcare professional colleagues in your local country/area who have a shared interest in NP-C</li>
<li><strong>Network</strong> with healthcare professionals around the world to share experiences of NP-C</li>
<li><strong>Exchange</strong> the latest news and information about NP-C</li>
</ul>
Margin is not supported in Outlook.com. Instead use padding in the parent <td> element.
Don't do this:
<td>
<p style="margin-left:25px;">Paragraph</p>
</td>
Instead do this:
<td style="padding-left:25px;">
<p>Paragraph</p>
</td>
Yup, welcome to the hazards of HTML email!
Check out the email standards project, they keep a catalog of all the differences between various browsers.
Best suggestion is to try and avoid relying on padding and margins and instead use fixed width table cells to position elements.
Related
I would like to make the font size responsive in my email signature. VW is exactly what I need, but doesn't appear to work in outlook. I've tried css, but I believe it needs to be inline CSS, and I'm not sure how to incorporate #media screen inline.
I've tried em, this also doesn't resize.
<body style="padding:0; margin:0">
<table width="700" cellspacing="0" cellpadding="0" bgcolor="#">
<tr>
<td bgcolor="#ffffff" width="700" valign="top">
<div style="overflow-x:auto;">
<table border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="left" width="30%" style="vertical-align:bottom";>
<img src="https://grapaes.com/signatures/Grapa%20and%20tag.png?
_t=1563094564" alt="Logo" border="0" style="display:block" /></td>
<td style="width: 70%; height:auto; vertical-align:bottom;">
<span style="font-size: 1vw; font-family:'Raleway', sans-serif, Arial;
color: #9d2347; font-weight: bold;">Full Name</span><br />
<span style="font-size: .9em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight: 300;">Job descrtiption</span><br />
span style="font-size: .85em; font-family:'Raleway', sans-serif, Arial;
color: #5f6062; font-weight:300;">Phone: number here<br />
Website: <a href="http://www.grapaes.com"><font color="5f6062">
website/u>
</div>
</body>
It doesn't look terrible on mobile, but the font is just a tad too small, and nothing I do seems to increase it.
The overflow-x CSS element is not supported in Outlook. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Outlook uses Word as an email editor for displaying your HTML markup. So you should follow to rules defined for Word if you want to get a nice view.
I found this on another thread on Stackoverflow, why I couldn't find it before I posted the question, I'm not sure:
font-size: calc(7px + .5vw);
This syntax worked, and finally allowed me to have scalable text. It can be easily read in mnobile now.
I'm having inconsistent/buggy issues when delivering transactional emails (in this example, purchase confirmation email) to clients.
Gmail not only auto-links the address (the clients' dynamic, local store-address in this case), but also maps the first few digits of the phone number below it as part of the address. This ends up throwing off the subsequent map that it links to since the area code is being appended to the address data that Google is sending to the map-service.
The auto-linking doesn't always behave in the manner above though. In some cases, it leaves the phone number (formatted as: (xxx) xxx-xxxx) unmolested. In others, it only recognizes part of a given address to link. Obviously this leads to poor customer experience and needs to be remedied, but I'm tasked with solving this without resorted to disabling the feature, as our marketing dept wants to preserve the function as it's intended (rightly so for good usability).
Any ideas on why this may be occurring codewise or possibly how to designate an address or phone number in the markup manually so gmail knows what specifically needs to be auto-linked as what?
This is the table BEFORE Gmail:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Jessica Jones</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">123 Main St</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none;" valign="top">Nixa, MO 65714</td>
</tr>
<tr>
<td align="left" class="mob_font1" style="color: rgb(48, 48, 48); line-height: 20px; font-family: Arial, sans-serif; font-size: 15px; font-weight: normal; text-decoration: none; pointer-events: none;" valign="top">(417) 222-2222</td>
</tr>
</tbody>
</table>
This is the offending HTML table, in a live-test, AFTER gmail has it's way with it:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Jessica Jones</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">123 Main St</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">Nixa, MO 65714</td>
</tr>
<tr>
<td class="m_2777276863125780910mob_font1" style="color:rgb(48,48,48);line-height:20px;font-family:Arial,sans-serif;font-size:15px;font-weight:normal;text-decoration:none" valign="top" align="left">(417) 222-2222</td>
</tr>
</tbody>
</table>
As you can see, Google in concatenating all three lines to create their URL for some reason. I just can't find documentation that would lead to better understanding of what they may be using to identify an address or phone number so it can be controlled or avoided. Their public September 2017 release notes were unfortunately not geared to devs.
And this is how it is displayed in the Gmail/Firefox (the most updated version):
In the Inbox
Hey congrats on your first question on Stack Overflow 🎉!
As #gwally mentioned, placing this in your <head> should solve this issue in some email clients (mainly iOS Mail).
<head>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
</head>
After that, we can add a class like this in the <head><style> area:
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
Placing a class in a parent <td> is a little too aggressive, as it tries to style too much and can end up messing with all the text (not just the auto-link-detected text). Wrapping anything that might include a phone number, mailing address, or date in a <span class="unstyle-auto-detected-links"> scales well, inherits correctly, and can be used anywhere in an email.
<td>
<span class="unstyle-auto-detected-links">123 Fake Street, SpringField, OR, 97477 US<br>(123) 456-7890</span>
</td>
Important to note that we can't remove the link, we can only style the link text so it does not appear as a hyperlink (it will still be click-able / tap-able).
I've been using this technique lately on our emails at Stack Overflow and (so far) it's been working well. Cheers!
Place these two meta tags in your <head>:
<head>
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
</head>
Place this in your style sheet:
<style>
*[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
In your body where your client data is located add a class and add hrefs to the telephone number and the email address:
<p class="x-gmail-data-detectors">Herman Munster<br />
1313 Mockingbird Lane<br />
Hollywood, CA 90210<br />
<a href="tel:+01-(323) 000-0000">(323) 000-0000<br />
<a href="mailto:herman#munster.com" target="_blank">herman#munster.com
</p>
What this should do is eliminate the blue underlining in your email, but still allow you so if someone clicks on the phone number or the email address, it will still open the default email client or start a phone application and let you do a phone call.
These are two resources that should give you more information:
https://yoast.com/dev-blog/guide-mailto-links/
https://css-tricks.com/the-current-state-of-telephone-links/
Good luck.
What is the best way to specify the font-family when coding emails for Outlook 2013? I have found that font-family is ignored when it is added inline like this:
<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>
I have found that this works:
<span><font face="Helvetica, Arial, sans-serif">Text</font></span>
However, this is a pain as I have to add the tag everywhere that text is added. Wrapping a tag around several elements is ignored. Is there a way that I can set the font once and forget about it?
I had this problem and found the following post that fixed the issue:
https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman
Basically, you need to add the following conditional css style snippet right after the body tag in the email template you want Outlook to take the desired font-family (in this case Arial, Helvetica or San-Serif) instead of the sticky MSO Times-New-Roman font:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
An effective way to force Outlook 2013 to use specified font stack is to wrap the text in question in a <span> and to use !important when defining the font-family. Outlook will still remove any Google fonts that are defined in the head, but other email clients will use them. Here is an example:
<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
This will always be Helvetica.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
Outlook will display Helvetica, others will display Indie Flower.
</span>
</td>
</tr>
</table>
</body>
This came from this awesome article: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook
I just wanted to point out something about this font issue, that it isn't necessary to put your font-family declaration inside the body tag as CoderRoller mentioned in the previous answers.
Also I found something else about this issue, I was using a google Api's font inside the of the email like this:
And then inside the body tag:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
</style>
<![endif]-->
But Outlook doesn't agree with having a custom font like that, so then it ignores all the other fallbacks of fonts that are after your custom font, so if this is your case then just remove the custom google font, and use something like:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
I have currently this css style in the head of the HTML, I tested this with litmus, and it doesn't matter if you have the declaration inside the body tag, or in the head tag.
How are you building your emails? If you are using tables then
<td style="font-family: Helvetica, Arial, sans-serif;">
Will work fine in ANY client. Only need to use a span if part of the text in the differs from the rest.
Outlook 2013 DOES NOT ignore in the header. I know this because I've built a lot of emails and I style a:visited in the header so Outlook (specifically) doesn't change them purple and it definitely works!
EDIT: A more accurate answer would be for me to say no unfortunately you have to specify the style inline everytime. (Didn't see that bit of the Question at first!)
Snippet:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">
Some text here.....
</td>
</tr>
</table>
There is a very simple solution that works.
Just wrap everything inside the deprecated font element!
<font face="Arial">
<!-- content -->
</font>
Unfortunately in my experience the font tag is the only thing that works consistently on Outlook (and Windows Phone, go figure). You're going to want to add the standard CSS inline for your text as well because some clients don't render font's face attribute.
Custom font is not a universally supported feature.
AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com app
Outlook iOS
Are the only email clients that support custom web fonts.
a useful article.
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
I need to create an email template. My email template MUST work in GMail and the mail app on iPhone. I had the template working properly in the mail app on iPhone with Zurb Ink. However, Gmail doesn't support the style tag in HTML emails. For that reason, I removed that framework and started from scratch. Now, the email template works fine in GMail, but the text doesn't scale up in the mail app on the iPhone. The text is all scrunched together. Currently, my HTML looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;" height="100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Welcome.</title>
</head>
<body style="background-color:silver; color: #2D2D2D; font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; padding:0; margin: 0; text-align: left; line-height: 1.3; width:100%; height:100%; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
<table style="border:solid 0px #fff; width:100%;">
<tr>
<td align="center" valign="top" style="width: 100%;">
<center>
<table style="width:600px; border:solid 0px #fff; border-collapse: collapse;">
<tr>
<td align="right" style="text-align: right; vertical-align: middle;">
<span style="color: #898989; font-size:12px;">Trouble viewing email? view it in your browser</span>
</td>
</tr>
<tr>
<td style="height:77px; vertical-align: middle; padding-left:35px; background-color:#fff; border-left: solid 1px #D6D6D6; border-right:solid 1px #D6D6D6;">
<img alt="Welcome." src="http://dummyimage.com/126x36/d907d9/fff.png&text=Hello" height="36" width="126" />
</td>
</tr>
<tr>
<td>
<img alt="Welcome." width="600" height="250" src="http://dummyimage.com/600x250/d907d9/fff.png&text=Welcome+to+the+new" style="display:block;" />
</td>
</tr>
<tr>
<td style="padding:0px 32px 36px 32px; background-color:#fff; border-top:solid 0px #fff;">
<div style="color:#92cc0a; padding-top:29px; font-size:36px; font-weight:lighter;">Welcome.</div>
<div style="padding-top:15px; font-size:14px; color:#363636;">
Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!
</div>
<br />
Thank You
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Why isn't the text scaling properly on the mail app on the iPhone. I've included the viewport details. I've included the webkit-text-adjust stuff. Can someone please help me out?
Thank you so much!
You can't actually rely on styles getting inherited, which means you will have to apply every single style to every single element all the time...
This means the font-size on the div won't actually have any effect on the text within it.
For a quick fix I suggest wrapping the text in a paragraph and applying the needed styles to it.
<div style="padding-top:15px; font-size:12px; color:#363636;">
<p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>
Generally I would advise writing the styles in a style tag and then using a service like http://inliner.cm when you're finished and ready to inline the styles for gmail support. That way you won't have to copy&paste the font-family and default styles everywhere yourself
Using the suggested method of styling your html email in a <style> tag in the head and then using an inliner, you can actually go back to using the ink framework too and still have it work in gmail.
Add this to your <style> tag:
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
The width/padding/margin/ms-text is is obviously unrelated, but should also be there.
Also, iPhone uses webkit to render, so you should be able to override the styling manually by adding a class in the <style> tag. Gmail will ignore this of course.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
If I remember correctly, iPhones auto scale email content unless otherwise told not to by adding initial-scale=1.0
Hope that helps. I know very well how frustrating email development can be.
Hey mate I didnt see your code but recently I fixed my newsletter by adding
-webkit-text-size-adjust:none;
in your td style
I had the same problem.
Try it might be the issue.
I had the same problem this week and tried out a lot of code. The only solution that worked was adding this line to your <style>:
<style>
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
</style>
I am trying to right align text in a column header in a HTML table for email sent to outlook.
I try:
<style>
TH.right{font-size: 13px; font-family:Arial, Helvetica, sans-serif;padding:5px 6px; text-align:right;margin:0px}
</style>
<th class="right" align="right">My Column Header</th>
And it does not work for Outlook. Any tips?
Try doing the CSS as inline - some email clients have trouble with this. It's good practice in my opinion to only do inline css for email clients and html emails.
So instead do this:
<th align="right" style="font-size: 13px; font-family:Arial, Helvetica, sans-serif;padding:5px 6px; text-align:right;margin:0px;">My Column Header</th>
not tested.