Tabel HTML di Email: Apa yang mungkin salah?

Jika Anda sudah lama berkecimpung di industri email, Anda mungkin pernah mengalami sejumlah masalah dengan kampanye email Anda. Dari gambar yang hilang hingga masalah keterkiriman, pemasaran email penuh dengan tantangan. Namun, sesuatu yang mungkin tidak Anda pertimbangkan adalah apa yang bisa salah dengan tabel—kode sebenarnya—yang menjadi dasar email Anda.

Sayangnya, ada banyak hal yang salah dengan tabel HTML. Hari ini, kami ingin memecah beberapa masalah paling umum yang terlihat dengan tabel HTML dan memberi Anda beberapa tip untuk memastikan Anda tidak mengalami masalah yang sama di email Anda sendiri.

Mengapa kami menggunakan tabel

Pertama, penyegaran cepat tentang mengapa kami menggunakan tabel HTML untuk mengkodekan email. Seperti yang telah kita bahas sebelumnya, kampanye pemasaran email memerlukan pertimbangan pengkodean khusus mereka sendiri. Meskipun web dan email dibuat dengan teknologi yang sama (HTML dan CSS), aplikasi email tidak mematuhi standar yang sama seperti browser web. Setiap aplikasi email memiliki mesin rendering sendiri yang menentukan kode apa yang didukung dan bagaimana email ditampilkan. Berita buruknya bagi kami adalah semua mesin rendering tersebut mendukung tag HTML dan properti CSS yang berbeda.

Karena itu, kami sebagian besar tidak dapat menggunakan prinsip pengkodean yang sama yang digunakan dalam desain web. Untuk memastikan bahwa email ditampilkan dengan benar di sebagian besar klien email, kami harus menggunakan tabel HTML untuk membuat struktur kampanye email.

