Kesalahan Pengkodean Email Paling Umum dan Cara Menghindarinya

Terlepas dari semua lonceng dan peluit email Anda, kesalahan pengkodean dapat merusaknya sepenuhnya. Hanya satu tautan yang dipersingkat secara salah atau format warna yang salah — dan email Anda akan terlihat buruk, terutama jika pengguna memutuskan untuk memeriksanya melalui ponsel cerdas alih-alih klien email web atau beralih ke gadget dengan resolusi layar yang berbeda.

Dalam posting ini, kita akan berbicara tentang kesalahan pengkodean email HTML yang umum dan membagikan beberapa saran untuk menghindarinya.

Dari mana masalah tampilan email berasal?

Sederhananya, ada dua kemungkinan alasan pengguna melihat email Anda di luar cara yang Anda rencanakan. Yang pertama terkait dengan karakteristik teknis perangkat pengguna Anda. Yang kedua adalah klien email, lebih tepatnya — mesin renderingnya.

Karakteristik teknis perangkat pengguna

Setidaknya ada dua karakteristik teknis dari perangkat apa pun yang harus Anda pertimbangkan:

1. Resolusi layar — ukuran layar, diberikan dalam piksel. Misalnya, iPhone X memiliki resolusi layar 1125x2436 piksel. Jika email Anda berisi dua kolom teks, 600 piksel setiap kolom, itu tidak akan ditampilkan dengan benar.
2. PPI, atau piksel per inci — jumlah piksel dalam satu inci layar. PPI iPhone X adalah 458. Bayangkan: Anda perlu menambahkan tombol tindakan ke email Anda. Jika tombolnya kurang dari 44 poin, yang untuk iPhone X berarti 132x132 piksel, itu akan memakan waktu kurang dari sepertiga inci persegi ruang layar, dan pengguna tidak akan bisa mengetuknya.

Satu hal lagi yang perlu diingat: pengguna sering memutar perangkat seluler mereka, sehingga email Anda akan terlihat rapi dan memiliki fungsionalitas penuh baik dalam tampilan potret maupun lanskap.

Untuk mencegah masalah yang terkait dengan karakteristik teknis perangkat pengguna, Anda harus menggunakan desain email yang responsif.

Pertama, Anda harus menambahkan kueri media ke head email Anda. Misalnya, @media screen dan @media screen (max-width: 600px) 600 piksel (max-width: 600px) berarti desain email akan dioptimalkan jika lebar layar kurang dari 600 piksel. Jika lebar layar lebih dari 600 piksel, pengguna akan melihat versi lebar tetap dari email ini.

Kedua, Anda harus membuat email dalam bentuk tabel dengan sel di dalamnya:

 <tabel>
<tr>
    <td>...</td>
</tr>
</tabel>

Kemudian, Anda menambahkan gaya untuk setiap sel, misalnya:

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Namun, bahkan setelah mengambil langkah-langkah ini, Anda masih dapat mengalami masalah dengan menampilkan email Anda. Sumber masalahnya adalah mesin rendering klien email.

Klien email

Sumber kedua dari kemungkinan masalah tampilan adalah klien email yang digunakan penerima Anda untuk membuka kampanye Anda. Bagian inti dari klien email adalah mesin rendering. Ia menerima email sebagai skrip kode yang panjang, memprosesnya, dan mengeluarkannya dengan cara yang biasa kita lakukan untuk menerima email: teks yang dapat dipahami, terstruktur, dan diformat dengan gambar, tautan, dan media lainnya.

Lihatlah contoh di bawah ini. Ini adalah potongan kode dari email promosi — seperti yang dilihat oleh mesin rendering Gmail. Jika email ini ditampilkan seperti itu kepada calon pelanggan, mereka tidak akan memotong kode dan memahami bahwa ada kode promo untuk diskon 40%.

Setiap klien email memiliki mesin renderingnya sendiri, yang berarti bahwa email yang sama, dibuka melalui klien email yang berbeda, dapat memiliki tampilan yang sama sekali berbeda.

