Developers and enthusiasts!
Since I have a little experience with HTML I figured it would be fun to try to create an html email signature, and it was! Until I checked the result on Litmus. So many tiny flaws I can not figure out how to fix:
• personal information appears partly or completely under the logo in Outlook on PC, instead of next to the logo.
• social media icons not visible in Apple mail, only before sending.
• correct space between social media icons in browsers, iPad mail and iPhone mail but not in Outlook on PC (or when running the code on here).
Are these compatibility problems that can not be fixed?
If they can, I need your help!
This is how the signature is supposed to look (the logo is an animation).
And this is the code:
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0">
<p style="line-height: 11px; padding: 0px; font-family: Helvetica; font-size: 12px;">
<a style="font-style: bold; color: #333333;"><strong>Joram Esveld</strong></a><br>
<a style="line-height: 18px; color: #017d85">branding specialist</a>
<br><br>
<a href="https://www.joramipsum.com/" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank"
style="text-decoration: none; color:#333333;" >www.joramipsum.com</a><br>
+316 12 34 56 78<br><br>
</p>
</td>
</tr>
</tbody>
</table>
Let me know if you need more information.
And if anyone has any branding related questions;
feel free to ask thrue dm, or my website.
Kind regards,
Joram
JavaScript will not work in an email client.
Outlook ignores padding on images.
float mostly does not work with Outlook.
A better approach would be to divide the signature into two separate columns using td.
For more information on what works with email, try this handy source:
https://www.campaignmonitor.com/css/
Good luck.
Related
I created a new html email signature for myself and I'm quite pleased with the result. It makes use of a font stack that tries the web font Open Sans first and falls back to Trebuchet MS if the client cannot display the web font. I'm using Outlook 2016 to send my emails with this new signature, and Outlook 2016 as well as most other modern email clients seem to display the signature properly.
The problem I have is that versions of Outlook 2013 and lower cannot seem to handle the web font but at the same time ignore the font stack and reset to Times New Roman instead of my fallback font.
This is a well known issue with plenty of information available on the net, including several code examples how to avoid or circumvent it. One of the better overviews I found on the topic is a blog entry by EmailOnAcid.com.
While the proposed strategies might work when sending email to recipients using Outlook with the help of some other third-party smtp client, they don't seem to apply to me who wants to send emails from Outlook. Because no matter which code or conditions I implement into my signature template, it is interpreted by Outlook at the moment the signature is loaded into the email to be sent, and Outlook changes the html in accordance with its own interpretation before sending it.
Does anyone know of a way to add a font stack including a web font to an html signature, to be sent from MS Outlook 2016, where Outlook 2013 and maybe 2010 will honor the correct fallback font and not just revert to Times New Roman?
Edit
Here is an example of code I'm currently not using in my signature file due to the problems listed below:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<td style="font-family:'Trebuchet MS', Arial, sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
<span style="font-family: 'Open Sans', 'Trebuchet MS', Arial, sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
</td>
If sent using a third party smtp client, this code, when received in Outlook, will ignore the font stack in the span element and only use the one in the td element. Other clients will properly render the web font. Unfortunately, however, when sending from within Outlook, Outlook already makes the conversion before sending it. Which means that other clients never get to choose and only see the fallback font.
I feel your pain. I face this problem everyday. My company brand guideline uses a webfont that works fine on our website, but does not render with Outlook or Gmail. I created a workaround for this issue that should work for you.
In the case of Outlook, it does not fully support web fonts. Some work, some don't, it's hit and miss. I think it's the gap in a name like 'Open Sans' that causes the issue. When Outlook runs into an issue, it reverts to Times New Roman. The irony that Times New Roman is the default font with gaps in it's name is not lost on me.
Arial is the fallback font we've chosen for a replacement, so I create a style sheet specifically for Outlook:
<!--[if (gte mso 9)|(IE)]>
<style>
* {font-family: Arial, sans-serif !important;}
</style>
Gmail does not work with google fonts at all. So Open Sans will never render. The solution is to choose a system font as a fallback font after you specify Open Sans. Everything should work fine in most other email clients.
One last thing to remember, whatever email client you use to send out an email will be restricted with the limitations of that client. Outlook limits your ability to send emails, just like it limits it's abilty to render them for your inbox.
I'm not positive to everything Outlook will strip out, but that could be some of the issues with what you're facing. Even though I am based on Outlook, I use other services to send emails whenever possible to overcome this.
Good luck.
Just for my piece of mind i went ahead and did a few tests to see whats happening with the code being sent. When we use Outlook to send a HTML (as an email), Outlook changes the HTML each time.
For example when the below code is sent thru Outlook 2013:
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="max-width: 600px;" widdth="100%">
<tbody>
<tr>
<td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
<span style="font-family:Open Sans,Arial,sans-serif;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
</td>
</tr>
</tbody>
</table>
it ends up showing as:
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="max-width:450.0pt">
<tbody>
<tr>
<td style="padding:0cm 0cm 0cm 0cm">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:"Open Sans";color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span><span style="font-size:8.5pt;line-height:95%;font-family:"Arial",sans-serif;color:black">
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
Outlook practically rewrites most of the code to outlook what MS thinks would be right. Now the question you had was why Outlook 2016 shows the text as not Times New Roman is because Outlook 2013 adds CSS as follows:
#font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
#font-face
{font-family:"Open Sans";}
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
This ensures that Calibri font is displayed on devices that have that specific font installed. Outlooks without Calibri will not be able to find the font and display default font Times New Roman.
From the above tests it would seem that Outlook 2016 is only meant to send emails with Calibri as the font. I have tried to change the default fonts and themes but its still doing the same.
EDIT:
There one important thing you missed from the link you mentioned above which is !important after the web font stack. Below code is what you should be sending:
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="max-width: 600px;"
width="100%">
<tbody>
<tr>
<td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
<span style="font-family:Open Sans,Arial,sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
</td>
</tr>
</tbody>
</table>
Once you add important tag Outlook will ignore the full font stack you have and while re-writing the code adds in the font family as Arial which means it should now display fonts properly.
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="600" style="width:6.25in">
<tbody>
<tr>
<td style="padding:0in 0in 0in 0in">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:"Arial",sans-serif;color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
Hope this is what you were after.
I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).
Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?
My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.
Screenshots:
when Mailchimp sends the email to Outlook (what went wrong)
when the HTML is rendered for Outlook directly (what it's supposed to look like)
Conditional comments:
I've put in Outlook-specific conditional comments like so:
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Thank you for the help! Really appreciate it.
I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:
Outlook doesn’t recognize the HTML that constrains images. This means
that if you use HTML to resize an image uploaded to a campaign or
template, it may display at the original size in Outlook. Be sure to
resize your images before you upload them to MailChimp, or use our
built-in image editor.
source: MailChimp Knowledge Base
I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.
Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it.
But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.
If it may help in any way; see my code below that I used in my templates to make it fluid.
<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom:15px;max-width:610px;">
<img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
</td>
</tr>
</tr>
</table>
</td>
Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.
<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">
Also can you post the img tag of the offending element so i can have a look at it better please?
Cheers
I am using office365 email at my workplace to access emails. I am required to generate a dynamic newsletter which will be developed in HTML, However, I cannot seem to figure out how to add that HTML page into the email, pasting plain HTML doesn't seem to work as outlook does not render that.
I found a work around after some research, which is to open the html page on a browser, simply copy the content using CTRL + A and paste onto email editor, that seems to add the html but this is not a proper solution!
The aim is to write HTML, (Have done that) and add the HTML page into the outlook email. Any help/suggestion is highly appreciated
Both email clients and web browsers can display HTML/CSS, but they have different ways of doing so. So if you copy/paste an HTML page, chances are it will not display the same way in an email client like Outlook365.
Email layouts need to use <table>s for layout instead of <div>s. Emails also only support a small of CSS rules that need to be inlined.
Email code looks more like this:
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;background: #aaaaaa;">
<span style="color: red; font-size: 12px;">text</span>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;">
<img src="full path to image" alt="alt text" width="50" height="50">
</td>
</tr>
</table>
If you rebuild your email like this, it should display better in email clients like Outlook365.
First of all please look at this list of supported CSS in various email clients.
Than make sure you also have CSS inside email. Best way is using inline CSS:
<div style="color: red; font-size: 12px;">HALO!</div>
When pasting make sure you are pasting it as HTML (don't know if you can do it in all email clients). Otherwise it will encode your pasted text and sending it will expose all HTML markup as text.
I'm trying to get outlook to display a background-image. Is another rule I can use in it's place for outlook 2003-2015 email clients? Be see markup below.
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td class="mbl-header" align="center" style="width:600px; height:122px; background-image: url('images/banner2.jpg'); background-repeat:no-repeat;background-size:600px 100%; padding-left:35px; padding-right:35px;">
<p style="font-family:Arial, sans-serif; color:#fff; text-align:left;"><strong>As Assistant U.S. Attorney Seth Wilkinson</strong> said in relation to a recent Lacey Act case, “The message is clear, you can’t turn a blind eye, you can’t buy products that you know are stolen, make a huge profit off it and then just say, ‘I didn’t know what I was doing</p>
</td>
</tr>
</table>
Outlook 07/10/13 & Outlook.com do not support background-image (Campaign Monitor - CSS). Instead, you can either substitute sliced images (not recommended) for all email clients or a solid background color where background-image isn't supported.
Bulletproof Background Images is probably the most reliable source.
This code for a HTML email renders nicely in all clients except gmail. For some reason, the link is not underlined, so the reader doesn't realize its a link. Any ideas on how to overcome this?
Thanks!
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href = "http://www.example.com/">Click</a></td>
Try changing
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href = "http://www.example.com/">Click</a></td>
To
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color:#ffffff;text-decoration:underline;" href="http://www.example.com/">Click</a></td>
So remove the spaces between your href and the link.
From my email experience, sometimes the client will do some pretty awful things and you can't do anything about it. Have you tried either using !important or declaring your styles in a style block at the top of your html?
If that doesn't work, I'd recommend maybe bolding the link :\
If by gmail you mean the email inbox you access from your browser, I think you are going to need to look at the default display settings from your browser and the gmail account. Maybe move the text-decoration:underline; from the a tag to the td tag as well and see if that changes something.
This link may also help you.
Try the code below. Gmail may have not recognized the spacing you had between
href = "yourlink". I can't think of any other reason why it wouldn't have worked. I code html emails everyday and always test for gmail.
<td align="center" bgcolor="#337711" style="color: #ffffff;">
<a style="color: #ffffff; text-decoration: underline;" href="http://www.example.com/">Click</a></td>
Another option to do is rearrange the code a bit by appending the style after the link. Like below.
<td align="center" bgcolor="#337711" style="color: #ffffff;">
Click</td>
Designing HTML e-mails sucks. It's official. It always makes me feel dirty! :P
That said, it's always a compromise getting HTML e-mails working across the board - until we get standards-compliance across the board there will always be compromises.
A few suggestions though, some may be a bit clunky but that's the nature of this particular beast...
The odd thing is, it should underline by default so you shouldn't need to specify it using inline CSS. Are you sure you haven't got a contradictory style declaration elsewhere that's overriding this inline one?
Remove the white-space from the element attributes
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href="http://www.example.com/">Click</a></td>
try wrapping the text in a <span> and stick the underline on that instead
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href="http://www.example.com/"><span style="text-decoration:underline;">Click</span></a></td>
if all else fails, change the style of the link to make it more obvious to the reader that it is a link
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #fcff01;font-weight:bold; text-decoration:underline;" href="http://www.example.com/">Click</a></td>