Cara Kod HTML E -mel Buletin & Templat E -mel

Artikel ini pertama kali diterbitkan pada tahun 2006, kemudian dikemas kini pada tahun 2015.

surat berita e -mel HTML telah datang jauh sejak artikel ini pertama kali diterbitkan pada tahun 2006. E -mel HTML masih merupakan medium komunikasi yang sangat berjaya bagi kedua -dua penerbit dan pembaca. Penerbit boleh mengesan kadar untuk e -mel dibuka, ke hadapan, dan klik, dan mengukur minat pembaca dalam produk dan topik; Pembaca dibentangkan dengan maklumat yang dibentangkan seperti laman web, dengan cara yang lebih menarik secara visual, dan lebih mudah untuk mengimbas dan menavigasi, daripada e -mel teks biasa.

Pengekodan e -mel HTML adalah masalah yang menyeronokkan dan praktikal untuk pengaturcara untuk menyelesaikannya. Tidak seperti pengekodan laman web, e -mel HTML perlu memaparkan dengan baik pada perisian e -mel lama - Think Outlook atau MAC Mail, serta menyesuaikan diri dengan skrin telefon dan tablet. Saya akan menunjukkan kepada anda cara membuat e -mel HTML yang dipaparkan dengan baik pada mana -mana peranti, ditambah dengan idea untuk menyesuaikan kod e -mel HTML semasa anda untuk memaparkan pada telefon dan tablet.

Kunci Takeaways

Gunakan jadual HTML untuk reka bentuk susun atur dalam surat berita e -mel untuk memastikan keserasian di seluruh pelanggan e -mel yang berbeza, kerana jadual lebih konsisten disokong daripada CSS untuk meletakkan dan menstrukturkan kandungan.
• Gunakan CSS sebaris terus dalam HTML anda untuk elemen gaya seperti fon dan warna, kerana banyak pelanggan e -mel tidak menyokong stylesheets CSS luaran atau tertanam.
• Reka bentuk surat berita e-mel dengan pendekatan mudah alih mudah alih, menggunakan teknik responsif seperti pertanyaan media untuk menampung tontonan pada telefon dan tablet, walaupun terdapat pelbagai tahap sokongan di seluruh pelanggan e-mel.
Ujian e -mel HTML secara meluas merentasi pelbagai pelanggan e -mel dan peranti untuk memastikan penampilan dan fungsi yang konsisten, menggunakan alat seperti Monitor Kempen dan MailChimp untuk ujian.
• Elakkan menggunakan JavaScript dan CSS kompleks seperti terapung dan kedudukan, kerana ini sering dilucutkan atau tidak disokong oleh pelanggan e -mel biasa, yang membawa kepada isu -isu susun atur yang berpotensi.
termasuk sandaran untuk imej dan fon untuk meningkatkan keserasian dan memastikan bahawa surat berita boleh diakses walaupun unsur -unsur tertentu tidak dapat diberikan oleh klien e -mel.
Pastikan reka bentuk mudah dan kandungan yang jelas untuk mengelakkan masalah rendering dan untuk meningkatkan kebolehbacaan dan keberkesanan surat berita e -mel anda.
• HTML Fundamentals E -mel
• Kesakitan terbesar apabila pengekodan e-mel HTML adalah bahawa banyak alat perisian yang berbeza tersedia untuk membaca e-mel, dari perisian desktop seperti Eudora, Outlook, AOL, Thunderbird, dan Lotus Nota, kepada perkhidmatan e-mel berasaskan web seperti Yahoo! , Hotmail, dan Google Mail, ke aplikasi e -mel pada telefon dan tablet. Perisian yang digunakan untuk menjadikan HTML untuk setiap alat perisian e -mel menentukan apa yang digunakan oleh kod HTML dan CSS dan tidak berfungsi.

Jika anda fikir sukar untuk memastikan keserasian penyemak imbas laman web anda, sedar bahawa ini adalah permainan baru-setiap alat perisian e-mel ini boleh memaparkan e-mel yang sama dengan cara yang jauh berbeza. Dan walaupun alat -alat ini memaparkan e -mel HTML dengan betul, menyumbang kepada variasi, sebagai contoh, lebar di mana pembaca saiz tingkap mereka ketika membaca e -mel membuat perkara lebih rumit.

Sama ada anda memilih untuk mengodkan e -mel HTML anda dengan tangan (keutamaan peribadi saya) atau menggunakan templat yang sedia ada, terdapat dua konsep asas untuk diingat ketika membuat e -mel HTML:

1. Gunakan jadual HTML untuk mengawal susun atur reka bentuk dan beberapa persembahan. Anda boleh digunakan untuk menggunakan susun atur CSS murni untuk laman web anda, tetapi pendekatan itu tidak akan tahan dalam persekitaran e -mel.
2. Gunakan CSS sebaris untuk mengawal elemen persembahan lain dalam e -mel anda, seperti warna latar belakang dan fon.

Cara paling cepat dan paling mudah untuk melihat bagaimana jadual HTML dan CSS dalam talian berinteraksi dalam e -mel HTML adalah untuk memuat turun beberapa templat dari Monitor Kempen dan MailChimp. Apabila anda membuka salah satu templat ini, anda akan melihat beberapa perkara yang akan dibincangkan dengan lebih terperinci kemudian:

• pengisytiharan gaya CSS muncul di bawah tag badan, bukan antara tag kepala.
• No CSS Shorthand digunakan: Daripada menggunakan font peraturan gaya disingkat: 12px/16px Arial, Helvetica, anda harus memecahkan sikap ini ke dalam sifat individu: font-family, saiz font, dan ketinggian garis.
• rentang dan div digunakan dengan berhati -hati untuk mencapai kesan tertentu, manakala jadual HTML melakukan sebahagian besar kerja susun atur.
• pengisytiharan gaya CSS sangat asas, dan tidak menggunakan sebarang fail CSS.