Berikut adalah daftar klien email paling populer di seluruh dunia. Jelas, penerima Anda menggunakan satu atau bahkan banyak dari mereka untuk membuka email yang Anda kirim.

Semua klien email ini memiliki beberapa kekhasan yang harus Anda perhitungkan saat mengkodekan email HTML.

Misalnya, Apple Mail untuk iOS tidak mendukung:

• properti CSS inline-size sebaris;
• @media (orientation) kueri media;
• tautan jangkar;
• Format gambar HDR, PPM, dan SVG, dan banyak lagi.

Gmail mendukung berbagai properti CSS dan kueri media selain:

• box-shadow, text-shadow, dan beberapa properti CSS lainnya;
• @media (prefers-color-scheme) media query, dan banyak lagi.

Kesalahan pengkodean email yang umum dan cara menghindarinya

Saran umum terbaik untuk menghindari kesalahan pengkodean email adalah membatasi inventaris Anda ke kode yang didukung oleh sebagian besar klien email, tidak peduli berapa lama versi mereka. Dengan kata sederhana, untuk mundur dan membuat kode seolah-olah tahun 1999. Misalnya, secara luas disarankan untuk menggunakan:

• CSS2 bukannya CSS3,
• HTML4 bukannya HTML5,
• warna bukan gambar latar belakang,
• table-layout alih table-layout alih <div> ,
• CSS sebaris alih-alih set gaya atau blok <style> .

Pendekatan ini diyakini dapat mencegah sebagian besar masalah dengan menampilkan email. Tapi mari kita lihat lebih dekat beberapa kesalahan pengkodean tertentu yang dapat merusak email Anda dan mencoba mencari solusi untuk itu.

Tidak ada versi teks biasa

Masalah potensial. Beberapa klien email, seperti Outlook dan Gmail, dapat menetapkan email Anda sebagai spam jika tidak memiliki versi teks biasa. Selain itu, terkadang klien email memiliki masalah dengan rendering kode HTML. Karena itu, email HTML dapat ditampilkan dengan tidak benar, sedangkan email teks biasa selalu terlihat sama.

Pencegahan. Tambahkan versi teks biasa ke email Anda. Untungnya, sebagian besar penyedia layanan email menambahkannya secara otomatis.

Anda dapat menerapkan email teks biasa ke dalam strategi pemasaran email Anda. Pertama-tama, email semacam itu terlihat lebih pribadi dan dengan demikian dapat meningkatkan komunikasi Anda dengan pelanggan. Selain itu, beberapa orang lebih suka langsung ke inti email, dan tata letak yang penuh warna membuat mereka bingung.

Menggunakan JavaScript, ActiveX, Flash, dan sejenisnya

Masalah potensial. Sebagian besar klien email tidak mendukung bahasa, kerangka kerja, dan plugin ini, sehingga sebagian email Anda tidak akan dirender, dan pelanggan Anda tidak akan melihat apa pun kecuali ruang kosong. Selain itu, email dapat diblokir oleh perangkat lunak anti-virus.

Pencegahan. Pertahankan bahasa yang Anda gunakan untuk mengkodekan email ke HTML dan CSS. Jika Anda perlu menambahkan beberapa video atau audio, unggah ke situs web, dan berikan tautan ke sana.

Perhatikan bagaimana NiftyImages menghadirkan fitur produk baru: perusahaan memilih urutan gambar meskipun itu bisa menjadi video penjelasan.

Terlalu banyak pengalihan

Masalah potensial. Pengalihan, meskipun diperlukan untuk analitik, dapat lebih berbahaya daripada baik untuk email Anda. Misalnya, mereka membuat waktu pemuatan halaman web secara signifikan lebih lama. Kemudian, ada kemungkinan browser pengguna memblokir pengalihan — dengan demikian, URL tidak akan dapat diakses.

