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
Related
I am in the process of revising some emails and they want a 3 column section to turn into rows at a certain breakpoint. I understand this is incredibly easy with flexbox or other modern tools the web provides for us but I can't use that for older email clients.
I looked around on the internet some and couldn't find much. I am wondering if there are other ways to do it than tables, like with the partial div support I could make something work. I am expected to have it work for Outlook 2010 or later.
Try googling responsive-Newsletters this would help
https://www.campaignmonitor.com/dev-resources/guides/mobile/
https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch
For Outlook you will need a tag like this:
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
When opening a html mail with its code written for Windows 10 mail client (I assume Outlook 2007 +also) which uses Word engine i can see all images (img tag) or vml language controls rendered properly. But often i see some controls images missing when opening the same e-mail the second time or on resizing windows 10 mail window. Because of this resizing of a loaded e-mail window it doesn't seem have anything to do with some delays in loading elements via Internet, especially that a vml control doesn't use any outside recources. The html mail code is based on tables. Here's an example code with sometimes visible or invisible element:
<table cellpadding="0" cellspacing="0" width="273" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="273" valign="middle" align="center" bgcolor='#f7941d' style="background: #ffffff">
<!--[if gte mso 12]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:46px;v-text-anchor:middle;width:273px;" arcsize="15%" strokecolor="#f7941d" fillcolor="#f7941d">
<w:anchorlock/>
<center><font size="4" color="white" face="Verdana,sans-serif" style="text-decoration:none;font-size: 20px;line-height: 46px"><b>BUTTON TEXT <font class="greaterthan" style="position: relative;top: -1px;">></font></b></font></center>
</v:roundrect>
<![endif]-->
<font size="5" color="white" face="Verdana,sans-serif" style="text-decoration:none;font-size: 20px;line-height: 46px;mso-hide:all;"><b><font style="display:none;"> </font>BUTTON TEXT <font class="greaterthan" style="position: relative;top: -1px;">></font><font style="display:none;"> </font></b></font>
</td>
</tr>
<tr><td height="30"></td></tr>
</table>
This question seems to be really important to everybody having outlook 2007+ in mind.
Thank you in advance.
Well, this answer can be not enough, but in my case it helped when a VML button got position:relative - i didn't see it display inproperly even once. But for windows 10 mail you cannot use position: relative for non VML elements so what may help somebody to simplify her/his code as much as possible - dissapearing of elements may not be as often (as in my case), using less nested elements might help. This is what i noticed so far. A piece of code can be written from scratch different way also if nothing works.
Well to remember, in some situations using position for vml elements may not position an element as expected. But i had success with a vml button. position:relative;top:1px; this is what i did.
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've been trying to figure out if its possible for me to set an automatic reply that sends out an HTML formatted email. I need this to send out a fancy looking "We'll get back to you shortly" with images and links. I have the HTML code with me (with all headers and inline CSS), but I have no way to format the body of the email response as HTML.
Any ideas on how I can get this done?
I'm using Outlook Web App.
Thanks
You can use a library like swiftmailer http://swiftmailer.org/
Open up your text editor and get ready to start using tables. You're going to want to start out with something like this.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- the amount of td you need -->
</tr>
</table>
</td>
</tr>
</table>
Of course you'll need to figure out the exact layout, but expect to do a lot of table nesting. There are also issues between different email clients concerning how it all renders. Make sure if you're making an empty table cell used for spacing, make sure to do something like this.
<td style="height: 10px; font-size: 0; line-height: 0;">&nsbp;</td>
Otherwise you'll get unexpected spaces in things like Outlook.
Campaign monitor has a lot of useful tips about building out emails, check it out here.
I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.
If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".
Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in IE):
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
<tr>
<td>
<table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
<tr>
<td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
</tr>
</table>
</td>
</tr>
</table>
You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!
I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.
I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.
Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need CSS text-align:
<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
Your text here...
</td>
</tr>
</table>
</td>
</tr>
</table>