laman web e -mel HTML kod saya juga mempunyai e -mel HTML sebenar yang saya muat turun dan diformat supaya anda boleh belajar untuk melihat bagaimana orang lain membuat e -mel.

Langkah 1: Gunakan jadual html untuk susun atur

Betul: Jadual kembali, masa yang besar! Piawaian web mungkin menjadi norma untuk halaman pengekodan untuk dipamerkan dalam pelayar web, tetapi ini bukan web, bayi. Beberapa pelanggan perisian e-mel adalah tahun cahaya di belakang lapan bola dari segi sokongan CSS, yang bermaksud kita mesti menggunakan jadual untuk susun atur jika kami benar-benar menginginkan surat berita kami untuk dipaparkan secara konsisten untuk setiap pembaca (lihat senarai bacaan pada akhir Artikel ini untuk beberapa sumber yang sangat baik mengenai sokongan CSS dalam pelanggan mel).

Jadi letakkan amalan terbaik piawai piawaian anda dan kemahiran markup bersandar: Kami akan mendapatkan tangan kami kotor!

Langkah pertama dalam membuat e -mel HTML adalah untuk menentukan jenis susun atur yang anda mahu gunakan. Untuk surat berita, susun atur lajur tunggal dan dua lajur berfungsi dengan baik, kerana mereka mengawal kekacauan semula jadi yang menghasilkan apabila sejumlah besar kandungan ditolak ke ruang kecil seperti e-mel. Reka bentuk e -mel lajur tunggal juga memudahkan dipaparkan dengan baik pada telefon dan tablet.

susun atur tunggal lajur biasanya terdiri daripada:

1. Header, yang mengandungi logo dan beberapa (atau semua) pautan navigasi dari laman web induk untuk mengukuhkan penjenamaan dan memberikan kebiasaan untuk pelawat tapak
2. Pautan Intra-Email ke cerita yang muncul lebih jauh dalam e-mel diikuti oleh cerita dan kandungan
3. Footer di bahagian bawah e -mel, yang sering mengandungi pautan yang sama dengan navigasi teratas, serta arahan untuk berhenti melanggan

e-mel dua lajur juga menggunakan header dan footer. Seperti laman web dua lajur, mereka biasanya menggunakan lajur sempit, ke rumah dan pautan ke maklumat lanjut, sementara lajur yang lebih luas memegang kandungan badan e-mel. Untuk mendapatkan susun atur e-mel dua lajur untuk dipaparkan dengan baik pada telefon atau tablet memerlukan beberapa kod-FU, seperti yang anda lihat kemudian dalam artikel ini.

E -mel promosi mengikuti peraturan yang sama tetapi mengandungi lebih kurang dengan cara kandungan dan pautan. Mereka sering memasukkan satu atau dua mesej, dan kadang -kadang menggunakan satu imej besar dengan teks penjelasan kecil dan beberapa pautan di bawah imej.

Semua kemungkinan susun atur e -mel ini boleh dibuat dengan mudah, menggunakan jadual HTML untuk membahagikan ruang ke dalam baris dan lajur. Malah, menggunakan jadual HTML adalah satu -satunya cara untuk mencapai susun atur yang akan memberi konsisten di seluruh pelanggan mel yang berbeza.

Kiri atas mesej e -mel sering menjadi tempat pertama orang apabila mereka membuka e -mel.

Ini adalah pendekatan yang saya gunakan untuk membuat e -mel HTML:

• Untuk susun atur dua lajur, buat satu jadual setiap satu untuk tajuk, dua lajur kandungan pusat, dan footer-itu tiga jadual dalam semua. Balut jadual ini ke dalam jadual kontena lain. Gunakan pendekatan yang sama untuk susun atur lajur tunggal, tetapi berikan jadual kandungan satu lajur. Pendekatan ini sangat sesuai jika reka bentuk e -mel anda mengandungi imej yang dipecahkan melalui pelbagai sel meja. Jika tidak, satu jadual dengan baris TD untuk tajuknya (dengan Colspan = "2" jika reka bentuk menggunakan dua lajur), kandungan, dan footer harus dipaparkan dengan baik dalam semua tetapi perisian e -mel nota Lotus.
Gunakan atribut dalam jadual dan tag TD untuk mengawal paparan jadual. Sebagai contoh, menetapkan sempadan = "0", valign = "atas", align = "kiri" (atau pusat, jika itu sesuai dengan reka bentuk), cellpadding = "0", sel -sel = "0", dan sebagainya. Ini terutamanya membantu pelanggan e -mel yang lebih tua untuk memaparkan e -mel dalam cara yang boleh diterima (hampir).
Walaupun reka bentuk e -mel anda tidak termasuk sempadan di sekitar meja anda, anda mungkin dapat membantu semasa pembangunan untuk menetapkan sempadan = "1" untuk membantu dengan debugging sebarang masalah yang timbul dengan penjajaran dalaman TR dan tag TD. Tukar kembali ke sempadan = "0" untuk ujian dan pengeluaran.
Walaupun pendekatan ini mungkin menyinggung perasaan pemurni yang lebih suka kod menggunakan piawaian terkini, ia adalah satu -satunya pendekatan yang berdaya maju pada ketika ini. Tetapi hakikat bahawa kita menggunakan jadual untuk susun atur tidak bermakna kita perlu menggunakan kaedah sekolah lama sepenuhnya. Sebagai contoh, tidak kira betapa buruknya nota Lotus memaparkan e -mel HTML, anda tidak perlu menggunakan tag fon. Dan sementara enjin rendering HTML Outlook 2007 kurang sempurna, ia memaparkan jadual HTML asas dengan baik.
Terdapat beberapa kaveat, walaupun; Mari kita lihat gaya teks kami seterusnya.
Langkah 2: Tambah Gaya CSS
Adakah saya mengatakan sokongan CSS adalah miskin dalam klien mel? Nah, itu. Tetapi anda boleh (dan sepatutnya) masih menggunakan CSS untuk gaya dalam e -mel anda sebaik sahaja susun atur meja bersarang anda ada. Terdapat hanya beberapa perkara yang perlu diperhatikan. Berikut adalah langkah -langkah yang saya gunakan.
Pertama, gunakan gaya inline untuk menyimpan semua maklumat gaya anda, seperti yang ditunjukkan di sini:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Ini termasuk jadual, td, p, a, dan sebagainya.
Jangan gunakan perisytiharan gaya CSS dalam tag kepala HTML, seperti yang anda mungkin ketika mengarang laman web. Sebaliknya, letakkan deklarasi gaya anda tepat di bawah tag badan - Google Mail, bagaimanapun, cari apa -apa deklarasi gaya dalam e -mel dan (membantu) memadamkannya. Juga, jangan repot -repot menggunakan elemen pautan untuk merujuk lembaran gaya luaran: Google Mail, Hotmail, dan perisian e -mel lain akan mengabaikan, mengubah suai, atau memadam rujukan luaran ini ke lembaran gaya.

