() translation by (you can also view the original English article)
Mengetahui html email akan menguji kesabaran setiap manusia. Masalah format tampaknya kecil pasti akan muncul dan anda berpikir untuk diri sendiri, "diri, aku dunia kelas web pengembang tipe orang yang terlatih dalam terbaru dan terbesar html5/css3/apapun, saya dapat menangani hal ini dengan banyak o ' keystrokes luang."
Beberapa jam/cangkir kopi Googling kemudian, anda siap untuk menarik rambut anda keluar dan mulai untuk merenungkan apa yang akan Anda lakukan untuk orang/orang-orang yang menciptakan {mengisi klien email kosong di sini}. Itu adalah cukup banyak mengapa Boilerplate HTML Email adalah sekitar.
HTML Email Boilerplate adalah sebuah template dari jenis yang tidak ada desain atau tata letak, yang akan membantu anda menghindari beberapa masalah render utama dengan klien email yang paling umum di luar sana-Gmail, Outlook, Yahoo, dll - HTML Email Boilerplate
Boilerplate adalah di sini untuk menyediakanmu dengan beberapa contoh dan tips-tips untuk menjagamu email desain render sebagai benar-untuk-bentuk sebanyak mungkin. Anda dapat menggunakan boilerplate sebagai titik awal untuk membangun emailmu. Atau, anda pengguna yang lebih mahir mungkin ingin memilih dan memilih cuplikan khusus berdasarkan kebutuhanmu.
Dalam artikel ini, kita akan menguraikan beberapa aspek kunci dari boiler dan mendiskusikan bagaimana menerapkannya.
Namun sebelum memulai, mari tinjau beberapa penyewa dasar email html:
- Satu-satunya hal yang dapat anda rujuk secara eksternal adalah gambar. Tidak ada stylesheet eksternal, font, video (html5 mulai mengubah ini), dll.
- Ada dukungan terbatas untuk elemen CSS di seluruh klien email (klien email = Outlook, Gmail, Hotmail, Yahoo, dll.). Anda dapat melihat spreadsheet yang bermanfaat tentang apa yang klien dukung fitur apa di sini.
- Tabel paling sering digunakan untuk menata email html.
- Dan hampir jahat di alam, anda perlu menguji di klien email, browser, dan OS.
1: Mengatur DOCTYPE
Meskipun banyak klien email menghapuskan DOCTYPE atau tidak mengizinkannya sama sekali, itu tidak berarti kami tidak ingin menetapkannya untuk tujuan pengujian kami sendiri. Dalam hal ini, XHTML 1.0 Strict doctype digunakan terutama karena dua klien populer yang menghapuskan doctypemu, Gmail dan Hotmail, menggunakannya sebagai default.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2: Bekerja Dengan Gambar
Ada beberapa masalah yang harus diperhatikan saat bekerja dengan gambar dalam email HTML:
- Menghubungkan gambar ke halaman lain dapat menjadi rumit. Klien yang berbeda akan menetapkan batas-batas yang tidak diinginkan (dan jelek) di sekitar gambar diklik.
- Beberapa klien email menambahkan spasi di bagian bawah gambar.
- Karena banyak klien email menonaktifkan gambar secara default, format/bingkai pesanmu dapat terdistorsi.
Untuk mengatasi masalah ini, boilerplate set up beberapa masuk akal default di kepala dokumen. Itu me-reset perbatasan di sekitar gambar terhubung ke nol. Set up kelas (image_fix) untuk digunakan ketika Anda tidak ingin ruang di bawah gambarmu. Boilerplate juga memberimu contoh bagaimana men-setup gambarmu, selalu pengaturan lebar, tinggi, Alt dan judul; yang membantu menjaga formatmu utuh dan konsisten.
1 |
/* Some sensible defaults for images
|
2 |
Bring inline: Yes. */
|
3 |
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} |
4 |
a img {border:none;} |
5 |
.image_fix {display:block;} |
Boilerplate membantu mengelola beberapa isu anda bisa lari ke ketika menggunakan foto dalam html email. Membawa inline Deklarasi ini untuk memastikan bahwa emailmu akan membuat seperti yang anda inginkan.
3: Tabel, Tabel, dan Lebih Tabel
Hal ini mungkin aman untuk mengasumsikan bahwa anda telah menggunakan tabel sebelumnya. Maksudku, tabel telah sekitar sejak fajar (internet) waktu. Dan sementara tidak terbaru atau paling keren metode di sekitar, tabel membingkai alat yang paling umum untuk HTML email dan metode yang mencoba dan benar untuk ruang secara efektif. Selain itu, nesting meja adalah cara yang bagus untuk kelompok dan memisahkan konten untuk menaklukkan desain paling rumit.
Boilerplate mengaturmu dengan beberapa mulai poin untuk bekerja dengan tabel. Yang pertama adalah tabel terluar (#backgroundTable) yang berfungsi sebagai wadah macam — membentang ke lebar ruang dapat dilihat di klien email. Dibutuhkan karena beberapa klien sewenang-wenang membatasi daerah untuk membuat - mungkin mengakibatkan anehnya selaras konten.
1 |
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} |
1 |
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable"> |
2 |
<tr>
|
3 |
<td valign="top"> |
4 |
... |
Kelas #backgroundTable membantu mengatur ulang beberapa email klien tertentu format ketika menetapkan kanvas untukmu untuk bekerja di.
Tabel (dalam) kedua terpusat dan diatur untuk pixel lebar (600px), lebar baik gunakan untuk menyimpan email dari peregangan lebih lebar dari klien email dapat dilihat real estat (panel pratinjau berpikir).
Selain itu, seperti halnya untuk gambar, boilerplate set beberapa default untuk tabel yang membantu menghindari masalah format. Perbatasan, cellpadding, cellspacing diatur ke nol dan konten vertikal sejalan dengan bagian atas sel.
Catatan: Karena dukungan terbatas untuk div di klien email, tabel yang terbaik dan kadang-kadang hanya kesempatan untuk memformat dan positioning kontenmu.
4: Perbaikan Spesifik Klien
Banyak alasan boilerplate ini, dan lain-lain seperti itu, ada adalah untuk menggagalkan apa tampaknya random acts sabotase oleh Yahoo, Google, Microsoft, dan sejenisnya. Yahoo menetapkan margin paragrapmu ke nol, jumbling teksmu bersama-sama dalam satu gumpalan besar. Gmail metatags (benar-benar, obliterates) setiap styling di kepala dokumen dan sekrup di sekitar dengan gambarmu. Hotmail membenci headermu dan Outlook telah lama kutukan keberadaan emailer HTML apapun.
Jadi boilerplate mencoba untuk menetralisir beberapa nuansa ini di mana mungkin, dan mengurangi efek dari sisanya.
Secara khusus, untuk Yahoo, boilerplate set margin paragrap 1em di kepala dokumen dan memerintahkan untuk membawanya inline. (lebih untuk datang di "inlining" kemudian)
1 |
p {margin: 1em 0;} |
Perubahan:
Ini:
Untuk Hotmail, boilerplate mengabaikan Hotmail's hijau header styling, menormalkan tinggi baris, dan menetapkan standar lebar.
1 |
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} |
1 |
h1, h2, h3, h4, h5, h6 {color: black !important;} /* or whatever color you want it to be */ |
Untuk Outlook, boilerplate set "perbatasan-runtuhnya: runtuhnya" untuk menyingkirkan beberapa padding default.
Tip: Dengan menetapkan #outlook {padding:0;} di kepala dokumenmu, anda dapat memaksa Outlook untuk menawarkan pilihan 'view di browser'. Sebuah fitur menarik yang akan mengagumkan jika klien lain yang ditawarkan. (H/T Fabio Carneiro dan MailChimp untuk potongan ini sangat baik.)
5: Mobile
Mobile adalah salah satu daerah yang lebih menarik dari bangunan HTML email. Sementara sebagian besar kita terjebak dalam abad ke 20 dari perspektif markup, smartphone baru telah memberi kita sekilas tentang apa hidup bisa menjadi seperti. Akhirnya, kami memiliki kesempatan untuk bermain dengan teknologi web "baru". Kita bisa bermain-main di bidang desain yang responsif, kami bisa query untuk isi hati kami, dan kami pasti dapat menargetkan platform yang berbeda. Oke, jadi mungkin aku punya terbawa sedikit tetapi mengingat keadaan email, mobile adalah melihat lebih baik setiap hari.
Dengan render ponsel dalam pikiran, boilerplate menyediakan titik awal yang baik untuk menargetkan ponsel. Ini membantu dengan font Resize (atau menghentikan). Ini membantu untuk mengoptimalkan email untuk mobile dengan pengaturan viewport lebar perangkat. Ini juga memberimu pertanyaan @media yang diperlukan untuk menargetkan iPhone (3 + 4), tablet (melalui resolusi), ponsel Android, dan pernyataan kondisional untuk Windows Mobile.
Pengingat: Anda tidak boleh membawa setiap gaya yang dideklarasikan dalam @media pertanyaan inline.
6: bekerja dengan EBP: Kapan dan bagaimana untuk membawa gaya Inline
Alat-alat seperti Dialek's Premailer membuat inlining angin. Alat yang hebat untuk emailer html apapun di dada, ikat pinggang, atau saku pelindung mereka.
Seperti disebutkan sebelumnya, ada beberapa klien yang menghapus gayamu tertanam di header. Kita perlu mengambil langkah lain dari hanya memiliki gaya tertanam di header dan membawa mereka inline. Anda dapat melakukan ini secara manual, menggunakan klien emailmu dibangun dalam alat (alat populer seperti kampanye Monitor dan Mailchimp memiliki mereka dibangun di), atau menggunakan alat standalone seperti Premailer. Bagaimanapun, ikuti petunjuk di boilerplate untuk mencari tahu apa yang harus dibawa inline.
Untuk memberikan gambaran tentang apa yang sedang kita bicarakan, lihatlah Yahoo ayat perbaikan disebutkan lebih dini dalam artikel. Itu harus menjadi inlined untuk bekerja. Jika tidak, Deklarasi margin anda akan diabaikan dan paragraf akan banyak bersama-sama. Di sisi lain dengan yang lain memperbaiki di boilerplate, markup seperti table td {border-collapse: collapse;} target itu masalah padding di Outlook tidak perlu dibawa inline. Outlook akan menghargai gaya tertanam anda (baik, untuk sebagian besar :)).
Sebagai contoh, anda akan pergi dari ini:
1 |
p {margin: 1em 0;} |
1 |
<p>Pellentesque habitant morbi tristique senectus ...</p> |
Ini:
1 |
p {margin: 1em 0;} |
1 |
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">Pellentesque habitant morbi tristique senectus ...</p> |
Perlu diingat bahwa setiap styling dalam dan tepat setelahrnkueri media tidak boleh dibawa sebaris. Saya akan merekomendasikan menghapus gaya tanya sampai anda puas dengan emailmu dan kemudian mengerjakannya kembali setelah menggarisbawahi gayamu yang lain.
7: Beberapa Sebutan Terhormat
Ada beberapa topik yang patut disebutkan tetapi tidak berhasil untuk boilerplate untuk satu alasan atau yang lain.
- HTML5 Video: sementara benar-benar, benar-benar dekat, ada beberapa kelemahan utama dukungan di Hotmail yang membuatnya canggung untuk memasukkan. Ada beberapa taktik menarik yang sedang diuji sekarang yang dapat membuat video yang sebenarnya dalam email di beberapa klien dan anggun menurunkan ke gambar diklik. Namun, Hotmail melemparkan sedikit kunci pas di seluruh hal seperti itu akan menunjukkan video dan memungkinkan pemutaran tapi tanpa kontrol visual. Klik kanan bekerja tapi yang tampaknya seperti peregangan untuk tanyakan pembacamu untuk melakukan. Anda juga bisa menyetel video ke autoplay - tetapi bisa anda benar-benar hidup dengan diri sendiri yang melakukan itu?
- Facebook buka grafik: mungkin seorang kandidat untuk rilis berikutnya. Saya masih beratnya efek memiliki ini dalam email dan secara khusus jika tidak ada versi browser email yang dibuat tersedia - itu harus ada?
8: keadaan Email
CSS3? Mari kita untuk CSS2 pertama.
Banyak surel yang mengeluh bahwa mereka harus membuat kode seperti 1999. Tabel, bukan div, berkuasa. CSS3? Mari kita ke CSS2 dulu. Email klien secara acak mendukung tag, deklarasi, dan spesifikasi keseluruhan. Namun, dengan munculnya perangkat iOS dan beberapa gerakan dalam ruang klien, render engine seperti Webkit bermunculan dan membuat hidup untuk emailers sedikit lebih mudah. Karena ini dan faktor-faktor lain, kami melihat beberapa desain paling rumit dan indah pernah. Sudah pasti yang menarik waktu untuk emailers.
Gerakan ini memiliki ton harus dilakukan dengan perangkat iOS mobile, khususnya. Pada bulan Juni tahun ini, klien email yang paling populer adalah perangkat iOS. Yang berarti bahwa kita dapat menggunakan kebanyakan webkit browser sesuatu akan mendukung untuk membangun email kami - hal-hal seperti CSS3, HTML5, semua datang ke dalam bermain (woohoo). Jangan terlalu bersemangat walaupun, anda masih harus memperhitungkan sangat terbatas tanpa dukungan CSS3 atau HTML5 di banyak desktop web klien email lain (tidak woohoo).
Dengan mengatakan bahwa, ini meningkatkan bar telah pasti membuat ruang telah rumit yang lebih rumit. Sementara beberapa klien email bergerak berbasis web standar, misalnya, Outlook pada Mac sekarang menggunakan webkit seperti rekan Apple Mail, kebanyakan desktop email dan berbasis web klien pindah ke html/css diterima dukungan di kura-kura-esque kecepatan. Jadi sementara mobile telah menunjukkan kepada kita sesuatu cahaya di ujung terowongan, itu juga menambahkan kolom lain ke dalam matriks yang sudah penuh sesak pengujian kemungkinan.
Seperti saya sebutkan sebelumnya, ini adalah pasti yang menarik waktu untuk emailers. Dengan begitu banyak besar perusahaan dan individu yang mendorong amplop untuk apa yang mungkin, inilah tak terelakkan (setidaknya aku berharap begitu) bahwa momentum akan mendorong hal-hal dalam arah yang tepat - dan dengan "hal" Maksudku html/css lebih baik dukungan, sedikit Standardisasi, dan lebih sedikit sakit kepala.
Kesimpulan
Boilerplate adalah di sini untuk menampilkan dan menyoroti beberapa perangkap berkembang untuk email dan klien email. Dan sementara tidak persis plug and play, dengan sedikit kerja keras akan memberikan beberapa contoh yang bermanfaat dan potongan yang akan membuat Anda email desain render sebagai benar-untuk-bentuk sebanyak mungkin. Setidaknya, ini akan menghemat beberapa waktu googling dan lebih penting menghemat beberapa rambut.
Saya akan senang mendengar kabar darimu. Jika anda memiliki sesuatu yang anda ingin lihat di boilerplate, beri tahu saya di sini atau @seanpowell.
Banyak terima kasih
Ketika itu bermuara pada itu, HTML Email Boilerplate adalah hanya kompilasi tips, potongan dan praktek-praktek terbaik yang datang di meja saya dan saya akan lalai untuk tidak menyebutkan beberapa penelitian besar dan keterbukaan Ros Hodgekiss, Brian Theis dan tim atas di Cam Han umum Monitor; dan Fabio Carneiro dan Mailchimp untuk pekerjaan besar yang mereka lakukan (dan me-reset besar menggunakan boilerplate). Boilerplate juga menempatkan melalui langkah menggunakan dua email besar pengujian alat, lakmus dan Email pada asam - tanpa mereka, ini akan menjadi tugas yang mustahil.
Sumber daya
Hanya beberapa yang saya gunakan secara teratur...
- Kampanye Monitor Blog dan Dukungan CSS Cheat Sheet
- MailChimp's Blog dan mengagumkan Panduan Lapangan
- Dialek 's Premailer Inliner alat... atau satu ini dari MailChimp... atau satu ini dari Dave Cranwell
- Layanan Pengujian Email Lakmus
- Email pada Asam Email Layanan Pengujian
- Emailogy - Email pada Asam 's besar boilerplate
- Dan tentu saja, Boilerplate Email HTML