Pencegahan. Cobalah untuk menghindari pengalihan. Namun jika Anda masih harus menggunakannya, periksa berapa lama waktu yang dibutuhkan untuk memuat URL tujuan — uji email Anda sebelum meluncurkan seluruh kampanye. Pertimbangkan pengalaman pelanggan Anda: apakah mereka bersedia menunggu pemuatan URL atau tidak.

Tautan yang dipersingkat

Masalah potensial. Tautan yang dipersingkat membuat email Anda berisiko berakhir di folder spam. Soalnya di link yang dipersingkat, URL tujuan tidak jelas. Dengan kata sederhana, itu bisa mengarah ke mana saja. Secara alami, peretas dan spammer memanfaatkannya.

Pencegahan. Jangan gunakan tautan yang dipersingkat. Jika tujuan Anda adalah membuat email Anda terlihat rapi, tanpa URL yang panjang, sebaiknya gunakan tag HTML berikut: <a href="URL">...</a> . Anda dapat memasukkan URL apa pun di sini, berapa pun panjangnya.

Jika Anda masih menginginkan tautan yang dipersingkat, perpendek URL Anda sendiri daripada menggunakan alat pihak ketiga. Setidaknya pindai daftar hitam penyingkat tautan terlebih dahulu.

Ukuran file badan email besar

Masalah potensial. Baik klien email dan penyedia layanan email memiliki batas ukuran badan email karena dirancang untuk mentransfer informasi dalam volume yang relatif kecil. Jika Anda tidak memenuhi batasan tersebut, email Anda mungkin terpotong — akhirannya akan disembunyikan.

Lihatlah buletin dari label musik. Saat dibuka melalui Gmail, itu terpotong.

Untuk melihat versi lengkapnya, pelanggan perlu mengetuk tautan.

Ukuran file badan email yang besar juga dapat menyebabkan masalah dengan kemampuan pengiriman. Selain itu, karena ukurannya yang besar, email dapat dianggap sebagai ancaman keamanan oleh perangkat lunak anti-virus pengguna.

Pencegahan. Periksa batas ukuran badan email dari penyedia layanan email Anda dan klien email yang digunakan pelanggan Anda. Misalnya, Google mengklaim batas ukuran badan email 200 KB. Tetapi secara luas disarankan untuk membatasi email Anda hingga 100 KB untuk memenuhi persyaratan sebagian besar klien email. Sebenarnya email dari contoh diatas memiliki ukuran 136 KB.

Terlalu banyak font dan warna

Masalah potensial. Karena perbedaan antara klien email, tidak semua font dan warna dapat ditampilkan dengan benar. Selain itu, tidak semua font dan warna berpadu dengan baik satu sama lain — jadi Anda berisiko membuat desain email yang lemah.

Anda juga harus ingat bahwa perangkat pelanggan Anda memiliki pengaturan layar yang berbeda — seperti kecerahan, misalnya. Dan saat Anda mencoba membuat email Anda lebih jelas, pengguna mungkin mengalami kerusuhan warna ini.

Ini adalah contoh desain email yang dipertanyakan: setiap blok memiliki warnanya sendiri; ini banyak mengalihkan perhatian pengguna dari informasi yang paling penting.

Pencegahan . Pilih font yang ramah email, seperti Arial, Comic Sans MS, Courier New, Times New Roman, atau Verdana: font tersebut didukung oleh sebagian besar klien email populer. Ukuran font teks Anda tidak boleh kurang dari 12-13 px; jika tidak, pengguna harus memperbesar email Anda atau mengalihkan pandangan mereka.

Untuk warna, Anda tidak boleh menggunakan lebih dari dua: satu untuk blok teks umum, dan satu lagi untuk menyorot hal-hal penting, serta untuk tautan dan tombol. Pastikan warna yang Anda pilih cocok dengan latar belakang dan terlihat bagus jika pengguna beralih ke mode gelap.

Menyalin kode HTML template email dari editor teks atau situs web