Untuk jadual kontena anda - yang menempatkan jadual tajuk, kandungan, dan footer - tetapkan lebar jadual kepada 98%. Ternyata Yahoo! Mail memerlukan kusyen 1% di kedua -dua belah pihak untuk memaparkan e -mel dengan betul. Jika selokan sisi penting untuk reka bentuk e -mel anda, tetapkan lebar kepada 95% atau bahkan 90% untuk mengelakkan masalah yang berpotensi. Sudah tentu, jadual di dalam jadual kontena hendaklah ditetapkan kepada 100%.

Letakkan maklumat gaya font umum dalam jadual TD paling dekat dengan kandungan. Ya, ini boleh menghasilkan pengisytiharan gaya berulang dalam pelbagai sel TD. Letakkan definisi gaya fon ke dalam tajuk (mis. H1, H2), P, atau tag hanya apabila perlu.

Gunakan Divs dengan berhati -hati untuk mengapung kotak kecil kandungan dan pautan ke kanan atau kiri di dalam sel TD meja. Google Mail, untuk satu, nampaknya mengabaikan pengisytiharan terapung CSS (namun Yahoo! dan Hotmail mengatasinya dengan baik). Kadang -kadang lebih baik untuk mengodkan susun atur jadual yang lebih kompleks daripada bergantung pada perisytiharan terapung. Atau, kerana ia terlalu mudah untuk menggegarkan e -mel, minta pereka anda meletakkan kandungan terapung di lajur sempit. Sokongan Flaky untuk Floats adalah salah satu isu yang boleh menyebabkan reka bentuk e -mel diolah semula.

Walaupun div kelihatan hampir tidak berguna, rentang kelihatan berfungsi hampir setiap kali, kerana mereka adalah unsur -unsur dalam talian. Dalam sesetengah kes, rentang boleh digunakan untuk lebih daripada sekadar pewarna atau teks saiz: mereka boleh digunakan untuk meletakkan teks di atas atau di bawah kandungan.

Perhatikan bahawa beberapa perkhidmatan penghantaran e -mel akan membongkar definisi gaya untuk menjadikannya lebih jelas dan, oleh itu, lebih mudah dibaca oleh semua perisian e -mel. Sebagai contoh, CSS shorthand style = "margin: 10px 5px 10px 0;" boleh diperluas ke dalam deklarasi gaya panjang yang ditunjukkan sebelum ini. Uji setiap e -mel dan lihat untuk melihat apa yang berlaku pada kod e -mel. Mulakan dengan CSS Shorthand kerana, dalam kes yang paling teruk, nampaknya berfungsi dengan baik dengan semua perisian e -mel.

Jika anda telah memuat turun dan mengkaji templat e -mel dari Monitor Kempen dan MailChimp, anda akan melihat bahawa mereka merawat jadual kontena seolah -olah ia adalah tag badan HTML. Pasukan monitor kempen merujuk kepada jadual ini sebagai "bodyimposter," yang merupakan cara terbaik untuk memikirkan bingkai atau meja pembalut. Dari perspektif CSS, jadual kontena melakukan apa yang akan dilakukan oleh elemen badan HTML jika perkhidmatan seperti Google Mail tidak melumpuhkan atau mengabaikan tag badan.

Langkah 3: Mengamalkan Amalan Terbaik

Mengetahui bahawa anda telah membuat e -mel HTML yang sah menggunakan garis panduan yang saya cadangkan hanya sebahagian daripada penyelesaian - terdapat beberapa amalan terbaik yang harus anda ikuti untuk memastikan e -mel anda diterima dengan baik.

Langkah seterusnya adalah untuk menguji e -mel HTML anda dalam pelbagai pelanggan e -mel. Selalunya ini akan mengenal pasti masalah yang memerlukan penyelesaian.

Alat ujian pertama yang digunakan ialah pelayar web Firefox dan Internet Explorer. Jika e -mel memaparkan dengan baik atau sempurna dalam kedua -dua pelayar, terdapat peluang yang baik untuk menguji e -mel di Outlook, Yahoo!, Google Mail, dan perkhidmatan lain hanya akan mendedahkan masalah kecil. Sekiranya boleh, saya juga akan mengesyorkan menguji e -mel anda di Internet Explorer 6 - ini harus memberi anda petunjuk yang baik tentang bagaimana e -mel anda akan diberikan dalam Outlook 2003 (rujuk senarai sumber pada akhir artikel ini untuk maklumat yang dijalankan Explorer 6). Akhirnya, untuk menguji bagaimana e -mel akan melihat pada iPhone atau iPad, periksa e -mel HTML anda dalam pelayar web safari.

