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]-->
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]-->
I have a client that would like the attached to be built (I've blocked some information out so it doesn't look great).
Basically, they would like the two circles area's "New for 2016" and "From £11.59*" to be text. I know with HTML emails the text can't be on an angle but can anyone else see any other problems as to why this won't work for HTML email build?
Email
It has a number of elements that are graphical and difficult to represent in an email.
The circles and the angled text, as you correctly pointed out are two of them.
Also, if you'd include images most clients normally don't immediately load them but require user confirmation, making it look very ugly at first (this is the argument that always catches with marketing).
Thirdly, was designed as a text medium and most HTML is often included (warning, opinion following) just due to people being to lazy to think about a good text email which is usually the better choice.
You can layer text or foreground images over a background image. backgrounds.cm is the best tool to do this. Here is an example:
<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!-- Your content goes here -->
<img src="">
<br>
Text Text Text
<table> more layouts </table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
You'll have to be creative to achieve the design linked above, but in principle you should be able to achieve this (or something close to this) in most email clients.
When I'm adding a backgorund to email template table, all of email clients are blocking this image. How to add an image ? Domain with SSL maybe?
Background images aren't supported in some email clients. Luckily there's a workaround for most. It sounds like you want an image as a background to a specific table cell. If so, use this code, replacing "image.jpg" for your actual image.
Note: You will need to input your image twice in the code below (once in the <td> and once in the <v:rect>
<table>
<tr>
<td background="image.jpg">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="image.jpg" color="#0c0807" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
*YOUR CONTENT OR MORE TABLES GO HERE*
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
This code makes your table cell house the image. Set heights or widths to suit the image. The additional conditional statements below force the image to be shown in Outlook, one of the most unreliable email clients to support background images.
Designing emails that will look nice in all email clients is very time consuming and difficult. GMail is especially difficult. Here is a list of css elements and their compatibility. It's a great reference and I reference it each time I am designing a new email template. It's best practice to use only tags which are supported by all clients or email services.
background-image is not supported in: Outlook 2007, Outlook 2010, Outlook 2013, and Outlook.com. However, background is fully supported (excluding image).
I'm trying to put a background image on a table cell in outlook 2013.
I used this from campaign monitor : https://backgrounds.cm/ . It's supposed to work with clients working with the word html engine : outlook 2007, 2010 and 2013.
I got this code and tested it on emailonacid (only this code, nothing else) :
<table>
<tr>
<td background="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2015/11/25/uGNU4M0pzfWehDAXEvq5V6y7/stampready/images/s2_bannerbg.jpg" bgcolor="#0193F9" width="800" height="450" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:450px;">
<v:fill type="tile" src="http://www.stampready.net/dashboard/editor/user_uploads/zip_uploads/2015/11/25/uGNU4M0pzfWehDAXEvq5V6y7/stampready/images/s2_bannerbg.jpg" color="#0193F9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Now let's see the results on https://www.emailonacid.com
As you can see it works perfectly fine on 2007 and 2010, but to my disbelief it won't work on outlook 2013 even with many tries to debug it.
Maybe someone faced that problem before.
edit : as for the duplicate matter, my question concerns a problem where the background image works in 2007/2010 but NOT 2013. This is indeed unique on stack overflow so it is not a duplicate
Test this in an actual version of Outlook 2013. It should display the image.
Tools like Email on Acid and Litmus are essentially virtual machines. Depending on the day or time, their software could capture a screenshot before the email's images have downloaded. + It takes longer to download and display an image using MS's icky VML code.
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-