Email HTML - celah antar gambar di Outlook 2013

Saya sedang menulis email HTML yang terlihat bagus di setiap klien email utama kecuali Outlook 2013, yang menambahkan celah vertikal di antara potongan gambar saya. Sayangnya saya belum menginstal Outlook 2013 di komputer saya sehingga menyulitkan pengujian, namun tangkapan layar dari klien saya menunjukkan tampilannya seperti ini - tangkapan layar dari celah yang mengganggu

Kode saya tersedia di sini - versi HTML.

Saya tidak tahu apa lagi yang bisa saya lakukan untuk menghilangkan kesenjangan - Saya telah menetapkan tinggi garis untuk tds dan gambar ke nol, saya telah mengatur gambar untuk ditampilkan: blok, saya telah mengatur tabel ke perbatasan 0, cellpadding dan spasi sel nol, dan border-collapse: runtuh. Apa lagi yang bisa saya lakukan untuk memperbaikinya?

Diedit untuk menambahkan - Saya sebenarnya tidak yakin apakah ada celah antara gambar atau baris tabel. Dari tangkapan layar sepertinya itu adalah baris tabel.


html email outlook html-email outlook-2013
person Emma W    schedule 08.11.2013    source sumber

Jawaban (3)


arrow_upward
14
arrow_downward

Masalah terpecahkan - mengubah tinggi garis tds yang berisi gambar ke tinggi gambar, bukan 0, menyelesaikan kesenjangan dan tidak merusak tata letak di klien lain. Jadi

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>
person Emma W    schedule 08.11.2013
comment
Itu adalah penemuan yang luar biasa. Belum pernah menemukan perbaikan itu sebelumnya. - person John; 08.11.2013
comment
John benar bahwa memprogram tata letak email secara berbeda akan meminimalkan masalah ini. Itu adalah teknik yang saya gunakan sepanjang waktu. Hindari colspans. Meski bisa berhasil, buat apa mempersulit. Jawaban ini adalah solusi tercepat dan paling efektif. - person Darryl Vos; 08.11.2013
comment
Eesh, aku akan mulai mengacak-acak rambutku karena yang satu ini. Perbaikan yang bagus. - person Aaron Hipple; 18.02.2014

arrow_upward
3
arrow_downward

Anda mengalami masalah karena Anda salah melakukan seluruh tata letak. Anda tidak perlu memecah gambar jam tangan Anda menjadi beberapa bagian, dan tentu saja tidak boleh ada gambar yang mengandung huruf 'DS' dari judulnya di tengahnya.

Karena Anda memiliki tata letak yang rumit, lebih baik menggunakan colspans dan tabel bersarang - ini adalah teknik yang lebih bersih daripada memotong gambar menjadi potongan-potongan kecil. Gambar yang dipotong secara horizontal akan selalu menimbulkan masalah - jika bukan pada pengiriman awal, Outlook akan memaksakan celah di sana jika tetap diteruskan. Jika Anda harus memotong gambar, cobalah melakukannya secara vertikal karena gambar tersebut akan tetap utuh sempurna di semua klien.

Ini juga merupakan praktik yang baik untuk memiliki semua CTA (ajakan bertindak) dan salinan/teks penting dalam html, bukan gambar, karena sebagian besar klien memblokir gambar secara default. Memiliki email yang memiliki rasio gambar dan teks yang buruk juga dianggap sebagai spam.

Cobalah ini:

<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>
person John    schedule 08.11.2013
comment
Saya sebelumnya menggunakan colspans tetapi mengalami lebih banyak masalah di Outlook (dengan lebar sel yang dirender secara tidak benar) dibandingkan sekarang (dengan tinggi sel). Saya setuju bahwa memiliki judul sebagai gambar adalah praktik yang buruk tetapi telah diminta untuk menjaganya tetap seperti ini karena tampaknya font adalah bagian penting dari pencitraan merek - ini sedekat yang saya bisa :/ Saya sebenarnya sekarang telah menyelesaikan tabel Outlook masalah ketinggian - mengubah tinggi garis di tds dari 0 ke tinggi baris tampaknya memperbaiki masalah. Terima kasih! - person Emma W; 08.11.2013
comment
@EmmaW Anda mungkin menganggap ini berguna untuk masalah Outlook yang tidak sesuai lebar colspan. - person John; 08.11.2013

arrow_upward
0
arrow_downward

keluaran terbaik untuk pengirim email dapat dilakukan dengan mengiris gambar secara vertikal, (bukan horizontal) dan menyusunnya dalam beberapa sarang dalam satu baris. Ini akan bekerja dengan sempurna di semua klien

person Umer Farook    schedule 25.11.2014