Setelah e -mel muncul dengan baik dalam kedua -dua pelayar web tersebut, gunakan perkhidmatan penghantaran e -mel untuk menghantar e -mel ke pelbagai akaun e -mel ujian. Idealnya, ini harus termasuk akaun dengan Yahoo!, Hotmail, dan perkhidmatan Google Mail. Akaun ujian yang anda gunakan harus, tentu saja, ditentukan oleh nama domain dalam senarai mel orang yang akan menerima e -mel. Sebagai contoh, jika tidak ada pelanggan AOL dalam senarai ini, mungkin membuang masa dan wang untuk ditubuhkan, dan menguji dengan, akaun e -mel AOL.

Berikut adalah tweak kod yang paling biasa yang saya dapati perlu semasa fasa ujian ini:

• Kadang -kadang, suis dari lebar peratusan ke lebar tetap diperlukan. Walaupun ini tidak sesuai - kerana pembaca boleh dan saiz semula tingkap e -mel mereka semasa membaca - kadang -kadang, menggunakan lebar tetap adalah satu -satunya cara untuk memaparkan susun atur dengan betul dalam pelbagai klien e -mel.
• Jika terdapat isu jarak dengan lajur dalam reka bentuk e -mel, tweak pertama sel -atribut sel -sel dan sel -sel dari jadual HTML. Jika itu tidak berfungsi, gunakan margin CSS dan atribut padding. Jarak HTML berfungsi lebih baik dengan perisian e -mel yang lebih lama.
• anjakan imej boleh berlaku apabila sel TD ditutup tepat di bawah tag IMG. Ini adalah masalah HTML kuno. Meletakkan tag tepat selepas (pada baris yang sama seperti) tag IMG menghilangkan jurang 1-piksel yang menjengkelkan dan mistik.

Di samping itu, amalan terbaik berikut disyorkan:

• Elakkan menggunakan JavaScript. Kebanyakan perisian e -mel akan melumpuhkannya.
• Jika imej dihiris dan tersebar di beberapa sel meja HTML, uji e -mel menggunakan banyak akaun ujian. Kadang -kadang, ia mungkin kelihatan hebat dalam pandangan tetapi akan dialihkan oleh satu atau lebih piksel di Hotmail dan perkhidmatan lain. Juga pertimbangkan untuk membuat imej imej latar belakang pada jadual HTML baru yang merangkumi semua baris jadual dan lajur yang akan memaparkan bahagian -bahagian imej latar belakang anda; Ini sering mencapai kesan yang sama seperti mengiris imej, tetapi menggunakan kod kurang dan dapat memberikan hasil yang lebih baik (lihat di bawah). Perhatikan bahawa Outlook 2007 tidak memaparkan imej latar belakang; Pastikan anda menguji kod e -mel anda dengan perisian e -mel sasaran anda.
• Untuk imej latar belakang, gunakan atribut latar belakang jadual dan bukannya menggunakan CSS. Ini berfungsi dengan lebih konsisten merentasi perisian e -mel daripada penyelesaian berpotensi lain.
• Simpan imej e -mel pada pelayan web - sebaik -baiknya dalam folder yang terpisah dari imej laman web anda (contohnya, dalam folder yang dipanggil /imej /e -mel), dan jangan padamkannya. Sesetengah orang membuka e -mel minggu atau bulan kemudian, dengan cara yang sama orang menggunakan penanda buku untuk kembali ke laman web.
• Pastikan semua imej anda menggunakan atribut alt, ketinggian, dan lebar. Menetapkan nilai untuk atribut ini meningkatkan hasil dalam Google Mail, serta mengekalkan susun atur anda apabila pembaca mempunyai imej mereka dimatikan. Walau bagaimanapun, perhatikan bahawa Outlook 2007 tidak mengiktiraf atribut alt.
• Gunakan atribut sasaran = "_ kosong" untuk tag A, supaya orang yang membaca dengan perkhidmatan webmail tidak mempunyai halaman yang diminta muncul dalam antara muka webmail mereka.
• Walaupun imej 1 × 1-piksel boleh digunakan untuk memaksa jarak untuk membuat susun atur e-mel yang tepat, spammer sering menggunakan imej 1 × 1-piksel untuk menentukan sama ada e-mel mereka telah dibuka. Menggunakan amalan ini akan meningkatkan kemungkinan bahawa e -mel anda diklasifikasikan sebagai spam.
• Begitu juga, elakkan menggunakan imej yang besar "di atas lipatan" dalam e -mel. Ini adalah satu lagi amalan spammer klasik dan boleh menyebabkan e -mel anda ditafsirkan sebagai spam.

Penting untuk memastikan e -mel HTML anda memaparkan dengan imej dimatikan. Banyak aplikasi e -mel menetapkan paparan imej ke "off" secara lalai. Sebagai contoh, jika anda menggunakan imej latar belakang untuk memberikan warna latar belakang dengan warna fon putih di atasnya, pastikan warna latar belakang lalai untuk bahagian jadual HTML gelap, bukan putih.

Apabila saya menguji bagaimana e -mel memaparkan dengan imej, saya biasanya menggunakan editor teks saya untuk menggantikan atribut SRC setiap imej dengan kombinasi unik aksara seperti "XSRCX", dan kemudian mengembalikannya semula selepas ujian.

Setelah e -mel HTML telah tweak supaya ia memaparkan dengan baik dalam akaun e -mel ujian anda, langkah seterusnya adalah melalui senarai semak. Sebagai contoh, sahkan perkara berikut:

