Buat pesan sempurna di semua klien email

Sep 11, 2025

Bagaimana caranya

Untuk kampanye pemasaran email untuk bekerja, email harus mencapai kotak masuk dan menonjol dari yang lainnya. Namun, ceritanya tidak berakhir di sana. Email Anda harus render jika Anda ingin pelanggan membuka email Anda, klik melalui CTA dan dikonversi.

Rendering adalah masalah karena setiap klien email dan perangkat memandang kode secara berbeda. Kode yang berfungsi dengan baik dengan satu klien email dapat membuat masalah rendering di yang lain. Untuk membuat hal-hal yang lebih menantang, bahkan klien email yang paling banyak digunakan datang dengan rendering guirks dan masalah. Dalam artikel ini, saya akan melihat tantangan dan solusi untuk masing-masing klien email utama.

Pandangan

Itu tidak akan menjadi hiperbola untuk mengatakan bahwa kita mengirim email kepada pengembang bergidik pada pemikiran Outlook. Alasan yang jelas adalah banyak tantangan render yang disajikan oleh klien email ini. Yang mengejutkan adalah bahwa setiap perusahaan masih memiliki pandangan sebagai klien email standar mereka dan sebagian kecil pelanggan Anda masih loyal untuk itu.

Lihatlah beberapa tantangan dan peretasan untuk Outlook:

Tantangan: Outlook tidak mendukung margin di & lt; p & gt; dan & lt; a & gt;
Retas: Jika Anda ingin memberikan margin, gunakan & lt; td & gt; menandai; UPPERCASE harus digunakan di luar tag, dan inline huruf kecil

Tantangan: Padding hanya didukung pada atribut HTML tertentu (tidak termasuk pada & lt; div & gt; atau & lt; p & gt; Tags)
Retas: Tata letak berbasis tabel adalah taruhan paling aman untuk mengatasi masalah ini

Tantangan: Outlook adalah satu-satunya klien email yang tidak mendukung gif
Retas: Karena beberapa klien hanya akan melihat bingkai pertama animasi Anda, ini harus mencakup semua informasi penting, berjalan hanya untuk beberapa milidetik, dan masuk akal sebagai gambar mandiri

Tantangan: Outlook tidak mendukung font google, dan akan menerapkan Times New Roman sebagai fallback
Retas: Sematkan kode berikut ...

 & lt;! - [Jika MSO] & gt;
& lt; gaya tipe = "teks / css" & gt;
.fallback-text {
Font-Family: Arial, Sans-Serif;
}
& lt; / style & gt;
& lt;! [endif] - & gt;

Outlook.com.

Versi baru Outlook.com diperkenalkan pada awal 2016 tetapi versi warisan masih belum diuraikan. Berikut adalah tantangan dan hacks khususnya untuk klien itu:

Tantangan: Gap 4-5px yang tidak perlu ditambahkan di bawah gambar
Retas: Atur properti tampilan sebagai "img {display: blok;}" Untuk menghapus bantalan

Outlook.com introduces unnecessary spacing between your images — Outlook.com memperkenalkan jarak yang tidak perlu di antara gambar Anda

Tantangan: Tidak mendukung perbatasan RGB
Retas: Gunakan kode hex untuk mengatur warna latar belakang HTML

Tantangan: TAMBAHAN Maka di href. Tautan mematahkan tag jangkar dan menggeser CSS ke tempat lain
Retas: Gunakan nama domain daripada href #

Aplikasi asli iPhone.

Aplikasi email iPhone asli adalah klien yang paling banyak digunakan, dan mendukung semua elemen interaktif yang biasanya Anda temukan dalam email: gif, menu, akordeon, hitungan mundur, slider dan sebagainya. Selain itu, ia juga memungkinkan pemasar email untuk menggunakan gambar retina definisi tinggi untuk pengalaman pengguna yang luar biasa.

iOS10 telah menjadi semakin didambakan karena pengguna sekarang dapat menyesuaikan jumlah baris teks pratinjau dalam email dan bahkan memilih untuk daftar-berhenti. Meskipun demikian, meskipun poin-poin kuat ini, aplikasi asli iPhone juga memiliki kekurangan tertentu. Mari lihat.

iOS10 users can opt for list-unsubscribe — Pengguna iOS10 dapat memilih daftar - berhenti berlangganan

Tantangan: Teks mungil diubah ukurannya secara otomatis
Retas: Ukuran font minimum untuk header harus 22px, dan untuk teks tubuh 14px

