Praktik terbaik untuk merancang email HTML [tertutup]

Saya merancang templat HTML untuk buletin email. Saya telah belajar bahwa banyak klien email mengabaikan stylesheet yang ditautkan, dan banyak lainnya (termasuk Gmail) mengabaikan deklarasi blok CSS sama sekali. Apakah gaya inline atribut satu-satunya pilihan saya? Apa praktik terbaik untuk menata email HTML?

Monitor Kampanye memiliki matriks dukungan luar biasa yang merinci apa yang didukung dan apa yang tidak ada di antara berbagai klien email.

Anda dapat menggunakan layanan seperti Litmus untuk melihat bagaimana email muncul di beberapa klien dan apakah mereka tertangkap oleh filter, dll.

Saya telah berjuang melawan email HTML sebelumnya. Berikut adalah beberapa tips tentang penataan gaya untuk kompatibilitas maksimum antara klien email.

• Gaya sebaris adalah Anda sahabat. Sama sekali tidak menautkan style sheet dan tidak menggunakan <style>tag (GMail, misalnya, menghapus tag itu dan semua isinya).

• Melawan tabel penilaian, penggunaan , dan penyalahgunaan yang lebih baik . <div>s tidak akan memotongnya (terutama di Outlook).

• Jangan gunakan gambar latar belakang , itu jerawatan dan akan mengganggu Anda.

• Ingatlah bahwa beberapa klien email akan secara otomatis mengubah hyperlink yang diketik menjadi tautan (jika Anda tidak memasang tautannya <a>sendiri). Ini kadang-kadang dapat mencapai efek negatif (katakanlah jika Anda meletakkan gaya pada masing-masing hyperlink agar muncul warna yang berbeda).

• Hati-hati hyperlink tautan yang sebenarnya dengan sesuatu yang berbeda. Misalnya, jangan mengetik http://www.google.comdan lalu menautkannya https://gmail.com/. Beberapa klien akan menandai pesan sebagai Spam atau Sampah.

• Simpan gambar Anda dalam warna sesedikit mungkin untuk menghemat ukuran.

• Jika memungkinkan, sematkan gambar Anda di email Anda. Email tidak perlu menjangkau server web eksternal untuk mengunduhnya dan mereka tidak akan muncul sebagai lampiran ke email.

Dan terakhir, tes, tes, tes ! Setiap klien email melakukan sesuatu dengan cara yang berbeda dari yang dilakukan peramban.

Simpanse surat memiliki artikel yang cukup bagus tentang apa yang tidak boleh dilakukan. (Saya tahu itu keliru untuk apa yang Anda inginkan)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Secara umum semua hal yang telah Anda pelajari yang merupakan praktik buruk untuk desain web tampaknya menjadi satu-satunya pilihan untuk email html.

Dasar-dasarnya adalah:

• Memiliki jalur absolut untuk gambar (mis. Https://stackoverflow.com/random-image.png )
• Gunakan tabel untuk tata letak (tidak pernah berpikir saya akan merekomendasikan itu!)
• Gunakan gaya sebaris (dan css sekolah lama juga, paling banyak 2.1, bayangan kotak tidak akan berfungsi misalnya;))

Cukup uji sebanyak mungkin klien email, atau gunakan Litmus seperti yang disarankan orang lain di atas! (kredit untuk Jim)

EDIT:

Simpanse surat telah melakukan pekerjaan luar biasa dengan membuat alat ini tersedia untuk komunitas.

Itu berlaku kelas CSS Anda ke elemen html Anda sebaris untuk Anda!

Selain jawaban yang diposting di sini, pastikan Anda membaca artikel ini:

http://24ways.org/2009/rock-solid-html-emails

Sumber daya yang akhirnya selalu saya bahas tentang email HTML adalah panduan CSS CampaignMonitor .

Karena bisnis mereka semata-mata diarahkan pada pengiriman email, mereka tahu barang-barang mereka dan siapa pun akan pergi

'Takut juga. Saya akan membuat halaman HTML dengan stylesheet, lalu gunakan jQuery untuk menerapkan stylesheet ke style attr dari setiap elemen. Sesuatu seperti ini:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Kemudian salin DOM dan gunakan itu di email.

Saya menemukan bahwa pemetaan gambar berfungsi dengan sangat baik. Jika Anda memiliki header atau footer yang merupakan gambar, pastikan Anda menerapkan bgcolor = "fill in the blank" karena pandangan dalam kebanyakan kasus tidak akan memuat gambar dan Anda akan dibiarkan dengan header transparan. Jika Anda setidaknya menetapkan warna yang sesuai dengan nuansa email, itu akan sedikit mengejutkan bagi pengguna. Jangan pernah mencoba dan menggunakan lembar styling. Atau CSS sama sekali! Hindari saja.

Bergantung jika Anda menyalin konten dari sebuah kata atau berbagi google Doc, pastikan untuk (perintah + F) Temukan semua (') dan (") dan ganti di dalam perangkat lunak pengeditan Anda (terutama dreemweaver) karena mereka akan ditampilkan sebagai kode dan itu tidak baik.

ALT adalah sahabatmu. gunakan tag ALT untuk menambahkan teks ke semua gambar Anda. Karena kemungkinan mereka tidak akan memuat dengan benar. Dan teks ALT itulah yang membuat orang mengklik tombol (lihat gambar). Juga tentukan gambar Anda Lebar, Tinggi dan buatlah asrama 0 sehingga Anda tidak mendapatkan garis aneh di sekitar gambar Anda.

Pertimbangkan untuk mengedit semua gambar dalam Photoshop dengan boarder 15px di setiap sisi (jadikan latar belakang transparan dan simpan sebagai PNG 24) gambar. Terkadang klien email tidak membaca gaya padding yang Anda terapkan pada gambar sehingga menghindari format aneh!

Saya juga menemukan garis di bawah tautan sangat menjengkelkan, jadi jika Anda menerapkan <style = "text-decoration: none; color: # warna apa pun yang Anda inginkan di sini!" > itu akan menghapus garis dan memberi Anda tampilan yang diinginkan.

Ada banyak yang benar-benar dapat mengacaukan semua tampilan dan nuansa.