• Adakah paparan dari alamat dengan betul (sebagai nama, bukan alamat e -mel kosong)?
• Adakah baris subjek betul?
• Adakah maklumat hubungan betul dan jelas secara visual?
• Adakah bahagian atas e -mel memaparkan teks, "Anda menerima e -mel ini kerana ... berhenti berlangganan di bahagian bawah e -mel ini."?
• Adakah e -mel anda mengandungi teks yang meminta pembaca untuk menambahkan dari alamat anda ke buku alamat e -mel mereka?
• Adakah bahagian atas e -mel anda termasuk pautan ke versi web mesej?

Banyak perkhidmatan penghantaran e -mel termasuk keupayaan untuk melihat bagaimana e -mel HTML anda memaparkan dalam pelbagai perisian e -mel. Ia membantu anda mengenal pasti kod tweak yang diperlukan sebelum menghantar.

Langkah 4: Kod untuk Google Mail, Lotus Notes, dan Outlook 2007

Google Mail, Lotus Notes, dan Outlook 2007 mempersembahkan cabaran pengekodan unik mereka sendiri. Outlook 2007, Percayalah atau tidak, mempunyai sokongan yang kurang jelas untuk CSS daripada versi Outlook sebelumnya!

Kekurangan sokongan Google Mail sedikit lebih mudah diampuni - kerana aplikasi berjalan dalam penyemak imbas, ia tidak dapat mengawal kandungan e -mel yang dipaparkan. Akibatnya, jurutera Google terpaksa mengambil langkah -langkah untuk memastikan aplikasi mereka memaparkan dengan betul tanpa mengira kualiti HTML atau CSS di mana e -mel ditulis.

Akibatnya, Google Mail bertindak seperti artifak awal 1990 -an, apabila piawaian web adalah primitif. Ia memerlukan beberapa kerja, tetapi ada kemungkinan untuk membuka halaman Google Mail dan melihat betapa rumit pendekatan mereka untuk memberikan e -mel HTML sebenarnya.
Untuk satu perkara, Google Mail memadamkan gaya CSS yang terkandung di antara mana -mana tag gaya, tidak kira di mana ia muncul dalam e -mel. Dan fon yang dipaparkan dalam jadual HTML - satu -satunya alternatif untuk menggunakan gaya - mempunyai tabiat ganjil yang kelihatan lebih besar daripada yang dimaksudkan, tidak kira bagaimana e -mel HTML disusun.

Walau bagaimanapun, berita gembira adalah bahawa jika anda kod untuk mengambil kira keanehan ketiga -tiga aplikasi e -mel ini, kod e -mel HTML anda mungkin akan dipaparkan dengan baik dalam kebanyakan, jika tidak semua, pelanggan e -mel. Berikut adalah beberapa teknik yang kelihatan berfungsi dengan baik di Google Mail dan perisian e -mel yang lebih lama:

• Tentukan warna latar dalam sel TD dengan atribut BGColor, bukan gaya CSS.
• Seperti yang dinyatakan di atas, gunakan atribut latar belakang dalam sel TD untuk imej latar belakang dan bukannya menggunakan CSS. Satu kesan sampingan pendekatan ini adalah bahawa imej latar belakang boleh dibuat setinggi yang diperlukan-jika kandungan yang digunakan dalam templat e-mel anda mungkin bervariasi dalam saiz, menggunakan imej latar belakang tambahan dengan cara ini membolehkan ketinggian E -mel mengecilkan atau berkembang, bergantung pada ketinggian salinan, dari satu e -mel ke seterusnya. Walau bagaimanapun, ingatlah bahawa Outlook 2007 mengabaikan imej latar belakang sepenuhnya.
• Jika ia berfungsi dengan lebih baik, gunakan perisytiharan padding untuk mengawal margin dalam sel TD. Gaya margin tidak berfungsi dalam sel -sel ini, tetapi padding tidak.
• Jika anda memerlukan sempadan di sekitar sel TD, ingatlah bahawa Google Mail memaparkan sempadan di sekitar sel TD apabila ia ditakrifkan dalam div, tetapi tidak apabila ia ditakrifkan sebagai gaya sempadan dalam tag TD.
• Jika anda memerlukan pautan berwarna terang terhadap warna latar belakang yang gelap, letakkan definisi font dalam sel TD (jadi ia terpakai kepada p dan tag sama) kemudian tambahkan warna: gaya ke tag.
Jika p dan fon kelihatan berbeza saiz, bungkus tag dalam tag p.
Google Mail secara agresif menggunakan lajur kanan antara muka pengguna Mail Google, yang memerah e-mel HTML ke panel pusat. Pastikan gaya padding dalam kandungan TDS ditetapkan kepada 10 piksel semua bulat, supaya teks tidak memukul di tepi kiri dan kanan.
Apabila menguji e -mel HTML dengan akaun Google Mail, kemungkinan anda akan mendapati bahawa satu atau lebih gaya fon hilang dalam TD, H1, H2, P, A, dan tag lain. Periksa setiap fon dengan teliti untuk memastikan Google Mail memaparkan fon dengan betul.
Selain Mail Google, ada satu lagi bahaya yang kurang jelas yang dihadapi oleh pengaturcara ketika membuat e -mel HTML: Lotus Notes. Banyak syarikat besar terus menyokong dan menaik taraf pemasangan nota mereka.
Malangnya, mustahil untuk memberitahu syarikat mana yang menggunakan nota. Pendekatan terbaik adalah mengikuti garis panduan yang diterangkan dalam artikel ini - lebih primitif kod, kemungkinan besar ia akan berfungsi dengan baik, jika tidak sempurna, dengan nota.
yang mengatakan, nota Lotus yang agak mungkin akan memperkenalkan ke kebiasaan e -mel HTML anda yang hampir melampaui kepercayaan. Sebagai contoh, versi nota lama boleh menukar imej ke format proprietari mereka, atau hanya mengabaikan HTML asas yang sempurna dalam satu e -mel, tetapi paparkan HTML lain yang lain dalam e -mel lain.
Berikut adalah beberapa petua yang akan membantu anda meyakinkan Nota untuk memaparkan e -mel HTML anda dengan betul:
• Seperti yang kita bincangkan sebelum ini, gunakan jadual kontena yang mengandungi semua jadual susun atur dalaman (contohnya, untuk header, kandungan, dan footer). Ini menyimpan e -mel bersama -sama dalam satu bahagian HTML, jadi kepingan susun atur kurang berkemungkinan bersiar -siar apabila dipaparkan dalam nota.
• Buat longkang di sekitar jadual kontena dengan menetapkan lebar ke peratusan dan/atau menggunakan cellpadding sekurang -kurangnya 5.
• Seperti yang saya nyatakan sebelum ini, elakkan menggunakan perisytiharan gaya dalam tag kepala e -mel anda. Ini mungkin pendekatan yang mematuhi piawaian web, tetapi nota (seperti Google Mail) mungkin memadamkan gaya anda. Bergantung, sebaliknya, pada gaya inline dalam jadual, td, h1, h2, p, a, dan tag lain.
• Gunakan URL mutlak ke imej yang disimpan pada pelayan web. Anda tidak boleh berbuat banyak tentang nota yang menukar imej, tetapi menggunakan imej jauh mungkin membantu.
• Pautan Intra-Email, menggunakan sauh yang dinamakan, jarang (jika pernah) bekerja dalam nota. Ia adalah yang terbaik untuk mengelakkan pautan yang melompat ke e -mel ke sekeping kandungan tertentu.
• Elakkan colspans dalam jadual HTML anda. Nota - terutamanya versi terdahulu - boleh berurusan hanya dengan susun atur jadual asas.
• Pastikan lebar sel TD anda adalah tepat. Tidak seperti pelayar web, yang secara automatik menetapkan semua sel ke lebar yang ditentukan terluas, nota saiz setiap sel TD berdasarkan lebar yang ditetapkan.
• Memusatkan susun atur e -mel biasanya tidak akan berfungsi dalam nota. Susun atur e-mel umumnya harus ditinggalkan.

