Panduan desain email HTML apa yang ada? [Tutup]

101

Panduan apa yang dapat Anda berikan untuk pemformatan HTML kaya dalam email sambil mempertahankan stabilitas visual yang baik di banyak klien dan antarmuka email berbasis web?

Jawaban yang tidak terkait pada pertanyaan tentang Stack Overflow yang disarankan:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Yang berisi pedoman berikut:

  1. Tempatkan stylesheet <body>alih-alih<head>
    Beberapa klien email akan menghapus CSS dari head, tetapi membiarkannya jika blok gaya ada (tidak valid) di badan.
  2. Gunakan gaya sebaris jika memungkinkan,
    Gmail akan menghapus semua lembar gaya, baik di dalam <head>atau di <body>, tetapi menghormati gaya sebaris yang ditetapkan menggunakan style=""atribut
  3. Kembali ke tabel
    Standar email sebenarnya telah mengalami kemunduran besar dalam beberapa tahun terakhir berkat Outlook 2007 menggunakan mesin rendering Microsoft Word. Lupakan sebagian besar hal yang Anda pelajari tentang pemosisian tanpa stylesheet.
  4. Jangan mengandalkan gambar
    Sebagian besar klien dan sebagian besar klien email berbasis web tidak akan menampilkan gambar kecuali jika pengguna secara khusus memintanya untuk ditampilkan.

Saya juga memiliki beberapa kebenaran yang "belum dikonfirmasi" yang saya tidak ingat di mana saya membacanya.

  1. Jangan gunakan lebih dari dua tingkat bersarang dalam tabel
    Apakah ini benar. Apa yang mungkin terjadi jika saya melakukannya? Apakah ada klien / klien tertentu yang tersedak?
  2. Hati-hati dengan gambar latar belakang bersarang dalam sel / tabel
    Seperti yang saya pahami, Anda mungkin menghadapi situasi di mana gambar latar belakang diterapkan dalam tabel / sel yang menurun sama sekali baru, dan tidak hanya "bersinar". Sekali lagi, benar atau tidak? Klien yang mana?

Saya ingin menyempurnakan daftar ini dengan lebih banyak pedoman dan pengalaman dari parit.

Bisakah Anda memberikan saran lebih lanjut?

Pembaruan: Saya secara khusus meminta pedoman untuk bagian desain dalam HTML dan konsistensinya. Pertanyaan tentang pedoman umum untuk menghindari filter spam , dan kesopanan umum sudah ada di SO.

html email kaa
sumber
Berikut adalah daftar besar sumber daya untuk pertanyaan yang sangat mirip .
Yohanes

Jawaban:

63

Sebenarnya sangat sulit untuk membuat email HTML yang layak, jika Anda mendekatinya dari perspektif 'HTML dan CSS modern'.

Untuk hasil terbaik, bayangkan tahun 1999.

  • Kembali ke tabel untuk tata letak (atau lebih disukai - jangan mencoba tata letak yang rumit)
  • Takut gambar latar belakang (mereka rusak di Outlook 2007 dan Gmail).
  • Masalah style-tag-in-the-body adalah karena Hotmail dulu menerimanya seperti itu - saya yakin mereka menghapusnya sekarang. Gunakan gaya sebaris dengan styleatribut jika Anda harus menggunakan CSS.
  • Lupakan sepenuhnya float
  • Ingat gambar Anda mungkin akan diblokir - gunakan latar belakang dan warna teks untuk keuntungan Anda - pastikan ada beberapa teks yang dapat dibaca dengan gambar dinonaktifkan
  • Berhati-hatilah dengan link, menjadi sangat waspada terhadap apa pun yang terlihat seperti URL dalam teks link - Anda akan marah 'phishing' filter (misalnya <a href="http://domain.tld">www.someotherdomain.tld</a>adalah buruk )
  • Ingat bahwa "lipatan" pada klien email web cenderung sangat tinggi di halaman (pada layar 1024x768, sebagian besar antarmuka tidak akan menampilkan lebih dari seratus piksel atau lebih) - masukkan identitas Anda tepat di bagian atas sehingga penerima tahu siapa Anda.
  • Outlook versi terbaru memiliki panel pratinjau "potret" yang secara signifikan lebih sempit dari yang Anda perkirakan - berhati-hatilah dengan tata letak dengan lebar tetap, jika Anda harus menggunakannya, buatlah sesempit mungkin.
  • Jangan pernah berpikir tentang flash, Javascript, SVG, kanvas, atau semacamnya.
  • Uji, banyak. Pastikan Anda menguji di Outlook terkini (banyak hal telah berubah! Sekarang menggunakan Word sebagai mesin rendering HTML, dan lumpuh: dukungan HTML / CSS Word 2007 ). Gmail juga cukup rewel. Anehnya, webmail Yahoo sangat bagus, dengan dukungan CSS yang bagus.

