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.
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'm trying to get a circular image to appear in an HTML email. So far it's working in all clients except for Outlook 2013 and Outlook 2016 (Windows 7).
I found some VML tutorial that says this should do the trick:
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
However I tried it with conditional comments
<!--[if !mso]><!-- -->
<v:oval style="width:100;height:100">
<v:fill src="https://www.placebear.com/100/100.jpg" type="frame">
<v:/fill>
</v:oval>
<!--<![endif]-->
and nothing appeared.
Anybody have a working solution? Border-radius is doing the trick for every othe client but Outlook, because of course...
I'd suggest changing your Outlook conditionals to this.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Currently, you are hiding it from Outlook. If the VML proves too troublesome I'd recommend using a rounded image asset on a transparent background.
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 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).