อีเมล HTML - ช่องว่างระหว่างรูปภาพใน Outlook 2013

แก้ไขปัญหาแล้ว - การเปลี่ยนความสูงบรรทัดของ tds ที่มีรูปภาพเป็นความสูงของรูปภาพ แทนที่จะเป็น 0 ช่วยแก้ไขช่องว่างและไม่ทำให้เลย์เอาต์ในไคลเอนต์อื่นเสียหาย ดังนั้น

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>

คุณกำลังประสบปัญหาเนื่องจากคุณกำลังจัดวางเค้าโครงผิดทั้งหมด คุณไม่จำเป็นต้องแบ่งภาพนาฬิกาออกเป็นหลายๆ ส่วน และไม่ควรมีภาพที่มีตัวอักษร 'DS' จากชื่อตรงกลางอย่างแน่นอน

เนื่องจากคุณมีเลย์เอาต์ที่ซับซ้อน จึงควรใช้โคลสแปนและตารางที่ซ้อนกัน ซึ่งเป็นเทคนิคที่สะอาดกว่าการตัดภาพเป็นชิ้นเล็กๆ รูปภาพที่ตัดในแนวนอนมักจะทำให้เกิดปัญหา - หากไม่ได้อยู่ในการส่งครั้งแรก Outlook จะบังคับให้มีช่องว่างในนั้นหากส่งต่อไปแล้ว หากคุณต้องตัดภาพ ให้ลองทำในแนวตั้ง เพราะภาพจะยังคงอยู่ในไคลเอนต์ทั้งหมดอย่างสมบูรณ์

นอกจากนี้ แนวทางปฏิบัติที่ดีคือมี CTA ทั้งหมด (คำกระตุ้นการตัดสินใจ) และสำเนา/ข้อความที่สำคัญในรูปแบบ html ไม่ใช่รูปภาพ เนื่องจากไคลเอ็นต์ส่วนใหญ่จะบล็อกรูปภาพตามค่าเริ่มต้น อีเมลที่มีอัตราส่วนรูปภาพต่อข้อความไม่ดีก็ถือเป็นสแปมเช่นกัน

ลองดูสิ่งนี้:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

ผลลัพธ์ที่ดีที่สุดสำหรับผู้ส่งอีเมลสามารถทำได้โดยการแบ่งภาพในแนวตั้ง (ไม่ใช่แนวนอน) และจัดเรียงเป็นหลาย ๆ ภาพซ้อนกันในแถวเดียว มันจะทำงานได้อย่างไร้ที่ติกับไคลเอนต์ทั้งหมด