2013-08-05 58 views
2

首先,請原諒我的英語和我的HTML,我既不是英語也不是開發人員。我正在嘗試爲我的客戶構建一個HTML郵件,他們希望通過複製/粘貼到他們的Gmail客戶端發送郵件。 我已經從mailchimp下載了一個模板並對其進行了自定義。該HTML看起來像這樣:發送郵件到Gmail客戶端中心

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 



    <title>*|MC:SUBJECT|*</title> 

<style type="text/css"> 
    #outlook a{ 
     padding:0; 
    } 

    body{ 
     width:100% !important; 
    } 
    .ReadMsgBody{ 
     width:100%; 
    } 
    .ExternalClass{ 
     width:100%; 
    } 
    body{ 
     -webkit-text-size-adjust:none; 
    } 
    body{ 

     margin:0; 
     padding:0; 
    } 
    img{ 
     border:0; 
     height:auto; 
     line-height:100%; 
     outline:none; 
     text-decoration:none; 
    } 
    table td{ 
     border-collapse:collapse; 
    } 
    #backgroundTable{ 
     height:100% !important; 
     margin:0; 
     padding:0; 
     width:100% !important; 
    } 

    body,#backgroundTable{ 
     background-color:#FAFAFA; 
    } 

    #templateContainer{ 
     border:1px solid #DDDDDD; 
    } 
</style></head> 
<body align="center"> 
    <center> 
     <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" align="center"> 
      <tr> 
       <td align="center" valign="top"> 

        <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader"> 
         <tr> 
          <td valign="top" class="preheaderContent"> 


           <table border="0" cellpadding="10" cellspacing="0" width="100%"> 

           </table> 


          </td> 
         </tr> 
        </table> 

        <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer"> 
         <tr> 
          <td align="center" valign="top"> 

           <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader"> 
            <tr> 
             <td class="headerContent"> 

              </br> 
              <img src="http://gallery.mailchimp.com/7243c1f17089e9e1ebba4fe7e/images/logo_couleur.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext> 


             </td> 
            </tr> 
           </table> 

          </td> 
         </tr> 
         <tr> 
          <td align="center" valign="top"> 

           <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody"> 
            <tr> 
             <td valign="top"> 
              <table border="0" cellpadding="0" cellspacing="0" width="600"> 
               <tr> 
                <td valign="top" class="bodyContent"> 


                 <table border="0" cellpadding="20" cellspacing="0" width="100%"> 
                  <tr> 
                   <td valign="top"> 
                    <div mc:edit="std_content00"> 

內容等

當我複製/粘貼,並與Gmail它能正確呈現在我的手機,但該電子郵件不是Gmail客戶端中心件發送。

任何幫助將非常感謝!

非常感謝。

+1

你必須使用內聯樣式--gmail去掉任何樣式表或樣式標籤。小心你的餐桌嵌套 - 我聽說有些客戶不會呈現深度較深的餐桌 – Pete

回答

4

最好的方法是嵌套你的表。

有一個以子表格爲中心的包裝表。

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td align="center"> 

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
    <tr> 
    <td> 
     YOUR EMAIL CONTENT GOES HERE 
    </td> 
    </tr> 
    </table> 

    </td> 
    </tr> 
</table> 

此外,Gmail是一個反覆無常的郵件客戶端。如果您有黑色鏈接,則需要使用#000001,否則gmail將使用默認的藍色渲染這些鏈接。

確保所有圖像都顯示爲無邊框的塊元素,否則它會在每個圖像周圍添加空白區域,甚至是間隔區。

如果您不希望電話號碼在gmail上默認點擊,您需要將這些電話號碼包裝到空的定位標記中。

而html-email的一條黃金法則是:內聯樣式。

希望這會有所幫助! :)

+0

親愛的拉科恩,你是我今天的光明!有效 ! –

+0

很高興能幫到你! :) –