Menggunakan teknik -teknik ini untuk mencapai kejayaan yang berjaya dalam Google Mail dan Lotus Notes akan memastikan bahawa e -mel anda juga dipaparkan dengan baik di Outlook 2007, yang menggunakan enjin rendering HTML yang lebih lama. Microsoft telah menerbitkan butiran mengenai perisian e -mel mereka dan tidak akan dipaparkan dengan betul; Maklumat lanjut boleh didapati di bahagian Sumber di akhir artikel ini).

Monitor kempen, perkhidmatan penghantaran e -mel, mempunyai senarai komprehensif sokongan elemen CSS untuk setiap pelanggan e -mel mudah alih, web dan desktop yang popular.

Langkah 5: Pengekodan untuk telefon dan tablet

Bilangan orang yang menakjubkan membaca e -mel HTML di telefon pintar dan tablet mereka, serta perisian e -mel desktop mereka. Mengadaptasi jadual HTML anda untuk memaparkan dengan baik pada peranti ini ternyata agak mudah. Ia membantu sokongan CSS sangat baik untuk enjin rendering HTML yang digunakan pada telefon dan tablet baru.

Penyelesaiannya adalah menggunakan definisi CSS @media untuk menyasarkan sel TD Jadual HTML dan meningkatkan saiz fon yang diperlukan untuk dipaparkan dengan baik. Sebagai contoh, fon pada iPhone perlu menjadi 13 piksel untuk dibaca. Bahagian terbaik? Perisian e -mel webmail dan desktop sama ada akan melepaskan atau mengabaikan definisi @media anda semasa telefon dan tablet anda akan membaca kod dan memaparkan semuanya dengan sempurna.

Berikut adalah satu set sampel definisi @media untuk memaparkan jadual HTML susun atur satu lajur untuk telefon dan tablet:

<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

Letakkan kod @media ini terus di bawah tag badan anda ke definisi jadual anda dan ke sel TD anda. Apabila e-mel HTML anda dilihat dengan peranti (atau penyemak imbas web secara mendatar) kurang daripada 480 piksel, definisi ini akan diaktifkan.

Rahsia untuk mengodkan e-mel HTML dua lajur untuk menyesuaikan diri dengan skrin telefon dan tablet kecil? Letakkan setiap lajur ke dalam meja sendiri. Seterusnya, untuk setiap jadual HTML, gunakan CSS sebaris untuk terapung: kiri dan html align = "kiri" untuk mengapung dan menyelaraskan setiap jadual lajur kandungan ke kiri. Kemudian tambahkan ke definisi jadual anda dan ke sel TD anda.

Dengan kod @media di atas, untuk skrin kurang daripada 480 piksel lebar, ini akan menetapkan jadual lajur, lajur kiri dan kanan anda, lebar yang sama dengan lajur kandungan kiri dan slaid di bawah lajur utama.

Pendekatan ini boleh digunakan untuk menyasarkan sebarang perubahan reka bentuk susun atur untuk berfungsi dengan telefon dan/atau tablet.

Penyelesaian ini berasal dari panduan yang sangat baik dari monitor kempen, reka bentuk e -mel responsif, yang mempunyai lebih banyak maklumat dan idea tentang cara membuat e -mel HTML responsif kepada saiz skrin yang berbeza.

Ringkasan

Ramai orang yang menerima e -mel lebih suka HTML melalui teks untuk beberapa sebab. Walau bagaimanapun, bagi pengaturcara, tugas membuat e -mel HTML yang akan memaparkan secara konsisten muncul kedua -dua mudah dan mengerikan. Artikel ini telah menerangkan banyak isu dan strategi untuk mewujudkan markup yang akan berfungsi merentasi perisian e -mel.

