Praktik terbaik untuk merancang email HTML [tertutup]


195

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?


Jawaban:


128

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.


9
+1: Tidak tahu tentang Litmus. Ini terlihat seperti penghemat waktu yang sangat besar. Terima kasih: D Dan jangan lupa tentang posting blog di CampaignMonitor, yang juga termasuk beberapa tips yang bagus.
Horst Gutmann

249

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.


2
Saat menempatkan warna latar belakang pada <div>, Outlook tidak akan memperpanjang warna melewati konten, yang berarti padding tidak akan berwarna.
Michael Irigoyen

70
Kenapa, Internet? Mengapa kami tidak dapat memiliki html yang bagus untuk email? shakes fist
simonlchilds

8
Jadi kita bisa mendapat spam yang lebih cantik?
Brock Hensley

6
@DavidRivers Mungkin harus ditunjukkan bahwa "gambar yang disematkan" tidak berarti menambahkan gambar sebagai lampiran, melainkan harus dimasukkan sebagai string yang disandikan base64 untuk mengganti url yang dirujuk dalam <img>tag "normal" , seperti:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
Timo

3
@MJafarMash Itu adalah cara yang salah untuk menanamkan gambar dalam email. Anda harus membuat amplop terpisah dan merujuk ke gambar berdasarkan itu cid.
Michael Irigoyen

37

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!



Saya telah memperbarui tautannya, yang pertama Anda sarankan adalah yang benar. Sayangnya itu dipindahkan tanpa menambahkan arahan ulang.
SamMullins

Terima kasih atas alat inlining CSS. Akan sangat membantu kurasa.
Rajesh Paul


6

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


5

'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.


2
Anda harus sedikit berhati-hati dengan itu ... itu tidak mudah. Seperti itu mungkin mengacaukan banyak hal, jadi periksalah semuanya sebelum mengirim.
Nathan MacInnes

untuk mengatasi masalah itu, Anda dapat menyembunyikan seluruh dokumen dengan jQuery terlebih dahulu, kemudian jalankan kode ini (dan mungkin menyembunyikan) - dengan cara ini aturan CSS yang sebenarnya diambil dan diterapkan daripada hasil yang dihitung (mis. untuk lebar.)
majick

1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.