Meskipun ini telah berubah baru-baru ini, terutama dengan pembaruan utama Gmail tahun lalu, beberapa klien email masih tidak mendukung banyak HTML dan CSS. Yang paling menonjol: keluarga klien email Microsoft Outlook, yang menggunakan Microsoft Word sebagai mesin rendering mereka. Karena Outlook masih sangat populer (saat ini #5 di pelacak Pangsa Pasar Klien Email kami), perancang email masih harus menggunakan tabel dalam beberapa kapasitas jika mereka ingin kampanye mereka ditampilkan dengan benar untuk pelanggan.

Dan ketika kita harus bergantung pada tabel HTML, ada beberapa hal yang bisa salah…

Membuat segalanya menjadi rumit

Salah satu masalah paling umum yang kita lihat dengan menggunakan tabel adalah tata letak yang terlalu rumit. Ini terutama berlaku untuk templat email lawas yang belum diperbarui dalam beberapa tahun.

Sampai baru-baru ini, sebagian besar email dibuat dengan banyak tabel. Tabel di dalam tabel di dalam tabel—praktik yang dikenal sebagai bersarang.

Saat Anda menyarangkan beberapa tabel dalam tabel lain, kemungkinan besar Anda akan mengalami masalah dalam kode Anda. Sangat mudah untuk secara tidak sengaja meletakkan tabel di tempat yang salah atau menempelkan di atas tag HTML penting saat menggeser sesuatu. Dan untuk beberapa klien (melihat Anda, Lotus Notes), Anda dapat melihat email ditampilkan dengan buruk saat Anda menyusun tabel terlalu dalam. Karena alasan inilah kami merekomendasikan membangun email dengan pendekatan modular, sesuatu yang ditulis oleh teman kami Brian Graves. Dan cobalah untuk menjaga tabel bersarang seminimal mungkin. Tabel bersarang hampir tidak dapat dihindari, tetapi menjaga kedalaman bersarang hingga maksimal 4-6 tabel akan membantu menghindari masalah apa pun.

Mirip dengan sarang yang rumit, desain yang terlalu rumit juga bisa menjadi masalah. Bukan hal yang aneh untuk melihat beberapa email kolom, tetapi ketika Anda mulai menambahkan terlalu banyak kolom ke email, Anda menyiapkan diri Anda untuk kemungkinan kegagalan.

Beberapa klien email memiliki masalah bahkan dengan matematika dasar. Versi Microsoft Outlook tertentu diketahui menambahkan spasi ekstra ke kolom tabel, merusak tata letak email. Meskipun Anda mungkin berpikir bahwa menggunakan empat sel tabel yang disetel ke lebar 25% masuk akal, Outlook akan menambahkan ruang ekstra ke sel tersebut dan menyebabkan tata letak menjadi lebih lebar dari 100%. Email yang dihasilkan akan menjatuhkan beberapa sel tersebut ke barisnya sendiri, merusak kampanye email Anda yang dirancang dengan baik dan direncanakan dengan sempurna.

Menjaga tata letak email Anda tetap sederhana membantu menghindari potensi masalah dengan kampanye Anda dan membuat pelanggan Anda senang.

Tag hilang

Email biasanya memiliki banyak kode di dalamnya. Dan sebagian besar tim email bekerja dengan jadwal yang sangat cepat dan padat. Kombinasi ini dapat menyebabkan kesalahan yang dapat merusak kampanye email.

Sebagai penyegaran cepat, mari kita lihat bagaimana HTML ditulis. HTML terdiri dari tag yang mengelilingi konten. Dalam kebanyakan kasus, markup yang tepat membutuhkan tag pembuka dan penutup. Ambil tabel HTML ini sebagai contoh:

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

Anda dapat melihat bahwa ada tiga tag yang berbeda: Tabel, baris tabel, dan sel tabel. Tag ini dibuka, lalu ditutup (dilambangkan dengan simbol /).

Meskipun HTML adalah bahasa markup pemaaf, klien email dan mesin rendering mereka sering tersedak ketika tag HTML hilang. Sayangnya, tag penutup yang hilang adalah masalah yang sangat umum dalam email. Waktu penyelesaian yang cepat tersebut dapat menyebabkan desainer email mengkode terlalu cepat dan lupa untuk menutup tabel, baris, atau sel. Meskipun ini bisa baik di beberapa klien, di klien lain itu akan menyebabkan kampanye yang rusak.

Alat seperti Layanan Validasi Markup W3C dapat membantu mengidentifikasi tag yang hilang. Tag yang hilang dan markup yang dibentuk dengan tidak benar juga merupakan alasan kami merekomendasikan penggunaan template email atau alat seperti Builder's Partials and Snippets untuk membantu membuat email. Mereka tidak hanya membantu memastikan bahwa kode Anda ditulis dengan baik dan diuji dengan benar, tetapi memiliki manfaat tambahan untuk mempercepat alur kerja Anda—memungkinkan Anda mencapai tenggat waktu yang ketat dan membuat tim Anda senang.

Atribut yang hilang

Sama seperti tag yang hilang dapat menyebabkan masalah, atribut HTML yang hilang pada tabel dapat menyebabkan desain yang tampak funky.

Atribut HTML adalah properti tambahan yang dapat diatur pada tag HTML. Properti ini mengontrol hal-hal seperti lebar dan tinggi elemen, perataan, dan bahkan spasi. Spasi tak terduga di sekitar sel tabel adalah salah satu masalah paling umum yang akan Anda lihat dengan tabel HTML.

Hampir semua aplikasi email (dan browser web) menambahkan gaya mereka sendiri ke tabel HTML. Tabel HTML secara tradisional digunakan untuk menampilkan data tabular dan pada awalnya tidak dimaksudkan untuk meletakkan dan mendesain konten. Karena itu, kita perlu mengganti perilaku default browser dan aplikasi email untuk memastikan tabel ditampilkan dengan benar.

Dengan menambahkan atribut cellpacing dan cellpadding ke tabel—dan menyetel keduanya ke nol—kami dapat memastikan tidak ada klien email yang akan menambahkan ruang ekstra ke atau di sekitar sel tabel mana pun.

 <table cellpadding="0" cellspacing="0"> </table>

Demikian juga, jika Anda mengalami masalah dengan lebar tabel atau perataan konten tabel, Anda harus memastikan bahwa Anda tidak melupakan atribut lebar atau perataan pada tabel atau sel tabel.

Pelajari cara memecahkan masalah

Ingin mempelajari cara memecahkan masalah kampanye email Anda sendiri dan menghindari masalah yang memalukan bagi pelanggan Anda? Bergabunglah dengan kami di Litmus Live untuk lokakarya lengkap tentang pemecahan masalah email seperti seorang profesional. Kami akan membahas jebakan email yang paling umum, solusinya, dan metode terbaik untuk memecahkan masalah kampanye.

Dapatkan tiket Litmus Live Anda! Daftar hari ini untuk merayakan email bersama kami! Daftar sekarang →