2012-06-21 17 views
10

Tôi đang tạo mẫu cho email bằng html, nó hoạt động tốt trong các ứng dụng email của apple, gmail, hotmail và cửa sổ thư 2006. Nó không hoạt động trong triển vọng, nó trải dài ra, họ phông chữ không làm việc và vì nó trải ra nó không tập trung vào trang.Email HTML trong triển vọng

Đây là mã của tôi;

<!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> 

Ai đó có thể giúp tôi sửa lỗi này để xem không? Tôi đã sử dụng bất kỳ yếu tố nào không được hỗ trợ bởi triển vọng? Tôi có cần thêm css nội tuyến không?

Trả lời

22

Tôi khuyên bạn nên xem www.emailology.org. Tôi đã tìm thấy nó rất hữu ích khi xây dựng email cho Outlook. Như một quy tắc cho các email HTML, tôi xây dựng chúng hoàn toàn trong các bảng và với các kiểu dáng trên các phần tử. Đó là khủng khiếp và như xây dựng các trang web xấu năm trước nhưng tiếc là nó có vẻ là giải pháp tốt nhất có sẵn. Ví dụ: tôi muốn thay đổi <p> thành <p style="font-family: Helvetica; font-size: 12px;"> v.v. Xây dựng nó và phong cách nó như bạn sẽ làm bình thường nhưng khi bạn đủ hạnh phúc để kiểm tra nó sao chép tất cả các phong cách nội tuyến.

Hãy xem qua Emailology. Đó là một nguồn tài nguyên tuyệt vời.

+0

Cảm ơn các trang web gợi ý :-). –

1

có một số lượng lớn các hướng dẫn sẽ giúp bạn thực hiện điều này vì triển vọng thực sự bị bẻ khóa với HTML, ví dụ như hỗ trợ dosent lồng nhau mà bạn đang sử dụng.