Semoga berhasil ;)

Perbarui untuk menjawab pertanyaan lebih lanjut:

Jangan gunakan lebih dari dua tingkat penumpukan dalam tabel

Saya yakin ini adalah pedoman lama yang berkaitan dengan Lotus Notes. Tabel bersarang seharusnya baik-baik saja, tetapi sungguh, jika Anda memiliki tata letak yang cukup rumit untuk membutuhkannya, Anda mungkin akan mengalami masalah. Buat tata letak Anda tetap sederhana .

Hati-hati dengan gambar latar belakang bersarang di sel / tabel

Ini mungkin terkait dengan hal di atas, dan hal yang sama berlaku, jika Anda semakin rumit maka Anda akan mengalami masalah. Versi terbaru Outlook sama sekali tidak mendukung gambar latar belakang, jadi sebaiknya Anda melupakannya sepenuhnya.

Dan
sumber
3
Mengapa dukungan email HTML tidak berkembang sebanyak itu? Mengapa kita harus terus menerapkan semua praktik buruk ini, seolah-olah kita kembali ke tahun 1999?
smonff
Ada solusi untuk mendukung bgimages stackoverflow.com/a/17358553/413032 . Mengganti html ms-word. @ Smonff Saya sepenuhnya setuju dengan Anda. ........ Mengapa html dirender oleh MS-Word!
Davut Gürbüz
1
periksa Email Coding 101 dari lakmus, semoga membantu.
shaijut
13

Selalu gunakan pantomim multi bagian dan berikan alternatif teks biasa.

JeeBee
sumber
9

Orang-orang di balik Monitor Kampanye juga memulai situs web Proyek Standar Email dengan banyak informasi bagus.

John Sheehan
sumber
3

Lihatlah boilerplate ini, ini seperti html5boilerplate, tetapi untuk email: http://htmlemailboilerplate.com/

welldan97
sumber
Ups, sudah hilang sekarang.
Sean McMillan
2

Saya pikir ini adalah level yang lebih rendah daripada pertanyaan yang Anda ajukan, tetapi jika Anda benar-benar ingin email html dilihat dengan benar oleh sebanyak mungkin klien, pastikan itu menggunakan MIME yang valid. Secara khusus, agar email dianggap sebagai MIME yang valid, header HARUS (dalam arti kata RFC) berisi kedua header berikut:

MIME-Version:
Content-Type:

Klien yang sangat ketat akan menampilkan HTML Anda sebagai teks mentah jika salah satu atau lainnya hilang. Anda akan terkejut betapa banyak vendor online besar yang seharusnya tahu lebih baik telah mengacaukannya (terutama, saya mendapat email HTML tanpa MIME-Version: header dari Amazon dan ACM di masa lalu)

jj33
sumber
1
  • Gambar latar belakang tidak dapat diandalkan.
  • Praktis no-brainer, tapi tanpa javascript .
  • Gunakan editor yang memungkinkan Anda mengirim file / buffer saat ini sebagai email, atau paling tidak, cari program yang memungkinkan Anda mengirim konten file sebagai email HTML. jangan menguji email Anda dengan menyalin HTML, dan menempelkannya ke Outlook (atau program email lainnya).
Jonathan Arkell
sumber
1

Tiga kata nasihat: tes, tes, tes.

Lihat layanan pengujian email LitmusApp.com. Anda mengirimi mereka pesan dan mereka memberikannya di banyak klien dan menunjukkan tangkapan layar hasilnya. Itu tidak sempurna, tapi cukup bagus.

(Ngomong-ngomong, Lotus Notes sebelum 8.0 sangat menyebalkan untuk email HTML)

Selain itu, selain gaya CSS sebaris, saya sarankan untuk beralih ke tag jika memungkinkan.

Eli
sumber
1

Sematkan gambar Anda, jangan tautkan ke sana.

Ini buruk :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Ini bagus :

<img src=cid:myImage/>

Ya, ini terlihat aneh tetapi lihat panduan ini tentang menyematkan gambar di email .

Andrei Rînea
sumber
0

Jika Anda menyertakan blok gaya, jangan memulai baris baru dengan ".classname" atau "." apa pun. Pasang penjepit atau sesuatu sebelum periode. Jika Anda tidak melakukan ini, beberapa sistem email web tidak akan menampilkan lembar gaya Anda dengan benar.

Banyak orang salah berasumsi bahwa mereka tidak dapat menggunakan blok CSS dalam email karena perilaku ini ... IIRC "." adalah pembatas badan untuk SMTP. Sistem akan cenderung melarikan diri di penyimpanan email mereka untuk mencegah konten satu pesan salah dikenali sebagai pesan baru. Cara penanganan ini cenderung merusak gaya apa pun yang dimulai pada baris baru dengan titik.

Einstein
sumber