Mengetik email itu menyebalkan. Layout dan uji huruf adaptif dengan interaktif (misalnya, dengan bentuk dan bilah geser) adalah masalah di lapangan. Namun, tidak semuanya tidak terlalu buruk jika Anda memilih alat yang tepat. Pada artikel ini saya akan berbicara tentang kerangka kerja email -
MJML dan
Foundation for Emails - dan sumber daya favorit saya untuk menguji milis -
Litmus dan
Email On Acid .
Pada artikel sebelumnya, kami belajar bagaimana sejarah buletin dimulai dan peran apa yang dimainkan Outlook di dalamnya, dan juga menemukan interaktivitas yang dapat kita tambahkan ke buletin sekarang, dan yang mana di masa depan. Artikel ini akan berbicara tentang alat bagi mereka yang berurusan dengan milis hari ini.
Katakanlah Anda ingin membuat buletin
Opsi pertama: buat dokumen HTML baru, ambil boilerplate yang sudah jadi (misalnya, Cerberus yang populer atau Framework Email Responsif ) dan duduk untuk menulis tabel dengan gaya inline, google dalam proses peretasan yang hilang atau perbaikan untuk tata letak yang tiba-tiba masuk ke beberapa Gmail untuk Android. Opsi ini cocok jika Anda memiliki pengalaman dalam tata letak huruf, waktu luang yang cukup, dan tugasnya adalah tata letak huruf tunggal dan sederhana.
Contoh templat surat yang “out of the box” tersedia di Cerberus
Opsi kedua: gunakan editor online untuk membuat templat (misalnya, Mosaico atau Stripo ). Ini cara termudah. Sangat cocok jika Anda bukan pengembang atau jika Anda dihadapkan dengan tata letak untuk pertama kalinya dan tata letak surat itu cukup sederhana. Hampir semua editor online menyediakan templat yang sudah jadi, dan juga menyertakan peretasan dalam kode sumber templat untuk operasi email yang benar di klien surel populer. Tetapi alat-alat ini praktis tidak memungkinkan Anda untuk menyesuaikan tata letak surat untuk tata letak spesifik Anda dan umumnya hanya memberikan sedikit kontrol terhadap kode dan tampilan surat.
Perubahan pada templat surat di desainer pesan Stripo
Opsi ketiga: gunakan kerangka kerja email. Jika Anda secara teratur harus membuat buletin, jika tata letak surat rumit dan persyaratannya ketat, dan jika Anda ingin mengotomatiskan alur kerja Anda dan sebagian proses pengembangan surat itu, maka opsi ini adalah untuk Anda. Saya akan berbicara tentang dua alat paling ampuh: MJML dan Foundation for Emails (dikenal sebagai Ink di masa mudanya).
Kami menggunakan kerangka kerja email yang sudah jadi. Mjml
- Github: mjmlio / mjml
- Pengembang: Mailjet
- Tanggal Rilis: 2016
- Lisensi: MIT
- Popularitas: 7662+ bintang
- Templat: MJML
Gagasan utama yang tertanam dalam kerangka kerja:
- template responsif keluar dari kotak,
- penyederhanaan pekerjaan dengan kode melalui mesin template sendiri,
- satu set komponen yang siap digunakan di dalam surat itu,
- integrasi yang mudah ke dalam proses pengembangan milis.
Kerangka kerja menggunakan mesin template dengan nama yang sama. Sederhana dan sekaligus sangat kuat. Lupakan tabel tag, thead, tbody, th, tr, td. Lupakan bahwa gaya perlu ditulis sebaris. Lupakan tentang struktur rumit dari kode huruf. Seperti inilah tampilan email Anda menggunakan MJML:
<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>
Alih-alih konstruksi kompleks dari tabel HTML dari berbagai tingkat sarang, cukup menulis beberapa baris saja, yang, ketika membangun proyek, akan diubah menjadi kode HTML surat yang valid, “dibumbui” dengan semua peretasan yang diperlukan.
MJML menyediakan plugin untuk editor teks populer - Visual Studio Code, Atom, dan Sublime Text. Mereka menambahkan penyorotan sintaksis bahasa, linter dan sebuah tab dengan preview dari typeset langsung di editor itu sendiri.
Jika Anda tidak ingin repot dengan cli atau editor teks, maka ada aplikasi desktop multi-platform resmi yang terpisah, dengan editor kode lengkap yang terintegrasi, penampil template siap pakai untuk surat dan preview langsung surat Anda.
Selain satu set komponen standar (seperti tombol atau korsel), ada komponen khusus yang siap pakai (misalnya, komponen untuk menggambar grafik). Anda dapat menemukan utilitas yang berguna di halaman add-on komunitas , seperti MJML loader untuk WebPack atau alat integrasi untuk aplikasi MJML Laravel. Dan belum lama berselang dalam status beta, menjadi mungkin untuk menggunakan MJML API untuk menghasilkan email secara langsung, misalnya, di dalam aplikasi seluler. Masalahnya cukup spesifik, tetapi pasti akan menemukan penggunanya.
Kerugian utama dari kerangka kerja pada saat yang sama adalah salah satu kelebihannya: "responsif". Kerangka kerja secara otomatis dan tanpa campur tangan pengembang memperhatikan bagaimana templat surat berperilaku pada perangkat dengan lebar ukuran layar kecil. Ini diterjemahkan menjadi kendala empat kolom di grid dan kurangnya kemampuan untuk menyesuaikan perilaku tata letak responsif agar sesuai dengan kebutuhan Anda.
Detail kecil tapi menyenangkan: di situs web di bagian dokumentasi ada bagian dengan deskripsi CanIUse-like tentang dukungan komponen MJML di berbagai klien email. Anda dapat segera memeriksa situs dan tidak heran bagaimana surat itu akan berperilaku, misalnya, di Outlook 2007.
Intinya: MJML adalah alat yang sangat kuat dan mudah dipelajari untuk membuat email responsif. Kesulitan dapat muncul hanya jika Anda membutuhkan kustomisasi templat piksel sempurna yang sangat halus.
Kami menggunakan kerangka kerja email yang sudah jadi. Yayasan untuk email
- Github: zurb / foundation-email
- Pengembang: ZURB
- Tanggal Rilis: 2015
- Lisensi: MIT
- Popularitas: 6885+ bintang
- Templat: Bertinta
Jika Anda bukan tahun pertama di dunia front-end, maka Anda mungkin mendengar (tapi - saya yakin - Anda hampir tidak menggunakannya;)) tentang Foundation for Sites . Kerangka kerja ini, dibuat oleh pengembang dari perusahaan ZURB, telah lama mengamankan statusnya sebagai yang terpopuler kedua (setelah Bootstrap) di antara kerangka web front-end.
Foundation for Emails dibuat oleh orang yang sama dan pada dasarnya adalah bagian dari Foundation for Sites. Ini memberinya sejumlah keuntungan (perusahaan pengembangan besar, komunitas yang cukup besar, semua yang Anda sukai tentang Foundation for Sites) dan sejumlah batasan (semua yang Anda tidak sukai tentang Foundation for Sites tidak akan disukai di Foundation for Email).
Hal pertama yang harus dilakukan jika Anda memutuskan untuk mencoba kerangka kerja adalah menginstal Foundation CLI:
npm install --global foundation-cliKemudian Anda dapat membuat proyek baru dengan perintah:
foundation new --framework emailsdan mulai mengembangkan surat itu.
Benar, Anda harus menunggu beberapa menit hingga semua modul dan komponen yang diperlukan dimuat. Karena sejumlah besar file diunduh, jangan kaget dengan ukuran folder - proyek kosong akan berbobot 400+ mb. Selain cli, Live Reload tersedia di luar kotak, boilerplate dasar dengan semua peretasan yang diperlukan, templat dan parsial yang siap pakai, serta dukungan SASS.
Yayasan untuk struktur file proyek Email
FfE memiliki mesin template sendiri - Inky. Pada intinya, ia melakukan hal yang sama dengan mesin template MJML - ini menyederhanakan bekerja dengan tabel bersarang kompleks menggunakan tag steno:
<container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>
Ada sekitar sepuluh tag secara total, tiga di antaranya digunakan untuk membuat kisi (lihat contoh di atas), tag kisi-kisi digunakan untuk membuat kisi blok, dua lagi tag adalah menu (menu dan item), dan nama dua lagi berbicara sendiri: tombol dan info.
FfE menggunakan kisi 12 kolom, yang dapat disederhanakan menjadi 2, 3, 4 atau 6 kolom, dan juga memungkinkan Anda untuk mengatur jumlah kolom secara terpisah untuk status seluler dan desktop.
Sistem parsial dan helper diimplementasikan menggunakan kompiler file Panini, yang secara internal menggunakan engine template Handlebars yang sederhana dan nyaman.
Tidak seperti MJML, saat menggunakan FfE, dua versi surat dibuat - satu untuk klien desktop dan satu untuk seluler. Selanjutnya, Anda memutuskan breakpoint mana yang ingin Anda alihkan status desktop / mobile, dan Anda juga dapat mengaktifkan atau menonaktifkan blok apa pun dari tata letak Anda menggunakan kelas khusus: .hide-for-large dan .show-for-large.
Intinya: Foundation for Emails menyediakan kontrol penuh atas tata letak surat untuk desktop dan keadaan mobile-nya. Kesulitan dapat muncul dalam proses pencelupan dalam kerangka kerja dan dalam mencoba menangani seluk-beluknya, karena ia cukup besar dan kompleks. Tetapi jika Anda ingin mengontrol setiap aspek template Anda - pilihan Anda adalah Foundation for Emails.
Alat Uji Nawala
Jadi, buletin kami siap. Ini terlihat bagus di browser. Bagaimana dengan Outlook dan klien email seluler? Saatnya beralih ke layanan khusus untuk menguji buletin: Litmus dan Email on Acid .
Menguji Newsletter Litmus
Litmus menyediakan seperangkat alat lengkap yang mungkin Anda perlukan saat menguji milis. Ini adalah ide web untuk mengedit kode html (Builder), dan sistem analisis surat, dan seperangkat "daftar periksa" - alat pengujian kinerja, memeriksa email untuk spam, dan banyak lagi.
"Daftar periksa" yang paling penting - Pratinjau Email - memungkinkan untuk memeriksa email di 90+ klien email desktop / mobile / web. Ini dilakukan dalam beberapa klik. Anda perlu memasukkan kode huruf dalam Builder, klik tombol tes dan pilih klien email yang diperlukan.
Baru-baru ini, pengembang telah menambahkan fitur keren: inspektur kode html yang diproses oleh klien email (html yang diproses). Ini terlihat seperti inspektur dari dev-tools browser favorit Anda: Anda dapat memilih area tertentu dari pesan dan melihat kodenya. Ini sangat membantu untuk menganalisis masalah khusus klien tanpa menggunakan pengeditan buta dan kemudian melihat hasilnya di Pratinjau Email.
Lihat HTML Diproses dalam Litmus
Saya menemukan dua minus dengan Litmus. Yang pertama adalah UI yang tidak responsif secara keseluruhan dan Pratinjau Email keterlambatan yang terjadi dari waktu ke waktu dan membuat Anda menghabiskan banyak waktu menunggu pratinjau dibuat dan memulai kembali tes.
Kedua minus: harga. Opsi berlangganan minimum akan dikenakan biaya $ 80 / bulan. Selain itu, rencana yang dipilih secara langsung mempengaruhi jumlah preview surat yang akan tersedia. Jadi saya menyarankan Anda untuk berpikir dengan hati-hati apakah Anda benar-benar membutuhkan lakmus atau jika Anda dapat bertahan dengan alternatif yang lebih murah.
Menguji Email Pada Newsletter Asam
Layanan kedua yang ingin saya bicarakan adalah Email On Acid . Ia dapat dengan aman disebut sebagai "adik lelaki" Litmus di hampir semua aspek.
Nilai sendiri: ada ide web untuk mengedit buletin, ada alat untuk menganalisis surat itu, ada pengujian untuk spam, dan, tentu saja, ada juga Pengujian Email di 70+ aplikasi.
Pratinjau huruf dibuat hampir sama dengan di Litmus. Perbedaannya terutama dalam penampilan, opsi / pengaturan sedikit lebih kecil, tidak ada inspektur dari kode surat yang diproses dan beberapa alat lain yang kurang berguna. Tapi UI EoA lebih nyaman dan lebih mudah daripada Litmus dan bekerja dengan hampir tanpa lag. Pengujian email berlangsung sekitar satu setengah kali lebih cepat.
Faktor penting terakhir: harga. Email pada Asam adalah setengah harga dari lakmus dengan fungsi yang sangat mirip. Dan tidak ada batasan jumlah pratinjau surat Anda. Ini adalah anggur EoA yang tidak diragukan lagi.
Apa yang harus dipilih?
Alat yang dijelaskan di atas menghabiskan banyak uang. Menurut pendapat saya, masuk akal untuk menggunakannya secara berkelanjutan hanya jika Anda secara konsisten, setidaknya beberapa kali dalam sebulan, membuat email yang cukup kompleks dan jika Anda memiliki persyaratan ketat untuk dukungan mereka di berbagai klien email, terutama yang mobile.
Jika Anda sesekali mengirim surat, maka ada dua opsi alternatif:
- gunakan uji coba Litmus / Email pada Asam selama 7/14 hari (tergantung pada layanan) - uang untuk bulan pertama akan dikembalikan ke kartu Anda;
- menggunakan kombinasi layanan yang kurang populer yang memiliki paket gratis, dan menguji klien email secara manual.
Berikut adalah beberapa layanan yang dapat digunakan secara gratis, meskipun dalam batas terbatas:
- PreviewMyEmail (Gmail untuk Chrome / FF / IE, Thunderbird, Apple Mail untuk iOS7);
- InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
- DirectMail (Outlook 2003, Gmail di IE);
- Putsmail + PilotMailer (layanan online untuk mengirim kode surat ke alamat apa pun, nyaman digunakan untuk pengujian manual buletin);
Apa pun yang Anda pilih dalam jangka panjang, hal utama adalah alat tersebut memenuhi kebutuhan Anda.
Kesimpulan
Lingkup alat untuk penyetel daftar milis telah mencapai tingkat pengembangan ketika kita tidak hanya dapat menggunakan kerangka kerja yang mudah untuk mengembangkan surat dan aplikasi untuk mengujinya, tetapi juga memilih yang sesuai untuk tugas dan kemampuan kita.
Jika Anda mengetik huruf jarang dan umumnya sederhana - jangan ragu untuk mengambil pelat dasar, susunan huruf dan uji "secara manual". Atau, gunakan layanan gratis untuk pengujian.
Jika Anda harus berurusan dengan huruf huruf secara teratur, dan tata letak tampil kompleks dan adaptif, maka MJML dan Foundation for Email akan menangani beberapa masalah. Dan Limus dan Email on Acid akan menghemat banyak waktu dan sel saraf dalam upaya untuk mengalahkan Outlook atau Gmail yang menjengkelkan di Android.
Dan jalan mana yang Anda pilih? Bagikan komentar Anda.