I have issue to create HTML signature emails for Outlook.
I have a style tag before signature and add media width for responsive email.
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
table {
min-width:650px;
}
@media only screen and (max-device-width: 480px) {
td[class=hidden-phone] {
width: 0px !important;
display: none !important;
overflow: hidden !important;
float: left !important;
}
td[class=description] {
width: 100% !important;
}
td[class=visible-phone] {
display: block !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
float:none !important;
}
table {
min-width: auto !important;
}
}
</style>
<table width="100%" style="font-family:'arial';">
<tr>
<td colspan="4" width="100%" style="height:10px;border-bottom:2px solid #96999e;height:0px;"> </td>
</tr>
<tr>
<td style="padding:10px;width:80px;min-width:80px;"><img src="http://urbanangles.com/fileserver/gallery/[[ID]]_original.png" /></td>
<td class="description" valign="bottom" style="padding:10px 0 10px 10px;width:170px;color:#111;min-width:170px;line-height:11px;">
<span style="font-size:11px"><strong>[[NAME]]</strong></span><br/>
<span style="font-size:11px;color:#007dc3;">[[TITLE]]</span><div style="margin-bottom:5px;"></div>
<span style="font-size:9px;">A Studio</span><br/>
<span style="font-size:9px;">10 Somewhere St, Suburb, STA 1234</span><br/>
<span style="font-size:9px;margin-right:10px;">D </span><span style="font-size:9px;">[[DIRECT]]</span><br/>
<span style="font-size:9px;margin-right:10px;">P </span><span style="font-size:9px;">[[PHONE]]</span><br/>
<span style="font-size:9px;margin-right:9px;">M </span><span style="font-size:9px;">[[MOBILE]]</span><br/>
<span style="font-size:9px;margin-right:10px;">E </span><span style="font-size:9px;"><a href="mailto:[[EMAIL]]" style="color:#111;text-decoration:none;">[[EMAIL]]</a></span><div style="margin-bottom:5px;height:0px;"></div>
<span style="font-size:11px"><strong><a style="color:#111;text-decoration:none;" href="http://www.examples.com">www.examples.com</a></strong></span><br/>
</td>
<td class="hidden-phone" style="width:100%;"></td>
<td class="hidden-phone" valign="bottom" style="padding:10px 10px 10px 0;width:360px;min-width:360px;"><span style="margin-right:15px;"><a href="http://www.facebook.com/urbanangles" style="margin-right:3px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a> <a href="http://www.twitter.com/urban_angles"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span> <a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo.jpg" /></a> </td>
</tr>
<!--[if !mso 9]><!-->
<tr>
<td colspan="1" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
<span style="margin-left:10px;margin-right:25px;">
<a href="http://www.facebook.com/examples" style="margin-right:5px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a>
<a href="http://www.twitter.com/examples"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>
</td>
<td colspan="3" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left">
<a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo" style="width:80%;margin-left:8px;" /></a>
</td>
</tr>
<!--<![endif]-->
<tr><td colspan="4" width="100%" style="height:10px;border-top:2px solid #96999e;"></td> </tr>
</table>
<p style="font-size:11px;font-family:'arial';margin:0 0 5px 0;padding:0"><i>Please consider the environment before printing this email.</i></p>
<p style="font-size:9px;font-family:'arial';color:#999;margin:0 0 5px 0;padding:0">This email and any attachment(s) is intended only for the exclusive and confidential use of the addressee(s). If you are not the intended recipient, any use, interference with, disclosure or copying of this material is unauthorised and prohibited. If you have received this message in error, please notify the sender by return email immediately and delete the message from your computer without making any copies. [[COMPANY]] does not guarantee the integrity of any emails or attached files.</p>
I got everything working fine on apple mail. However, outlook does not look happy with my html. All emails from outlook will not have the style tag which makes my html looks weird on iphone.
My questions:
Why the style tag is not included in my email? From what I know it is supported in outlook. See ref here
Is there any work around or fixes that I can do? I would love to have responsive email work on iPhone and I know it is working if I send it from Apple Mail.
Cheers, Will
In Outlook app, Click File > Options > Mail > Signatures. Check if your HTML signature is showing under "Select signature to edit". If not, select "New", and locate your signature.
Outlook supports inline CSS styling of content.
CSS – Styling of Email SignaturesSince most email clients don't support the use of <style> tags, this makes it impossible to define and use stylesheets within HTML email signatures. This also means that you cannot use CSS media queries to define styles for various devices and viewport sizes.
Outlook ignores HTML item width and height As we've already mentioned, Outlook doesn't support styling inside of <div> tags. So, when an email renders in Outlook, the <div> sections will assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code.
If the style tag is not appearing in the code of your email, it might be because it is not in the head. Not sure if this is needed for Outlook, but this might be why it is getting stripped out.
The <style>
tag is stripped out from some email clients such as Gmail, (maybe Outlook is doing the same?)
Instead you should use in-line styles.
From the same website you quoted, guidelines for using styles: http://www.campaignmonitor.com/resources/will-it-work/guidelines/
You can use http://premailer.dialect.ca/ to convert your signiture to have inline styles, and its free :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With