I've got an issue with Outlook. I have a newsletter created in Mailchimp, custom coded, which looks good in all email clients, including Outlook, except for just one person where the code is all over the place. I'm talking specifically about this bit of code:
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px;overflow:hidden;">
<tr>
<td class="header" align="left" valign="bottom" style="padding-bottom:0;">
<img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/026f82b3-11d7-4499-a7a9-fedc75467f5c.png" style="width:100%;" class="align-header">
<!--[if mso]>
</td>
</tr>
<tr>
<td class="container-padding content" align="center" valign="bottom" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#0ea19b;">
<![endif]-->
<div class="container-padding content" valign="bottom" align="center" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#0ea19b;margin-top:0!important; display:inline-block;width:95%;">
<!--[if mso]>
<table border="0" width="500" cellpadding="0" cellspacing="0" class="container" style="width:500px;max-width:500px;"><tr><td width="200">
<![endif]-->
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#fff;text-align:left;">July 2015</div>
<!--[if mso]>
</td><td width="300" valign="middle">
<![endif]-->
<div class="title2" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:600;color:#fff;text-align:right;">Subscribe to our<br>consumer newsletter</div><br>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<div class="social" style="display:block;width:100%;text-align:center;float:left;">
<a href="https://www.facebook.com/pages/Kent-Trading-Standards/386603161497200" target="_blank" style="text-decoration:none;">
<img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/7f528f2d-ce24-4fd7-a961-8e70c32aa87d.png" border="0">
</a>
<a href="https://twitter.com/kent_ts" target="_blank" style="text-decoration:none;">
<img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/250357af-fa8d-447d-ae24-e5836c66c0b1.png" border="0">
</a>
<a href="https://www.pinterest.com/kentts/" target="_blank">
<img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/87851a7e-7f3d-49e0-8fc0-3bf8bb12b98f.png" border="0">
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/ce2871176f2cf0da723a750b1/images/559f5753-373f-47f7-a97e-ffe454a991d8.jpg" style="width:100%;">
</td>
</tr>
<tr>
<td class="container-padding content" align="left" style="background-color:#ffffff">
Is there any particular setting in Outlook that will cause this? Everywhere else it looks good, except for one single laptop. I'm going mad here trying to figure it out.
Thank you!
Outlook's display is based off the DPI settings in Windows, which is likely why it is only affecting the one person. This can greatly increase the size of your images as well as your tables, etc causing havoc on your layout. This is a client-side feature (usually on HD laptops as by default they are usually set to 125% DPI) and nothing that you can really do to control it on your end as designer/sender.
If you have that person make sure the DPI setting is on 100%, that should solve the issue - but as you can't tell that to ALL of your audience all of the time, it may be better to put preventative code in the email instead and design with this in mind.
Set inline px definitions (or you can use conditional defined tables surrounding your code) of your your tables and tds.
Use mso-padding-alt and mso-cellspacing.
Use this for PNG images:
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
Insert this in the HTML tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Best resource I have found for tips on Outlook's DPI issue is on J.M. White's blog. Below are some references from Litmus and Email on Acid as well.
Litmus
Email On Acid
Outlook doesn't Like HTML but there is a fix for this.
On the extreme end, you can send plain text email. Even without going that far, you can send HTML email, as long as you keep your
formatting simple: as a rule, don't use any CSS elements (if you're
not sure what those are, either ask your web designer or simply don't
worry about it).
If you keep things simple, Outlook users shouldn't notice anything out
of the ordinary.
Alternately, you can simply accept that Outlook users may have
trouble, and provide them with a link to view your email as a web
page. This allows you to use HTML email templates and other advanced
styling features, while still giving users of mail clients that don't
support those features an option to see your messages as they were
meant to be seen.
Reference: https://help.aweber.com/hc/en-us/articles/204030726-Why-Doesn-t-My-HTML-Message-Display-Correctly-in-Outlook-
Related
I'm kind of new to creating my own emails and looking to learn from my mistakes. I was creating an email and wanted to add a redemption button to it through styling. I added the mso condition, but when the email was sent, it turns up like this out of outlook. In other email platforms it shows as it should (only 1 button). I am not sure what I am doing wrong and why it is showing double. duplicate buttons
Here is my code:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#COUPONURL" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="5%" strokecolor="#5cbf50" fillcolor="#5cbf50;width: 130;">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px; font-weight: 600;">Click here!</center>
</v:roundrect>
<![endif]-->
CLICK HERE TO REDEEM
</a>
</div>
</td>
</tr>
</table>
The problem is that you're only making the Outlook button conditional.
You need to add in logic to show only one OR the other.
<!--[if mso]>
Button for Outlook
<![endif]-->
<!--[if !mso]><!-- -->
Button for everything else
<![endif]-->
While trying to design HTML emails, I've noticed that on Windows Live Mail, the emails are not respecting the container, so the email width are gigantic -- thousands of pixels of padding/margin/whatever on the left and right side of the content.
I'm not sure what the reason is; the emails look fine on other clients, including other MS clients. I've also tried wrapping the content in <!--[if mso]> tags, but to no avail:
<!--[if mso]>
<center>
<table>
<tr>
<td width="600">
<![endif]-->
...
<!--[if mso]>
</td>
</tr>
</table>
</center>
<![endif]-->
i created mailing but there is a vertical gap between 2 images and i read all solutions about this problem and not solved.
last chance is typing this portal and ask you guys :(
first i open below code on notepad++ and change it then outlook 13 attach file => as a text => then boom vertical gap showing up.
here is my code
<html>
<head>
<title>mailing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1">
<a href="mailto:info#ygtur.com">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_12.jpg" style="display: block;"></a></td>
<td colspan="1" rowspan="1">
<a href="http://www.ygtur.com/">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_13.jpg" style="display: block;"></a></td>
</tr>
</table>
</body>
</html>
here is the picture of the problem
You could try using css to style the table instead of using border= cellpadding= etc. In fact you already tagged the question as css, so I guess you saw it coming :-)
Perhaps Outlook adds its own css if it does not find any, or the view engine that it uses may apply defaults that you are not expecting.
EDIT:
You have whitespace between the <a href> and <img> tags. You should remove that, it may be the cause of your problem. It wouldn't be a problem if the link had just text, but now it has text(whitespace) + an image, and both will show.
I am trying to set a background image in an HTML email which needs to viewed in programs such as webmail and gmail aswell.
I have read other tutorials and the general rule is it is not recommended, I used the background in the body tag and as a failover have the same background image used in table tag, as some programs strip away the body and head tage from the emails.
Is there a way to successfully carry a background over web based programs and on a phone such as samsung?
HTML
<body topmargin="10" leftmargin="0" bottomargin="20" background="images/background.jpg">
<!--first table contains failover background-->
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td background="images/background.jpg">
<center>
<table style="border: #FFF 4px solid;" width="600px" cellpadding="0" cellspacing="0">
<tr name="link-1">
<td align="center" valign="top">
<font style="font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;font-size:12px; color:#FFF;">CLICK HERE TO VIEW IN BROWSER</font>
</td>
</tr>
<!--THE REST OF THE MAIL THAT WORKS-->
</BODY>
</HTML>
If you have problem with using background-image in outlook, you should use VML
<v:image xmlns:v="urn:schemas-microsoft-com:vml"
style='width:500px;height:500px;position:absolute;top:0;left:0;z-index:-1;'
src="yourImageUrl" />
The best way to get it working for multiple devices is using the following website: https://backgrounds.cm which will help with Outlook.
Now-a-days this is less of an issue, but I would suggest you ensure your image is the full URL and publically available not based on your local machine.
Does anyone know if there is a conditional statement to use an alternative bit of code for mobile phones similar to the below?
<!--[if #)]>
<table width="600" align="center">
<![endif]-->
The "<table width="600" align="centre">" is simply filler code to show what I mean. The # is where the statement need to go. So for example...
Mobile version:
<!--[if #]>
<table width="300" align="left">
<![endif]-->
All other devices version:
<!--[if #]>
<table width="600" align="right">
<![endif]-->
I hope someone can help me. I'm struggling finding any reference online, maybe I'm using the wrong search terms?
I'm coding an email from scratch and would like to avoid media queries and scripts and keep the code as clean as possible.
Thanks guys! :)