Rendering Email di Klien Email: Tantangan dan Solusi

Diterbitkan: 2019-01-15

Dalam artikel ini

Sebagai merek yang menggunakan pemasaran email, Anda perlu memastikan bahwa email Anda untuk pelanggan ditampilkan persis seperti yang Anda inginkan .

Sebagian besar email yang diterima di kotak masuk menunjukkan hal berikut:

  1. Klien email menampilkan "Klik di sini untuk mengunduh gambar" atau "Tampilkan gambar: untuk pesan ini/selalu untuk pengirim ini".
  2. Email yang menunjukkan tautan "Lihat email di browser" atau "Klik di sini untuk melihat email online" di bagian atas.

Yang pertama adalah karena klien email menonaktifkan gambar dari pengirim yang tidak dikenal sebagai langkah keamanan. Yang terakhir adalah langkah yang diambil oleh pengembang email untuk memastikan bahwa email yang Anda kirim ditampilkan tanpa gangguan dan pesan tersampaikan, terlepas dari beragam klien email atau perangkat yang digunakan pelanggan .

Tapi ada tantangan.

Klien email bermain dengan aturan mereka sendiri dan membuat email secara berbeda!

Pangsa Pasar Klien Email Litmus menunjukkan bahwa Apple Mail ( 44% termasuk email iOS untuk iPhone dan iPad), diikuti oleh Gmail ( 29% termasuk desktop dan seluler), Outlook ( 12% termasuk Outlook dan Outlook.com) dan Yahoo ! Mail ( 6% termasuk desktop dan seluler) adalah klien email yang paling umum digunakan pada Oktober 2018. Semua klien email ini menghadapi beberapa tantangan dalam menampilkan email persis seperti yang dirancang sejak awal.

Sumber: Lakmus

Mari kita selami lebih dalam berbagai tantangan yang mungkin Anda hadapi dengan merender email pada klien email yang berbeda, dan solusinya .

Klien Email: Tantangan dan Solusi

Apple iPhone

Apple iPhone mendukung elemen email interaktif seperti cinemagraph, GIF, video, hitung mundur, slider, gambar retina, dll. dan karenanya memberikan pengalaman pengguna yang sempurna . Oleh karena itu, ini adalah klien email paling populer.

Masalah rendering dalam model yang diperbarui: Ketika model iPhone diperbarui dengan layar yang lebih besar, itu menyebabkan masalah rendering email. Untuk mengatasi hal ini dan untuk memastikan bahwa email ditampilkan di semua perangkat iPhone, perbarui kueri media Anda menggunakan breakpoint 320px menjadi 414px untuk iPhone 8 plus. Selain menjaga lebar perangkat tetap, Anda bahkan dapat menjaga agar lebar tetap cair.

Tidak ada dukungan untuk ~ pemilih ketika digunakan dengan :hover atau :checkedselectors: iOS9 tidak memiliki dukungan untuk pemilih saudara umum ~ ketika digabungkan dengan pemilih pseudo-class :checked dan :hover. Untuk mendapatkan hasil yang serupa, seseorang dapat menggunakan pemilih saudara yang berdekatan + alih-alih ~.

Teks diubah ukurannya: Teks kecil secara otomatis diubah ukurannya . Pertahankan ukuran font minimum sebagai 22 piksel untuk header dan 14 piksel untuk teks isi.

Email responsif mendapatkan penskalaan otomatis di iOS10 & iOS11: Penskalaan otomatis email tidak responsif menyebabkan email tampak tidak terpusat atau diperkecil. Untuk mengatasi ini, tambahkan "padding:0;" ke tag<body> dan untuk menonaktifkan penskalaan otomatis, gunakan <metaname=”x-apple-disable-message-reformatting”>.

Forum Lakmus

Gmail

Gmail mendukung GIF dan elemen visual lainnya yang menambah daya tarik estetika email. Gmail adalah salah satu klien email paling nyaman baik untuk desktop maupun seluler dalam hal kegunaan.

Gmail Untuk Desktop

Kliping pesan: Gmail memotong pesan dengan ukuran lebih besar dari 102kb dan menyembunyikan konten di balik tautan “Lihat seluruh pesan”. Untuk menghindari hal ini, pertahankan ukuran pesan di bawah 102kb dan hindari penggunaan atribut dan tag gaya yang tidak perlu.

Pemilih atribut tidak didukung: Pemilih atribut yang digunakan untuk memilih elemen tidak didukung. Sebagai gantinya, gunakan pemilih .class.

Menghapus CSS di blok <style>: Jika blok <style> melebihi 8142 karakter atau menyertakan @deklarasi bersarang, Gmail akan menghapusnya. Untuk mengatasi ini, gunakan gaya tersemat yang pendek dan bebas kesalahan.

Gambar latar tidak didukung untuk id non-Gmail: Jika id non-Gmail dikonfigurasi di Gmail, itu tidak mendukung gambar latar belakang. Pastikan Anda menggunakan fallback yang tepat untuk latar belakang untuk kasus seperti itu.

Ukuran font meningkat 50%: Ukuran font untuk Gmail meningkat hampir 50%. Sebagai solusinya, gunakan konten khusus seluler dengan gambar yang lebih besar dan menu yang ringkas dan tetap berpegang pada tata letak kolom tunggal tanpa perlu memperbesar atau menjepit.

Margin, padding, float, dan paragraf tidak didukung: Gmail tidak merenderparagraph dan float. Untuk merender margin dan padding, gunakan tata letak berbasis tabel dengan<td>.

Gmail Untuk Seluler

<style> dan <link> tidak didukung di head: Terkadang, head tidak mendukung tag <style> atau <link>. Untuk mengatasinya, timpa warna tautan default dengan menambahkan gaya warna ke setiap tag <a> di dalam kode.