Masalah potensial. Jika Anda menggunakan Microsoft Word atau sejenisnya untuk membuat teks untuk email Anda dan kemudian hanya menyalinnya, Anda berisiko menangkap beberapa pemformatan yang tidak perlu, yang dapat merusak tata letak email Anda. Dan jika Anda menyalin gambar atau beberapa bagian teks dari situs web, elemen JavaScript atau Flash dapat ditambahkan ke email Anda.

Pencegahan. Untuk membuat kode email, gunakan editor teks yang tidak menambahkan pemformatannya sendiri, seperti Notepad untuk Windows atau TextEdit untuk Mac. Ada juga beberapa alat online yang dapat membersihkan pemformatan Anda, seperti TextCleanr. Anda juga dapat menggunakan alat Pembersih HTML, yang memungkinkan Anda membuat email di editor yang mudah digunakan dan memeriksa kode pada saat yang bersamaan.

Menggunakan kode warna HEX tiga digit

Masalah potensial. Meskipun format warna tiga dan enam digit harus setara, terkadang klien email membuat format tiga digit dengan cara yang sedikit berbeda. Misalnya, dengan Gmail, Anda berisiko mendapatkan warna ungu alih-alih hitam yang Anda rencanakan: color: #000 berubah menjadi color: #500050 .

Pencegahan . Sebagai aturan praktis, tetap berpegang pada format warna enam digit dan pastikan Anda menggunakannya di seluruh email.

lampiran

Masalah potensial. Biasanya, spammer dan peretas melampirkan beberapa file ke email mereka. Jika Anda menambahkan lampiran, itu mungkin dianggap sebagai ancaman keamanan.

Pencegahan. Berikan tautan ke halaman pemuatan file alih-alih menambahkan file langsung ke email.

Berikut adalah contoh bagaimana Anda dapat memberi pengguna akses ke file yang Anda janjikan. Perhatikan bagaimana tautan ditetapkan: itu harus berupa teks yang dapat diklik dan dipahami sehingga pengguna tahu apa yang akan terjadi ketika mereka mengetuk tautan.

Teks alternatif tidak ada

Masalah potensial . Beberapa pengguna menonaktifkan pengunduhan gambar di browser mereka. Jika mereka menerima email, termasuk gambar tanpa teks alternatif, mereka hanya akan melihat ruang kosong alih-alih gambar dan tidak akan mengerti maksud email tersebut.

Ini berfungsi sama ketika koneksi internet seseorang terlalu rendah untuk mengunduh gambar dengan cukup cepat. Teks alternatif membantu mengatasi masalah ini dengan cara: saat mengunduh gambar salah, pengguna dapat melihat teks sebagai gantinya.

Pencegahan. Tambahkan atribut alt ke semua gambar yang Anda gunakan. Pastikan Anda melakukannya dengan benar — dengan menambahkannya ke tag img : <img alt="text"> . Batasi teks alt hingga 125 karakter, termasuk spasi. Biasanya cukup menambahkan beberapa kata saja yang menggambarkan gambar dengan tepat. Jika Anda memiliki beberapa ruang tersisa, Anda dapat menambahkan beberapa konteks ke deskripsi ini.

Lihatlah kutipan email dari Sephora.

Jika Anda memeriksa kode email ini, Anda dapat menemukan CTA sebagai teks alternatif untuk gambar tersebut. Bahkan jika pengguna tidak melihat gambarnya, mereka akan tetap mengerti apa yang ditawarkan oleh merek tersebut.

Tata letak gambar saja

Masalah potensial. Jika email Anda hanya terdiri dari gambar dan tidak memiliki teks, Anda dapat mengalami masalah dengan pengiriman, tampilan, dan banyak lagi. Misalnya, jika pengguna memblokir pengunduhan gambar, mereka tidak akan melihat apa pun di email Anda. Kedua, banyak gambar membuat ukuran badan email lebih besar, dan klien email cenderung memotongnya. Ketiga, pengguna tidak akan dapat menemukan email Anda di folder melalui pencarian kata.

