Cascading Style Sheets dan Tampilan EmailDecember 13, 2018December 13, 2018adminjaya

Merancang versi HTML dari pesan email Anda bisa jadi sulit karena ada begitu banyak klien e-mail dan kombinasi sistem operasi yang berbeda – dan mereka memiliki cara mereka sendiri menampilkan HTML.

Jika pembaca Anda memiliki alamat Hotmail, umumnya aman untuk mengasumsikan bahwa dia akan membaca pesan Anda melalui klien web Hotmail. Tetapi bagaimana dengan pembaca Anda dengan alamat e-mail pribadi? Apakah mereka akan menggunakan Microsoft Outlook? Apakah itu Outlook 2000, Outlook 2003 atau Outlook 2007? Atau mungkin dia menggunakan Lotus Notes? Bagaimana jika dia meneruskan email TLD-nya ke akun Yahoo? Dan apakah dia menggunakan Mac atau PC?

Karena Anda tidak benar-benar tahu jawaban atas pertanyaan-pertanyaan ini, ketika merancang kampanye e-mail Anda, penting bahwa Anda selalu mendesain untuk yang paling mudah diakses.

Cascading Style Sheets (CSS) menawarkan kemungkinan untuk membuat pesan e-mail Anda sangat grafis dan menarik. Sayangnya masih ada dukungan r CSS yang terbatas dengan banyak klien e-mail dan pada platform yang berbeda. Salah satu pelanggar CSS terbesar adalah Outlook 2007; dan karena survei menunjukkan bahwa hingga 75% pembaca e-mail menggunakan Outlook, Anda tidak dapat mengabaikan kesalahan tampilan mereka.

Sayangnya, Outlook 2007 tidak mendukung elemen mengambang, yang sering digunakan dalam CSS untuk memposisikan objek. Jadi itu didasarkan pada penggunaan tata letak berbasis tabel saat merancang kampanye e-mail Anda. Pikirkan desain web sekitar tahun 2000. Jika Anda seorang desainer baru dan belum pernah bekerja dengan tabel sebelumnya, Anda bisa mendapatkan banyak informasi praktis dari W3C.

Meskipun Outlook 2007 mendukung kepemilikan, saya tidak menyarankan Anda menggunakannya untuk mengonfirmasi stylesheet Anda. Setidaknya 50% dari pembaca Anda telah menonaktifkan gambar mereka, yang berarti bahwa elemen terkait tidak ditautkan – ini termasuk stylesheet eksternal Anda. Omong-omong, Gmail, Live Mail, dan Hotmail tidak mendukung elemen terkait, jadi sebaiknya jangan menggunakannya. Sebagai gantinya, tentukan semua gaya Anda dalam pesan Anda dan jangan bergantung pada lembar gaya eksternal untuk pesan email Anda.

Di mana, di dalam pesan, Anda harus menentukan gaya Anda adalah cerita yang berbeda. Pencarian Mail Live untuk stylesheet dengan, Hotmail mencari style sheet langsung di bawah tag. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage, dan Thunderbird keduanya menerima posisi, tetapi Gmail juga tidak menerima.

Opsi terbaik adalah menggunakan tag gaya sebaris. Gaya sebaris berarti bahwa gaya harus ditentukan secara terpisah untuk setiap elemen. Daripada menentukan stylesheet Anda di kepala Anda sebagai berikut:

<link rel="STYLESHEET" type="text/css" href="http://www.mysite.com/style.css">

atau bahkan sesuatu seperti:

</p> <style type="text/css" media="screen"> <p><!-- p {"urn:schemas-microsoft-com:office:smarttags" /> georgia, serif; ukuran font: x-kecil;} hr {color: # ff9900; tinggi: 1px} a: hover {color: # ff0000; dekorasi teks: tidak ada} -&gt; </style>

Anda akan mendefinisikan setiap elemen secara terpisah, seperti ini:

<p x-small color:> Ini adalah teks ayat Anda. </p>

Ketika mendefinisikan elemen-elemen ini, perlu diingat bahwa tidak semua properti CSS di seluruh papan didukung pada semua klien email. Jika Anda ingin menyajikan pesan yang konsisten untuk semua pembaca Anda, terlepas dari bagaimana mereka membaca email Anda, maka batasi properti CSS ini:

. warna latar belakang

. perbatasan

. warna

. ukuran font

. font

. variasi font

. font

. spasi-surat

. tinggi garis

. isi

. format tabel

. text-align

. dekorasi teks

. teks-inden

. text-transform

Properti ini didukung pada Mac dan PC di:

. AOL

. Rombongan

. Gmail

. Surat Live

. Outlook 2003

. Outlook 2007

. Thunderbird

. Yahoo

Properti untuk dihindari termasuk:

. gambar latar

. posisi latar belakang

. pengulangan latar belakang

. runtuhnya perbatasan

. jarak tepi

. di bagian bawah

. caption

. yakin

. klip

. kursor

. arah

. tampilkan

. sel kosong

. arahkan

. font-family

. tinggi

. kiri

. list-style-image

. daftar posisi gaya

. daftar gaya

. margin

. cakupan

. meluap

. posisi

. benar

. atas

. vertical-align

. visibilitas

. ruang putih

. lebar

. spasi kata

. z-index

Dan sekarang untuk berita buruk lainnya: Lotus Notes dan Eudora memiliki dukungan CSS yang buruk dan bahkan banyak properti CSS yang diterima secara umum mungkin tidak ditampilkan dengan benar. Dan karena semakin banyak pembaca kini memiliki akses ke email di PDA dan perangkat genggam lainnya, Anda tidak pernah dapat 100% yakin bagaimana atau di mana pesan Anda akan dibaca. Jadi saya menyarankan Anda selalu menggunakan pesan Multipart Mime dan selalu sertakan tautan ke versi teks Anda dalam versi html dari pesan Anda.

*** Apakah Anda ingin menyimpan kiat-kiat ini?

[ad_2]
Source by Karen Scharf