Gambar diiris menurut garis putih: Muncul garis putih di antara dua atau lebih gambar yang diiris. Gunakan "tampilan: blok" di tag gambar untuk menghapus garis putih.

Tanggal dan angka berubah menjadi biru di iPhone: Gmail untuk iPhone mengubah angka dan tanggal menjadi biru secara otomatis. Gunakan zero-width non-joiner, "text-decoration:" dan rentangkan dengan "text-decoration: none" di sekitarnya. Juga, untuk menghindari garis biru, tentukan penting untuk mengganti gaya sebaris.

Email yang cair terlihat menjijikkan: Di Aplikasi Gmail, email yang cair terlihat tidak mengesankan. Untuk mengatasinya, buat ilusi elemen mengambang dengan menggunakan "display: inline-block" bersama dengan "text-align: center".

Pandangan

Outlook dan Outlook.com adalah klien email yang banyak digunakan di lingkungan perusahaan . Klien email ini menghadapi beberapa masalah rendering yang membuatnya menjadi tugas berat bagi pengembang email .

Tidak ada dukungan untuk max-width dan min-width: Outlook tidak mendukung max-width dan min-width di CSS. Untuk mengatasinya, gunakan tata letak yang lancar dengan lebar tetap dalam kueri media.

CSS tidak didukung di bagian kepala: CSS yang digunakan di bagian kepala HTML akan dihapus secara otomatis. CSS sebaris untuk mengatasi masalah ini.

Menghapus spasi paragraf dan margin: Outlook menghapus spasi paragraf dan margin dari kode. Gunakan tata letak berbasis tabel dan td/tr untuk menambahkan ruang ekstra.

GIF tidak didukung: Outlook hanya merender bingkai pertama GIF dalam email. Pastikan frame pertama menyampaikan pesan atau mengatur fallback yang sesuai dengan menggunakan gambar statis.

Batas RGB tidak didukung di Outlook.com: Untuk warna latar belakang, gunakan kode HEX, bukan batas RGB.

Spasi yang tidak perlu ditambahkan: Outlook.com menambahkan spasi yang tidak perlu setelah gambar. Untuk menghapus padding, atur properti tampilan sebagai "img{display:block;}".

Yahoo! Surat

min-device-width dan max-device-width tidak didukung di Mediaqueries: Untuk webmail serta Aplikasi Android, gunakan atribut width dan/atau dalam gaya alih-alih min atau max-device-width. Ini akan mengontrol tata letak.

Tag float tidak berfungsi: Tag float tidak berfungsi untuk Yahoo!Mail. Untuk mengatasinya, berikan align="top" ke gambar yang bersangkutan.

Alasan di balik perbedaan antara klien email yang berbeda

Mesin rendering adalah penyebab utama di balik klien email yang berbeda yang merender email yang sama secara berbeda. Mesin rendering adalah otak dari setiap klien email. Ketika klien email menerima email, itu adalah dinding panjang kode HTML yang dililit oleh animasi CSS. Mesin rendering membuat struktur berdasarkan kode yang ditentukan dalam HTML dan menambahkan gaya khusus sesuai dengan CSS. Setiap kode yang tidak perlu dihapus dan tidak ditampilkan dalam tahap pasca-pemrosesan.

Beberapa klien email sepertiApple Mail, Microsoft Outlook (hingga 2003) mengadopsi mesin rendering berpemilik yang mereka gunakan di browser mereka. Webmail menggunakan hibrida dari mesin rendering mereka sendiri yang dicampur dengan browser yang digunakan untuk membukanya. Oleh karena itu, kode yang sama perlu ditulis dalam sintaks yang berbeda untuk menghindari penghapusan.

Berikut ini adalah klien email populer dan mesin rendering yang digunakan oleh masing-masing klien:

Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Trident)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (solo per IMAP / POP3)
Outlook 2007 e versi berturut-turut → Microsoft Word
Outlook per MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail dan Yahoo! Mail → Motore di rendering proprietario combinato con il motore di rendering del browser

Kesalahan Umum yang Harus Dihindari Saat Mengirim Ke Beberapa Klien Email

  1. Hindari gambar latar belakang di belakang CTA penting : Gambar latar tidak didukung di sebagian besar klien email. Klien email yang tidak didukung mengganti gambar dengan warna latar belakang. Ini sangat bermasalah jika warna latar belakang cocok dengan warna font teks di latar depan.
  2. CSS sebaris setiap saat : Beberapa klien email menghapus lembar gaya apa pun yang ditentukan di antara tag<style> sementara hampir semua mendukung penataan CSS sebaris. Jadi selalu mainkan dengan aman dengan memasukkan kode CSS Anda.
  3. Outlook mendukung dimensi gambar dalam persentase dan dukungan sisanya dalam piksel: Untungnya, kode khusus Outlook dapat ditambahkan di antara kode kondisional Outlook yaitu <!–[ifgte mso 9]> ….. Kode di sini…… </endif> yang diabaikan oleh klien email lain .
  4. Kode email menggunakan <table> alih-alih <div>: Meskipun pengkodean situs web telah berkembang menjadi pembuatan struktur menggunakan <div>, klien email tertentu seperti Outlook2007 masih mengalami masalah untuk merender <div> sehingga pengembang email masih tetap menggunakan metode pengkodean anti-gagal < tabel> tata letak. Meski merepotkan, tetap coding email seperti tahun 1999…

Membungkus

Singkatnya, email Anda tidak akan terlihat sama di setiap klien email di luar sana. Pertimbangkan tantangan dan solusi ini sambil membangun kampanye email Anda berikutnya untuk memastikan Anda memanfaatkan email Anda sebaik mungkin .