2012-06-21 11 views
10

sto facendo un modello per la posta elettronica in formato HTML, funziona benissimo nel client di posta elettronica di Apple, Gmail, Hotmail e Windows Mail 2006. Non funziona in Outlook, si protende, la famiglia di font non è lavorando e perché si estende, non si concentra sulla pagina.HTML in Outlook

Questo è il mio codice;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="initial-scale=0.5"> 
<meta name="format-detection" content="telephone=yes"> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
    margin:      0; 
    padding:     0; 
    width:      100% !important; 
    overflow-y:     hidden; 
    background-color:   #ffffff; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust:  100%; 
    font-family:    Helvetica; 
    vertical-align:    top; 
    border-spacing:    0px; 
} 
ul, ol, dl { 
    padding:     0; 
    margin:      0; 
} 
h1, h2, h3, h4, h5, h6, p { 
    margin-top:     0; 
    padding-right:    0px; 
    padding-left:    0px; 
} 
a img { 
    border:      none; 
} 
a:link { 
    color:      #42413C; 
    text-decoration:   underline; 
} 
a:visited { 
    color:      #6E6C64; 
    text-decoration:   underline; 
} 
a:hover, a:active, a:focus { 
    text-decoration:   none; 
} 
.container { 
    width:      600px; 
    background:     #FFF; 
    margin:      0 auto; 
} 

.content { 
    padding:     0px; 
    padding-left:    10px; 
    border:      none; 
    background-color:   #E9E9E9; 
    line-height:    16px; 
    font-size:     14px; 
    width:      590px; 
} 
.footer { 
    padding:     0px 0; 
    background:     #000000; 
    text-align:     center; 
    color:      white; 
    font-size:     12px; 
    margin-bottom:    10px; 
    height:      45px; 
    width:      600px; 
} 
.actie { 
    background-color:   #69696D; 
} 
.icons { 
    font-size:     12px; 
} 
.contact { 
    text-align:     center; 
} 
.table { 
    border-spacing:    0px; 
} 
.contact a { 
    color:      white; 
} 
.devices { 
    background-color:   #2f2f31; 
    height:      253px; 
    border:      0; 
} 
.header { 
    background-color:   #2f2f31; 
    height:      87px; 
    border:      0; 
} 
p { 
    font-color:     black; 
} 

</style></head> 

<body> 

<div class="container" width="600px" height="900px"> 
    <div class="header"><img src="http://mediabunker.com/newsletters/newsletter_201206/logo.png" width="600" height="87px" /> 
    </div> 
    <div class="devices" background-color="#2f2f31" height="220px" border="0"><img src="http://mediabunker.com/newsletters/newsletter_201206/devices2.png" /></div> 
    <div class="content"> 
    <table width="590" border="0"> 
     <tr> 
     <td width="55%"><h3><strong>Werkt u al met apps?</strong></h3> 
      <p>Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p> 
      <p>Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p> 
     <p>Alvast bedankt en hopelijk tot ziens.</p></td> 
     <td width="45%" valign="top"> 
     <table height="auto" border="0" cellpadding="5px" class="icons" margin-top="0"> 
      <tr> 
      <td colspan="2"><h3>No matter what device.<br /> 
       We build natively.</h3></td> 
      </tr> 
      <tr> 
      <td><img src="http://mediabunker.com/newsletters/newsletter_201206/apple.png"/></td> 
      <td width="199"><div align="center">Apple iOS is the operating<br /> 
       system that powers the <br /> 
       iPhone, iPad and iPod touch.</div></td> 
      </tr> 
      <tr> 
      <td><img src="http://mediabunker.com/newsletters/newsletter_201206/android.png" /></td> 
      <td><div align="center">With partners like Google,<br /> 
       HTC and Motorola, Android is<br /> 
       the fastest growing mobile OS.</div></td> 
      </tr> 
      <tr> 
      <td><img src="http://mediabunker.com/newsletters/newsletter_201206/windows.png" /></td> 
      <td><div align="center">Together Microsoft and Nokia<br /> 
       support conventional users <br /> 
       with Windows Phone.</div></td> 
      </tr> 
      <tr> 
      <td><img src="http://mediabunker.com/newsletters/newsletter_201206/html5.png" /></td> 
      <td><div align="center">Looking for other platforms<br /> 
       like BlackBerry, Samsung <br /> 
       Bada or HTML5 &amp; CSS3?<br /> 
       We can build it!</div></td> 
      </tr> 
     </table></td> 
     </tr> 
    </table></div> 
    <div class="actie"> 
     <div align="center"><a href="http://www.mediabunker.com/products"><img src="http://mediabunker.com/newsletters/newsletter_201206/actie2.png" /></a></div> 
    </div> 
    <div class="footer" background-color="#000000" halign="center" height="40px"> 
    <table class="contact" border="0" HALIGN="center"> 
     <tr align="center"> 
     <td align="center" width="189px"><font color="white">Suikersilo-West 23 <br /> 
     1165 MP Halfweg</font></td> 
     <td align="center" width="189px"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:[email protected]">[email protected]</a></td> 
     <td align="center" width="189px"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td> 
     </tr> 
    </table> 
<img src="http://mediabunker.com/newsletters/newsletter_201206/footer.png" width="600"/></div></div> 
</body> 
</html> 

Qualcuno può aiutarmi a risolvere questo problema con Outlook? Ho usato elementi che non sono supportati da Outlook? Ho bisogno di più css in linea?

risposta

22

Io suggerirei di avere uno sguardo a www.emailology.org. Ho trovato molto utile quando si costruiscono email per Outlook. Come regola per le email HTML, le costruisco esclusivamente nelle tabelle e con gli stili sugli elementi. È orribile e come costruire dei brutti siti web anni fa, ma sfortunatamente sembra essere la migliore soluzione disponibile.

Per esempio, vorrei cambiare <p>-<p style="font-family: Helvetica; font-size: 12px;"> e così via. Costruiscilo e formattalo come faresti normalmente, ma quando sei abbastanza felice da testarlo copia tutti gli stili in linea.

Dai un'occhiata alla Emailology però. È una grande risorsa.

+0

Grazie per il suggerimento sito :-). –

1

ci sono un numero enorme di guide là fuori che vi aiuterà con questo come prospettiva è davvero traballante con l'HTML, per esempio dosent sostegno s nidificato', che si sta utilizzando.

Problemi correlati