Web Designer selain harus advance dalam issue browser compatible juga harus advance dalam hal mail client/newsletter. Yap dalam era viral marketing seperti sekarang Email Newsletter sangat penting untuk update berita, produk rilis, discount, hari raya atau yang lainnya kepada subscriber atau customer. Yang jadi masalah adalah email client yang di gunakan oleh client berbeda-beda dan perlu beberapa percobaan untuk membuat satu script bisa di baca oleh semua mail client tersebut.
Email client yang banyak di gunakan oleh customer adalah yahoo mail, gmail, hotmail, microsoft outlook dan mozilla thunderbird. Email client di atas hampir semuanya bisa membaca tag standar html dan css. Untuk email newsletter saya sarankan menggunakan css inline..yap inline heuheu di jamin lebih ribet ya
.
Yang special dari mail2 client di atas adalah yahoo mail..yahoo mail tidak bisa membaca tag p <p></p>. Yahoo menghilangkan tag P untuk issue keamanan *katanya.
Untuk mengatasi hal di atas pada saat mengirim email newsletter ke client saya membuat dua versi, versi pertama untuk mail client kebanyakan seperti gmail, hotmail, microsoft outlook dan mozilla thunderbird dan versi kedua khusus untuk yahoo mail client. Agar pindah paragraf / tag p keliatan seperti pada versi online saya menggunakan tag <br>. Keliatan rada cupu sih, tapi gimana lagi..setidak2nya client yang pake yahoo mail client bisa liat tampilan newsletter dengan sempurna *maksa hihihi.
Akhirnya setelah beberapa kali cari reference dan melakukan percobaan dapatlah solusi untuk tag p yang tidak terbaca di yahoo mail client. Saya tambahkan margin-bottom 1em di tag p di css, berikut penampakannya.
p{ margin-bottom:1em; }
Tuliskan kode di atas di css email newsletter anda, bisa di header atau di inline css (biar sure hehehe). Untuk selanjutnya coba test kirim ke yahoo mail client, kalau saya sih menggunakan mailchimp buat email blast. Hasilnya tampilan untuk semua mail client sekarang sudah oke.
Sekarang saya cukup bikin satu versi saja untuk email newsletter
, bagaimana dengan pembaca?

Home