Tantangan: Rilis model iPhone baru dapat menyebabkan masalah rendering
Retas: Layout fluid memastikan email ditampilkan dengan benar di semua perangkat

Tantangan: Di iOS9, kapan inline-block. Elemen level berada di samping satu sama lain dalam kode dengan ruang antara ujung dua elemen, itu mengarah pada masalah pembungkus
Retas: Cukup hapus ruang

Tantangan: iOS10 tidak mendukung posisi tetap
Retas: Tidak ada solusi ...

Gmail.

Gmail populer karena sangat nyaman digunakan. Namun, itu tidak berarti itu tanpa tantangannya.

Tantangan: Jika file HTML Anda melebihi 102kb, gmail akan klipnya
Retas: Hindari tag dan atribut gaya yang tidak perlu, dan jangan menyalin kode dari Microsoft Word atau Editor Teks Lainnya (Ini akan menambahkan tag tambahan ke file HTML)

Tantangan: Gmail akan menghapus CSS dari & lt; gaya & gt; blok jika melebihi 8142 karakter atau termasuk kesalahan atau bersarang @declarations.
Retas: Pastikan gaya tertanam pendek dan bebas dari kesalahan ketik

Tantangan: Mengapung, margin, paragraf, dan padding tidak didukung
Retas: Gunakan tata letak berbasis tabel dengan & lt; td & gt; untuk bantalan dan margin

Tantangan: Gambar latar belakang tidak berfungsi untuk ID-ID GMail yang dikonfigurasi dalam Gmail
Retas: Oleskan warna latar belakang sebagai fallback

Tantangan: Pemilih atribut tidak berfungsi
Retas: Menggunakan .kelas selector sebagai gantinya

Apple Mail.

Apple Mail mungkin adalah hal yang paling dekat dengan klien email yang sempurna yang kami miliki. Keuntungan utama Apple Mail adalah sangat memaafkan ketika datang ke pengkodean email yang buruk. Selain itu, seperti aplikasi asli iPhone itu mendukung interaktivitas dalam email, dengan demikian menghilangkan kebutuhan untuk melihat email di browser.

Anda harus mengingat dua hal saat pengkodean email untuk pelanggan Apple Mail Anda:

Hindari menggunakan font Calibri
Tuan rumah email Anda dan berikan tautan ke server, karena tautan internal tidak berfungsi di Apple Mail

Yahoo! Surat

Sebagai klien email baru dan lebih baik telah tiba, Yahoo! Mail lebih jarang digunakan hari ini. Beberapa tantangan rendering dan peretasan dibahas di bawah ini.

Tantangan: Itu tidak mendukung Center-align. Atribut HTML
Hack: Gunakan align = "pusat"

Tantangan: Min-perangkat-lebar dan Max-Device-Lebar tidak didukung oleh kueri media
Retas: Gunakan atribut lebar & amp; / atau dalam gaya bukannya min atau lebar maks
Menggunakan lebar atribut bukannya menit atau Lebar Maks. , baik secara terpisah maupun tertanam di & lt; gaya & gt; menandai

Tantangan: Tag float tidak berfungsi
Retas: Menambahkan align = "TOP" ke gambar yang dimaksud

Pada catatan itu, kami telah mencapai akhir diskusi tentang tantangan rendering paling khas untuk klien email. Lihatlah sini untuk lebih banyak tantangan dan solusi. Pemasaran email, jika dilakukan dengan benar, dapat membuka jalan baru untuk strategi pemasaran Anda. Simpan solusi sederhana ini dalam pikiran dan pelanggan Anda tidak akan pernah melihat tata letak email yang rusak di email Anda lagi.

Artikel terkait:

15 desain buletin email yang luar biasa
10 alat buletin email terbaik
Master Tipografi HTML dalam email

Buat pesan sempurna di semua klien email

Pandangan

Outlook.com.

Aplikasi asli iPhone.

Gmail.

Apple Mail.

Yahoo! Surat

Bagaimana caranya - Artikel Terpopuler

Cara menggunakan gambar referensi: 13 Tips Esensial untuk Artis

Adobe Fresco Tutorial: Buat potret di aplikasi lukisan

Cara merancang dengan bentuk CSS: Pendahuluan

mengatasi lukisan potret dengan minyak

Gunakan ruang negatif untuk menarik tangan yang lebih baik

Cara membuat karakter kartun berbulu

mempelajari makhluk berbulu yang tak tertahankan

Buat efek splash dalam realflow

Kategori