Apakah idea terbaik untuk diambil dari artikel ini? Sekiranya ada pilihan yang dibuat antara reka bentuk e -mel yang mudah dan penyelesaian yang lebih kompleks, kesederhanaan selalu menjadi taruhan paling selamat.

bacaan selanjutnya

Sumber -sumber ini menawarkan maklumat berharga yang akan membantu anda jika anda ingin mengetahui lebih lanjut mengenai pengekodan e -mel HTML.

• Monitor Kempen: Panduan untuk sokongan CSS dalam e -mel
• Monitor Kempen: Reka bentuk e -mel responsif
• MailChimp: E -mel pada peranti mudah alih
• MailChimp: E -mel Blueprints
• MailChimp: Panduan Medan Pemasaran E -mel

dan di sini ada lagi ...

Projek piawaian e -mel
Projek Piawaian E -mel mungkin merupakan titik permulaan yang terbaik untuk memahami dengan tepat sejauh mana HTML dan CSS disokong oleh pelanggan e -mel yang berbeza. Laman ini juga mengekalkan ujian asid yang boleh digunakan untuk membandingkan pematuhan di seluruh perisian e -mel, dan terdapat beberapa cara di mana anda boleh mengambil bahagian untuk membantu meningkatkan sokongan e -mel piawaian web.

monitor kempen percuma dan templat e -mel html mailchimp
Kedua -dua perkhidmatan penghantaran e -mel ini secara aktif menguji templat mereka dari masa ke masa dengan pelanggan e -mel yang berbeza. Walau bagaimanapun, terdapat perbezaan halus dalam pendekatan yang masing -masing mengambil - pemantau kempen meletakkan perisytiharan gaya dalam tag kepala, sementara MailChimp tidak. Pastikan untuk menguji kod HTML akhir anda dengan apa sahaja pelanggan e -mel yang digunakan oleh penerima senarai e -mel anda.

garis panduan reka bentuk e -mel teks biasa
Artikel ini menyenaraikan beberapa teknik mudah untuk membuat e -mel teks lebih mudah untuk diimbas.

Menguji e -mel html
Artikel ini meneroka prosedur ujian di pelbagai pelanggan e -mel.  Artikel lain yang berkaitan termasuk membuat susun atur e -mel HTML dan memahami ujian multivariate.

Artikel mengenai imej e -mel yang disekat oleh

"> Clickz dan Monitor Kempen

Dari tahun 2004, artikel Clickz menunjukkan bagaimana perisian e -mel utama membandingkan apabila imej disekat atau apabila kandungan dilihat dalam anak tetingkap pratonton. Artikel Monitor Kempen memasuki lebih terperinci, menyenaraikan contoh dan idea sebenar bagaimana untuk memerangi rendering imej lalai e-mel anda, serta mereka bentuk e-mel anda untuk melihat baik-baik saja dalam pratonton.
Word 2007 HTML dan CSS keupayaan rendering dalam Outlook 2007

Keterangan Microsoft rasmi tentang Outlook 2007 yang akan dan tidak akan diberikan untuk HTML dan CSS. Termasuk pautan ke pengesahan yang berfungsi di Dreamweaver, serta alat penyuntingan Microsoft.
mailchimp: templat e -mel html yang dimulakan panduan

Banyak maklumat hebat mengenai semua aspek e -mel HTML, termasuk bagaimana penapis spam berfungsi. Pemilihan alat yang baik dimasukkan untuk menjadikan proses lebih mudah. ​​
siri "Rahsia HTML E -mel"

Beberapa maklumat ini sudah lama tetapi sekeping yang baik pada Lotus Notes ditawarkan.
css dan e -mel, mencium di pokok

Pendekatan CSS yang sangat baik untuk e-mel HTML telah diterbitkan oleh senarai selain. Nota: Penulis telah menulis kemas kini ke artikel ini, yang dipaparkan di blog monitor kempen, mengoptimumkan persembahan CSS dalam e -mel HTML.
bagaimana kod html mempengaruhi e-mel penghantaran

Gambaran keseluruhan yang baik yang menggambarkan bagaimana perkhidmatan e -mel yang berbeza melihat HTML yang anda sertakan dalam e -mel HTML. Anda tidak dapat menangani setiap masalah secara langsung (contohnya, mewujudkan sempadan yang jelas antara versi HTML dan teks e -mel anda adalah masalah untuk penyedia perkhidmatan e -mel anda, jika anda menggunakannya) tetapi ia membantu mengetahui apa yang berlaku. Panduan Pemasaran E -mel 6 Langkah Beginner untuk Kejayaan


Berikut adalah panduan untuk pemasaran e -mel yang merangkumi topik yang lebih lengkap daripada tajuk yang boleh diakses, dan ia termasuk seksyen maklumat yang baik untuk mendapatkan hasil terbaik dari pembaca anda daripada keputusan reka bentuk yang akan anda buat semasa membina templat e -mel. Ia dari akhir 2020, jadi ia memberikan pandangan yang kukuh pada ruang pemasaran e -mel seperti yang dinyatakan hari ini.

bagaimana untuk memulakan blog pada tahun 2020 (dan menjana wang): Panduan mudah untuk memulakan blog hari ini
Salah satu cara terbaik untuk mengembangkan senarai mel anda ialah menjalankan blog yang konsisten. Panduan ini adalah penemuan yang jarang berlaku - ia menunjukkan kepada anda bagaimana untuk mendapatkan blog yang berkesan berjalan dan menghasilkan hasil dengan cepat dan memotong banyak bunyi di luar sana di dunia nasihat blog. Ia juga meliputi menggunakan buletin e -mel anda untuk mengembangkan penonton blog anda, mewujudkan kitaran yang baik untuk keseluruhan operasi anda.