Pencegahan. Saat membuat email, gabungkan teks dan gambar. Jangan lupa untuk menambahkan versi teks biasa dari email dan teks alternatif untuk gambar; pertimbangkan saran lain yang kami berikan di atas.

Lihatlah email ini dari Ecwid. Ini memiliki desain responsif yang mencakup tata letak tabel dan kueri media, seperti max-width: 570px . Email tersebut menggabungkan berbagai jenis konten: gambar dan teks yang penuh warna dan menawan. Format warna enam digit digunakan, misalnya, color:#979797 atau color:#4A4A4A . Tidak banyak gambar di email, jadi ukuran tubuhnya tidak terlalu besar. Terlebih lagi, temukan tautan yang dipersingkat atau pengalihan di email. Secara keseluruhan, email ini memenuhi sebagian besar rekomendasi yang diberikan di atas.

Jadi, kami telah melihat kesalahan pengkodean email HTML yang paling umum. Terapkan saran kami, dan jangan lupa untuk menguji email Anda sebelum mengirim: gunakan setidaknya tiga klien email populer untuk membuka email Anda; jika memungkinkan, periksa juga melalui perangkat yang berbeda. Emulator juga akan berguna.

Satu lagi cara untuk menghindari kesalahan pengkodean email

Ada satu kebenaran: Anda tidak akan membuat kesalahan pengkodean HTML jika Anda tidak membuat kode. Untungnya, desain email tanpa kode menunggu Anda dengan SendPulse.

Dengan editor seret dan lepas intuitif kami, kami telah mencegah Anda membuat kesalahan pengkodean email. Cukup tambahkan gambar, teks, atau video ke email Anda, atur font dan warna agar sesuai dengan gaya merek Anda, dan tambahkan tautan ke halaman media sosial Anda.

Untuk membuat semuanya lebih sederhana, Anda dapat memilih dari template email gratis kami. Semua email yang dibuat dengan SendPulse bersifat responsif, sehingga akan terlihat bagus di perangkat mana pun yang dipilih pengguna untuk membukanya.

Daftar periksa untuk menghindari kesalahan pengkodean email HTML yang umum

Di bawah ini Anda akan menemukan aturan utama tentang cara menghindari kesalahan pengkodean email HTML yang umum. Mengikuti aturan ini, Anda dapat menghindari masalah dengan kemampuan pengiriman dan menampilkan email Anda.

• Tambahkan versi teks biasa ke email Anda.
• Jangan gunakan JavaScript, ActiveX, Flash, atau sejenisnya. Jika Anda perlu menambahkan beberapa video atau audio, unggah ke situs web, dan berikan tautan ke sana.
• Cobalah untuk menghindari pengalihan untuk tidak menambah waktu pemuatan halaman web.
• Jangan gunakan tautan yang dipersingkat — ubah sepotong teks atau gambar menjadi tautan menggunakan HTML.
• Cobalah untuk membatasi ukuran badan email Anda hingga 100 KB — atau setidaknya periksa batas penyedia pengiriman Anda dan klien email yang paling sering digunakan pelanggan Anda.
• Pilih font yang ramah email, seperti Arial, Comic Sans MS, Courier New, Times New Roman, atau Verdana.
• Cobalah untuk tidak menggabungkan lebih dari dua warna dalam satu email — jika tidak, itu akan terlihat mengganggu.
• Jangan menyalin teks dan gambar untuk email Anda dari editor teks seperti MS Word atau situs web: ada risiko menangkap beberapa pemformatan yang tidak perlu.
• Gunakan format warna enam digit.
• Jangan lampirkan file — sebagai gantinya berikan tautan ke halaman pemuatan file.
• Jangan lupa untuk menambahkan teks alt ke gambar.
• Jangan membuat email hanya berisi gambar — selalu tambahkan beberapa teks.
• Jangan lupa untuk menguji email sebelum memulai kampanye. Gunakan setidaknya tiga klien email dan perangkat yang berbeda.

Dan tidak perlu memikirkan semua itu — mulailah menggunakan SendPulse secara gratis!