web-dev-qa-db-ja.com

OutlookのHTMLメール

私はhtmlでメールのテンプレートを作成しています。Appleメールクライアント、Gmail、hotmail、Windowsメール2006で正常に機能します。Outlookでは機能せず、拡張され、フォントファミリが機能しておらず、伸びているため、ページの中央に配置されていません。

これは私のコードです。

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

誰かが見通しのためにこれを修正するのを手伝ってくれる？ Outlookでサポートされていない要素を使用しましたか？もっとインラインCSSが必要ですか？

htmlemailoutlook
11
Jane

www.emailology.org をご覧になることをお勧めします。 Outlook用の電子メールを作成するときに非常に便利であることがわかりました。 HTMLメールのルールとして、私はそれらを純粋にテーブルで作成し、要素にスタイルを設定します。それは恐ろしく、何年も前に悪いウェブサイトを構築するようなものですが、残念ながらそれは利用可能な最良の解決策のようです。

たとえば、<p>を<p style="font-family: Helvetica; font-size: 12px;">に変更します。通常どおりにビルドしてスタイルを設定しますが、テストするのに十分満足したら、すべてのスタイルをインラインでコピーします。

ただし、Emailologyをご覧ください。それは素晴らしいリソースです。

24
SpaceBeers

このサイトでは、どのCSS属性がどの電子メールクライアントで機能するか、どのCSSセレクターがサポートされているか、CSSスタイルを定義する場所（スタイルタグとヘッドスタイルとインライン）の概要（PDFダウンロードが可能）を提供しています。

http://www.campaignmonitor.com/css/

この投稿は追加のソースを提供します： https://stackoverflow.com/a/1019166/1143126

7
RobertG

outlookはHTMLで非常に不安定であるため、これに役立つガイドが多数あります。たとえば、使用しているネストされたものはサポートされていません。

1
Stuart