Soalan Lazim (Soalan Lazim) mengenai surat berita e -mel HTML

Apakah amalan terbaik untuk pengekodan surat berita e -mel HTML? Pertama, selalu gunakan jadual untuk susun atur. Tidak seperti reka bentuk web moden, reka bentuk e -mel masih banyak bergantung pada jadual. Kedua, CSS dalam talian adalah cara untuk pergi. Ini kerana tidak semua pelanggan e -mel menyokong CSS tertanam atau dipautkan. Ketiga, gunakan atribut HTML untuk lebar, ketinggian, dan banyak lagi. Ini memastikan bahawa e -mel anda memaparkan dengan betul di seluruh pelanggan e -mel yang berbeza. Akhir sekali, sentiasa menguji e -mel anda sebelum menghantarnya. Terdapat pelbagai alat yang tersedia dalam talian yang membolehkan anda menguji bagaimana e -mel anda akan melihat pelanggan e -mel yang berbeza. Memastikan ia kelihatan baik pada semua peranti, dari komputer desktop ke telefon bimbit. Untuk mencapai ini, anda boleh menggunakan pertanyaan media di CSS anda. Pertanyaan media membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin peranti. Walau bagaimanapun, tidak semua pelanggan e-mel menyokong pertanyaan media, jadi penting untuk mereka bentuk e-mel anda dengan pendekatan mudah alih pertama. Ini bermakna merancang untuk skrin terkecil terlebih dahulu dan kemudian menambah pertanyaan media untuk menyesuaikan diri dengan skrin yang lebih besar. Surat berita e -mel HTML anda. Walau bagaimanapun, perlu diingat bahawa tidak semua pelanggan e -mel menyokong fon web. Bagi mereka yang tidak, anda harus sentiasa memberikan fon sandaran. Ini biasanya merupakan fon standard yang disokong secara meluas, seperti Arial atau Times New Roman. Untuk menggunakan font web, anda akan memasukkan fail font dalam CSS anda menggunakan peraturan @font-face.

Bagaimana saya boleh menambah imej ke surat berita e-mel HTML saya? Surat berita e -mel HTML boleh dilakukan menggunakan tag

. Walau bagaimanapun, terdapat beberapa perkara yang perlu diingat. Pertama, selalu masukkan atribut lebar dan ketinggian dalam tag

anda. Ini memastikan bahawa imej memaparkan dengan betul. Kedua, gunakan URL mutlak untuk imej anda. Ini bermakna sumber imej harus menjadi URL penuh, bukan jalan relatif. Akhir sekali, selalu sertakan teks alt untuk imej anda. Ini adalah perihalan imej yang memaparkan jika imej tidak dapat dimuatkan.

Bagaimanakah saya dapat memastikan surat berita e -mel HTML saya kelihatan baik dalam semua pelanggan e -mel? Walau bagaimanapun, terdapat beberapa strategi yang boleh anda gunakan. Pertama, selalu gunakan jadual untuk susun atur dan CSS sebaris. Ini disokong secara meluas di seluruh pelanggan e -mel. Kedua, uji e -mel anda dalam pelbagai pelanggan e -mel sebelum menghantarnya. Terdapat alat dalam talian yang membolehkan anda melakukan ini. Akhir sekali, pastikan reka bentuk anda mudah. Reka bentuk anda yang lebih kompleks, semakin besar kemungkinannya untuk memecahkan pelanggan e -mel tertentu. JavaScript dalam surat berita e -mel HTML anda. Ini kerana banyak pelanggan e -mel tidak menyokong JavaScript, atau memilikinya dilumpuhkan secara lalai atas alasan keselamatan. Sebaliknya, berpegang pada HTML dan CSS untuk reka bentuk e-mel anda.

Bagaimana saya boleh menambah butang panggilan-ke-tindakan dalam surat berita e-mel HTML saya? Surat berita e -mel HTML anda boleh dilakukan menggunakan HTML dan CSS. Cara paling mudah ialah menggunakan tag dengan CSS untuk gaya seperti butang. Walau bagaimanapun, untuk keserasian yang lebih baik di seluruh pelanggan e -mel, anda boleh menggunakan jadual dengan sel tunggal dan gaya yang kelihatan seperti butang.

Bagaimana saya boleh menambah warna latar belakang ke surat berita e -mel HTML saya?

Menambah warna latar belakang ke buletin e -mel HTML anda boleh dilakukan dengan menggunakan CSS. Anda boleh menggunakan harta warna latar belakang untuk menetapkan warna latar belakang untuk keseluruhan e-mel anda, atau untuk unsur-unsur tertentu seperti jadual atau sel meja. Walau bagaimanapun, perlu diingat bahawa tidak semua pelanggan e -mel menyokong warna latar belakang. Bagi mereka yang tidak, anda harus memberikan warna sandaran menggunakan atribut BGColor di HTML anda. Surat berita boleh dilakukan menggunakan tag. Anda boleh memaut ke laman web, alamat e -mel, atau nombor telefon. Untuk menghubungkan ke laman web, gunakan atribut HREF dengan URL penuh laman web. Untuk menghubungkan ke alamat e -mel, gunakan MailTo: Protokol dalam atribut HREF. Untuk memaut ke nombor telefon, gunakan protokol TEL: dalam atribut HREF. Surat berita boleh dilakukan menggunakan imej dan pautan. Anda akan menggunakan tag

untuk imej ikon, dan bungkus bahawa dalam tag untuk menghubungkan ke profil media sosial anda. Sentiasa sertakan teks alt untuk imej anda, dan gunakan URL mutlak untuk kedua -dua sumber imej dan pautan href.

Atas ialah kandungan terperinci Cara Kod HTML E -mel Buletin & Templat E -mel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!