Outlook 2010 non include il tag di stile nella firma

Question

Ho un problema per creare email di firma HTML per Outlook.

Ho un tag di stile prima della firma e aggiungere larghezza del supporto per e-mail reattiva.

<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;">&nbsp;</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&nbsp;1234</span><br/> 
    <span style="font-size:9px;margin-right:10px;">D&nbsp;&nbsp;</span><span style="font-size:9px;">[[DIRECT]]</span><br/> 
    <span style="font-size:9px;margin-right:10px;">P&nbsp;&nbsp;</span><span style="font-size:9px;">[[PHONE]]</span><br/> 
    <span style="font-size:9px;margin-right:9px;">M&nbsp;&nbsp;</span><span style="font-size:9px;">[[MOBILE]]</span><br/> 
    <span style="font-size:9px;margin-right:10px;">E&nbsp;&nbsp;</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>&nbsp;<a href="http://www.twitter.com/urban_angles"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>&nbsp;&nbsp;<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> 

Ho ottenuto tutto funzionante bene su Apple Mail. Tuttavia, outlook non sembra felice con il mio html. Tutte le e-mail da Outlook non avranno il tag di stile che rende il mio html sembra strano su iPhone.

Le mie domande:

1. Perché il tag stile non è incluso nella mia e-mail? Da quello che so è supportato in prospettiva. Vedi rif. here

2. C'è qualche soluzione o correzioni che posso fare? Mi piacerebbe avere un'e-mail reattiva su iPhone e so che funziona se lo invio da Apple Mail.

Cheers, Will

Answer 1

Se il tag stile non viene visualizzato nel codice della tua e-mail, potrebbe essere perché non è nella testa. Non sono sicuro se questo è necessario per Outlook, ma questo potrebbe essere il motivo per cui viene rimosso.

Answer 2

Si consiglia di verificare il codice HTML HTML.

http://htmlemailboilerplate.com/

Answer 3

Il tag <style> è spogliato fuori da alcuni client di posta elettronica come Gmail, (forse Outlook sta facendo lo stesso?)

Invece si dovrebbe utilizzare gli stili in linea.

Dallo stesso sito citato, le linee guida per l'utilizzo di stili: http://www.campaignmonitor.com/resources/will-it-work/guidelines/

È possibile utilizzare http://premailer.dialect.ca/ per convertire il vostro signiture ad avere stili inline, e la sua libera :)

Answer 4

È consigliabile utilizzare sempre in linea stili per e-mail HTML in quanto ciò offre la massima compatibilità con diversi client. So che non è bello come un blocco CSS separato, ma è così.