Pengantar Membangun Dan Mengirim Email HTML Untuk Pengembang Web

Saya telah menghabiskan beberapa tahun terakhir membangun alat pengembangan — dua tahun sebagai pemimpin desain produk di Mailgun, layanan email untuk pengembang, tempat saya belajar banyak tentang cara kerja email dan masalah yang dihadapi pengembang saat membuat email HTML. Dalam posting ini, saya akan membagikan beberapa pengetahuan saya tentang topik tersebut.

Email HTML: Dua kata yang, jika digabungkan, membuat para pengembang meneteskan air mata. Jika Anda seorang pengembang web, tidak dapat dihindari bahwa pengkodean email akan menjadi tugas yang akan dijatuhkan di pangkuan Anda pada suatu saat dalam karier Anda, suka atau tidak suka. Pengkodean email HTML adalah sekolah tua. Pikirkan kembali tahun 1999, ketika kami menyebut diri kami "webmaster" dan menggunakan Frontpage, editor dan tabel WYSIWYG untuk menandai situs web kami.

Tidak banyak yang berubah dalam desain email. Nyatanya, kondisinya semakin parah. Dengan diperkenalkannya perangkat seluler dan semakin banyak klien email, kami memiliki lebih banyak peringatan untuk ditangani saat membuat email HTML.

Saya telah menghabiskan beberapa tahun terakhir membangun alat pengembangan — dua tahun sebagai pemimpin desain produk di Mailgun, layanan email untuk pengembang, tempat saya belajar banyak tentang cara kerja email dan masalah yang dihadapi pengembang saat membuat email HTML. Dalam posting ini, saya akan membagikan beberapa pengetahuan saya tentang topik tersebut.

Bacaan Lebih Lanjut tentang SmashingMag:

• Rancang Dan Bangun Buletin Email Tanpa Kehilangan Pikiran Anda
• 18 Template Email Untuk Desainer Dan Pengembang Web
• Membuat Pengkodean Email HTML Responsif Mudah Dengan MJML
• Cara Meningkatkan Alur Kerja Email Anda Dengan Desain Modular
  

Pengantar Mengirim Email

Sebagai pengembang yang bertanggung jawab atas kampanye email atau semua email yang dikirim oleh perusahaan Anda, Anda perlu mengetahui cara kerja email, persyaratan hukum, dan cara agar email benar-benar terkirim. Perusahaan mengirim beberapa jenis email yang berbeda. Mari lihat.

Email Pemasaran

Banyak penyedia layanan email (ESP) berspesialisasi dalam email pemasaran dan promosi: Email SendPulse, Monitor Kampanye, MailChimp, Emma, ​​Kontak Konstan, dan lain-lain. Mereka memberikan solusi lengkap untuk mengelola pelanggan, bekerja dengan template email, menjalankan kampanye dan pelaporan email massal.

Email Transaksional

Email transaksional mencakup tanda terima, peringatan, email selamat datang, pengaturan ulang kata sandi, dan sebagainya, dan biasanya diimplementasikan dengan alat pengembangan dan API seperti Transaksional SendPulse, Mailgun, SendGrid, dan Cap Pos. Alat-alat ini lebih berfokus pada API, lebih sedikit berbasis CMS dan WYSIWYG; namun, dikombinasikan dengan layanan seperti Sendwithus, mereka dapat dibuat lebih kuat lagi.

Alternatif untuk menggunakan layanan adalah menggulung server email Anda sendiri dengan sesuatu seperti Postfix. Kelemahan dari ini adalah terserah Anda untuk mengatur dan mengonfigurasinya dan untuk memahami detail teknis pengiriman email, menerapkan pelacakan dan berhenti berlangganan, dan mengirim email ke kotak masuk.

Email Siklus Hidup

Layanan email berbasis siklus hidup dan perilaku membantu orientasi, keterlibatan, dan lainnya. Banyak ESP yang berfokus pada pemasaran juga menawarkan layanan ini, tetapi saya cenderung mengelompokkan layanan seperti SendPulse Automation, Intercom, Customer.io, Drip, Vero, dan ConvertKit ke dalam kategori ini.

Praktik Terbaik Daftar Email

Jangan membeli daftar email. Mungkin ada beberapa layanan yang sah di luar sana, tetapi sebaiknya Anda menghindari daftar pembelian sama sekali.

Pengalaman saya adalah bahwa siapa pun yang membeli daftar email akan mengalami banyak bouncing, memberikan alamat Protokol Internet (IP) mereka reputasi buruk, dan email mereka diblokir oleh penyedia layanan Internet (ISP) atau dikirim ke spam. 85% email dunia dianggap spam, menurut SenderBase; jangan jatuh ke dalam ember ini.

Keikutsertaan Ganda

Pelanggan yang harus memverifikasi alamat email mereka menambahkan langkah ekstra untuk prosesnya, tetapi masuk akal dan menghentikan orang lain menyalahgunakan alamat email mereka dengan mendaftarkan mereka ke daftar tanpa izin mereka. Ini juga membantu menjaga daftar langganan Anda tetap bersih dan merupakan "cara yang benar 100% untuk memvalidasi alamat email".

BISA SPAM

Ini adalah persyaratan hukum Anda untuk mengirim email, yang diberlakukan oleh CAN-SPAM Act of 2003:

• Jangan gunakan informasi header yang salah atau menyesatkan.
• Jangan gunakan baris subjek yang menipu.
• Identifikasi pesan sebagai iklan.
• Beri tahu penerima di mana Anda berada.
• Beri tahu penerima cara menyisih dari email Anda di masa mendatang.
• Hormati permintaan opt-out segera.
• Pantau apa yang dilakukan orang lain atas nama Anda.

MailChimp memiliki daftar persyaratan hukum email yang bagus menurut negara.

Analisis Dan Pengukuran Kinerja

Ukur semuanya. Anda perlu mengukur untuk mengetahui apakah email Anda membaik. Jumlahnya akan sangat berbeda tergantung pada apa yang Anda lakukan, industri Anda, jenis email yang Anda kirim dan konteksnya. Namun, secara umum:

• 20% adalah tingkat terbuka yang baik,
• 3 hingga 7% adalah rasio klik-tayang yang baik,
• 5% adalah rasio pentalan yang buruk,
• 0,01% adalah tingkat spam yang buruk,
• 1% adalah tingkat berhenti berlangganan yang buruk.

Juga, ingat bahwa rasio terbuka dan rasio klik-tayang dapat menjadi metrik kesombongan (baca "tidak terlalu penting"). Pada akhirnya, yang benar-benar ingin Anda lacak adalah tujuan akhir atau konversi itu. Di Airbnb, mereka melacak skor kualitas email, yang merupakan indikator bagus untuk kualitas interaksi.

Pembuat URL Google dapat membantu pelacakan jika Anda menggunakan Google Analytics.

Mengirim Skor Dan Reputasi

Email Anda memiliki reputasi dan skor yang terkait dengannya . Ini memengaruhi cara ISP dan penyedia kotak surat menangani email Anda, apakah mereka menerima atau menolaknya dan apakah mereka mengirimnya ke kotak masuk penerima atau langsung ke spam.

Beberapa faktor yang berkontribusi adalah:

• reputasi IP Anda (periksa milik Anda dengan SenderScore),
• tanda tangan nama domain Anda (lihat DKIM dan SPF),
• tingkat bouncing dan tingkat keluhan.

Mengirim Email Massal

Ketika Anda mengirim banyak email (bayangkan kampanye dengan jutaan email), tidak semuanya dikirim secara instan. Mereka hanya dapat dikirim secepat server dan alamat IP dapat menanganinya. Ingatlah bahwa penerima Anda mungkin tidak menerima email pada waktu yang sama .

Jadi, jika Anda mengirim jutaan email sekaligus, Anda mungkin membutuhkan beberapa IP untuk menangani beban tersebut.

Klien Email

Litmus melacak pangsa pasar klien email, berdasarkan statistik internalnya sendiri. Ingatlah bahwa ini mungkin tidak sama untuk basis pelanggan Anda, tetapi ini adalah indikator yang baik untuk dilalui.

Berikut statistik per Desember 2016:

• iPhone: 33%
• Gmail: 19%
• iPad: 12%
• Android: 8%
• Apple Mail: 7%

Ingatlah bahwa tidak semua email dapat dilacak . Pelacakan email dilakukan melalui pelacakan piksel, jadi hanya klien dengan gambar yang diaktifkan yang akan melaporkan kembali.

Template HTML

Membangun template email HTML bisa menjadi pekerjaan berat. Akibatnya, banyak email yang dirancang dengan buruk di luar sana — kikuk, bertema, bertele-tele, tidak berguna, mengganggu. Jika Anda menyukai tantangan atau menginginkan tampilan dan nuansa yang unik, maka membangun sendiri sebenarnya bisa menyenangkan dan bermanfaat. Atau, beberapa template email yang bagus tersedia:

• Template Lakmus
• Template Email HTML Responsif yang Sangat Sederhana
• Template Email HTML
• Dasar untuk Email 2

Membangun Template Email HTML

Sekarang Anda tahu cara mengatur dan mengirim email dengan benar. Keputusan berikutnya yang akan Anda buat adalah apakah akan membuat kode template HTML Anda sendiri. Ini sedikit lebih kompleks daripada pengkodean halaman web rata-rata. Mari selami.

Mesin Rendering Klien

Desain email masih dalam zaman kegelapan. Karena banyaknya klien dan perangkat email, email Anda akan diberikan kepada pengguna dalam berbagai cara.

Klien email menggunakan mesin yang berbeda untuk membuat email HTML:

• Apple Mail, Outlook untuk Mac, Android Mail, dan iOS Mail menggunakan WebKit .
• Outlook 2000, 2002 dan 2003 menggunakan Internet Explorer .
• Outlook 2007, 2010 dan 2013 menggunakan Microsoft Word (ya, Word!).
• Klien web menggunakan mesin browser mereka masing-masing (misalnya, Safari menggunakan WebKit dan Chrome menggunakan Blink).

Klien juga akan menambahkan cita rasa gaya mereka sendiri di atas gaya Anda. Misalnya, Gmail menyetel semua font <td> ke font-family: Arial,sans-serif; .

Lihat statistik Anda sendiri sehingga Anda tahu untuk apa mendesain.

Dukungan Gmail untuk CSS Inline dan Kueri Media

Baru-baru ini Google mengumumkan dukungan untuk CSS tersemat dan kueri media di Gmail. Ini sangat besar untuk industri pengembangan email.

Sekarang, mulai September 2016, Gmail akan mendukung banyak properti CSS, yang membuat pengembangan template untuk Gmail jauh lebih mudah.

Menggunakan Tabel HTML Untuk Tata Letak

Div memiliki masalah pemosisian dan model kotak di klien yang berbeda — khususnya, yang menggunakan Microsoft Word untuk merender (yaitu Outlook). Anda dapat menggunakan divs jika Anda mau, tetapi lebih aman untuk membuat kode seperti tahun 1999 dan tetap menggunakan tables . Ini berarti:

• <table> bukannya <div> ,
• #FFFFFF bukannya #FFF ,
• padding bukan margin ,
• CSS2 bukannya CSS3,
• HTML4 bukannya HTML5,
• background-color bukan background ,
• Atribut HTML, bukan CSS,
• CSS sebaris alih-alih lembar gaya atau blok <style> .

Ini adalah praktik terbaik. Anda tentu saja dapat mengabaikan rute aman dan melampaui dan melampauinya.

Saat menggunakan tabel, jangan lupa border="0" cellpadding="0" cellspacing="0" . Jika Anda menggunakan Premailer, ia memiliki deklarasi CSS khusus untuk menerapkan atribut HTML ini.

CSS sebaris

Beberapa klien (terutama Gmail hingga saat ini) akan menghapus CSS apa pun yang tidak sebaris . Anda memiliki beberapa opsi di sini:

• tulis CSS sebaris saat Anda melakukannya,
• gunakan inliner CSS berbasis web,
• gunakan inliner CSS terprogram,
• biarkan ESP Anda menangani inlining untuk Anda (jika mendukungnya).

Menulis sebaris saat Anda pergi bukanlah solusi yang dapat diskalakan atau dapat dipelihara, jadi saya cenderung tidak merekomendasikan ini, tetapi saya tahu bahwa banyak pengembang email lebih memilih ini untuk mempertahankan kontrol 100%. Jika Anda menulis CSS sebaris secara manual, maka saya sarankan untuk menggunakan cuplikan dan/atau bahasa templating dengan sebagian dan pembantu. Ini akan menyelamatkan Anda dari keharusan mengulangi diri sendiri.

Inliners berbasis web termasuk HTML Email Responsive CSS Inliner dan Foundation for Email Responsive Email Inliner.

Untuk inliner terprogram, saya merekomendasikan modul Node.js Juice. Permata Premailer dan Roadie adalah alternatif Ruby yang bagus.

tombol

Mencoba mencapai tombol lintas-klien yang sempurna itu menyakitkan. Seperti yang disebutkan, Anda harus menggunakan tabel dan sel tabel untuk hampir semua hal, termasuk tombol.

Preferensi saya adalah menggunakan solusi berikut. Inilah cara Anda biasanya menata tombol untuk web:

 <a href="#" class="btn btn-primary">Click Here</a>

Sebaliknya, tulis seperti ini:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Kemudian, setelah CSS Anda disejajarkan, itu akan terlihat seperti ini:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

Apa yang terjadi di sini? <td> pertama adalah pembungkus untuk membantu kami memusatkan tombol. <td> kedua adalah ukuran tombol. Beberapa klien (seperti Outlook) tidak mengenali padding pada tag <a> , jadi kami mengisi warna latar belakang sel tabel. Tag <a> kemudian mengambil ruang yang tersedia di <td> kedua, dan seluruh area menjadi dapat diklik. Lihat kode dan tes klien di Litmus.

Ini hanyalah salah satu cara untuk menerapkan tombol di email. Memang, tidak selalu terlihat identik di setiap klien, tetapi web juga tidak selalu sempurna. Saya lebih suka ini karena lebih sederhana dan tidak melibatkan penggunaan aset gambar atau VML.

Apa itu VML? Jika Anda telah menghabiskan waktu untuk mengembangkan email, Anda mungkin menemukan beberapa referensi untuk itu. Vector Markup Language (VML) didukung oleh Outlook versi lama . Menurut Microsoft, pada Internet Explorer (IE) 10, VML sudah usang, yang berarti tidak lagi didukung di versi baru IE. Namun, selama Outlook 2007, 2010 dan 2013, Anda akan melihatnya digunakan, biasanya untuk gambar latar .

Tipografi

Secara umum, paling mudah menggunakan font sistem standar. Ini termasuk Helvetica, Arial dan sebagainya. Namun, kita dapat menggunakan font web , seperti Google Font. Letakkan di belakang kueri media bersyarat WebKit , sehingga Outlook tidak mengacaukannya:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Ingatlah untuk menyertakan keluarga font, ukuran font, dan warna untuk setiap <td> , atau Anda berisiko klien menimpa gaya jenis yang Anda pilih dengan cermat.

bersyarat

Kami dapat menerapkan gaya CSS tertentu dan menampilkan atau menyembunyikan elemen dan konten untuk versi Outlook yang berbeda.

Berikut ini menargetkan semua versi Outlook berbasis Microsoft Word:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

Cuplikan berikut ini menargetkan semua versi Outlook berbasis IE:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

Kami juga dapat menargetkan nomor versi Outlook tertentu:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Kami dapat menargetkan klien berbasis WebKit dengan kueri media:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Gambar Dan Media

Gambar di Email

Beberapa klien akan menampilkan gambar secara default. Beberapa tidak. Ingatlah hal ini saat menyertakan gambar dalam konten email Anda. Ini juga memengaruhi metrik pelacakan, karena gambar biasanya akan digunakan untuk melacak pembukaan.

• Outlook memblokir rendering gambar secara default.
• Apple Mail tidak.
• Gmail tidak (lagi).

Ingatlah untuk menyertakan teks alt yang bagus untuk semua gambar Anda. Teks dapat memberi tahu pengguna apa yang dikatakan gambar atau hanya menjelaskan apa itu (misalnya, "logo perusahaan"). Anda bisa alt dengan teks alternatif untuk klien yang mematikan gambar, seperti yang dilakukan oleh Email Monks:

Ingatlah untuk menyertakan pengaturan ulang dasar untuk semua gambar:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

GIF animasi didukung di sebagian besar klien. Versi Outlook 2007 hingga 2013 tidak mendukung GIF animasi, melainkan kembali ke bingkai pertama.

Ingatlah untuk mengompresi aset media Anda dan mengunggahnya ke jaringan pengiriman konten (CDN), seperti Amazon Web Services, Cloudinary, atau imgix. Sebagian besar ESP pemasaran akan menangani ini untuk Anda.

Grafik vektor yang dapat diskalakan (SVG) memiliki banyak keunggulan di web. Seperti yang Anda harapkan, dukungan email bervariasi, dan SVG memerlukan beberapa peretasan atau persyaratan mundur. Saya biasanya merekomendasikan untuk menjauh dari SVG di email, tetapi jika Anda ingin serius, maka CSS-Tricks memiliki panduan tentang dukungan SVG di email.

Untuk gambar siap Retina, berikan gambar yang lebih besar (1,5× hingga 3×) dan ubah ukurannya. Saya biasanya akan menyimpan gambar berkualitas rendah yang memiliki dimensi 2×, yang berfungsi dengan baik. (Saya telah menulis lebih banyak tentang teknik ini.)

Ingatlah bahwa, untuk Outlook, Anda perlu mendeklarasikan lebar gambar dengan atribut width . Jika tidak, Outlook mungkin merender lebar gambar yang sebenarnya dan merusak email Anda.

Video di Email

Video didukung di iOS, Apple Mail, dan Outlook.com. Anda dapat menggunakan kueri media untuk menampilkan atau menyembunyikan video berdasarkan klien. Email di Acid memiliki lebih banyak dukungan video email.

Untuk inspirasi, lihat tutorial Kevin Mandeville tentang pengkodean video HTML5 sebagai latar belakang dalam email — hal-hal yang mengesankan dan layak untuk dilihat.

Formulir Di Email

Dukungan untuk elemen bentuk bervariasi. Cobalah untuk menghindari, dan tautkan ke formulir eksternal jika Anda membutuhkannya. Monitor Kampanye menawarkan beberapa saran tentang formulir.

Jelas, itu tergantung pada tujuan Anda. Menjauh dari formulir lebih aman, tetapi Rebelmail dan Mixmax telah melakukan hal-hal menarik dengan formulir untuk survei dan e-niaga, dengan dukungan penggantian yang baik.

Tindakan Gmail

Google menyediakan tindakan praktis untuk Gmail. Anda mungkin pernah melihatnya di GitHub untuk masalah atau di Amazon untuk pesanan.

Menambahkan kode sangat mudah. Anda memiliki dua opsi:

• JSON-LD
• mikrodata

Mendapatkan daftar putih melibatkan beberapa langkah lagi. Anda dapat menguji tindakan Gmail dengan alamat @gmail.com .

Teks Preheader

Sesuatu yang penting tapi sering dilupakan adalah teks preheader. Beberapa klien menampilkan teks pratinjau di sebelah atau di bawah baris subjek . Klien ini termasuk iOS, Apple Mail, Outlook 2013, Gmail, dan AOL.

Klien akan mengambil teks pertama yang mereka temukan di badan email Anda dan menampilkannya di sini. Manfaatkan ini sebaik-baiknya dan tambahkan elemen tersembunyi ke konten tubuh Anda yang muncul lebih dulu. Teks ini harus memberikan insentif ekstra bagi pengguna untuk membuka email Anda. Sembunyikan teks seperti ini:

 <span>Preheader text goes here</span>

Gunakan alat subjek dan judul awal Austin Woodall untuk melihat pratinjau subjek email dan judul awal Anda.

Menguji Email

Saya tidak berpikir saya pernah berhasil mengirim email pertama kali. Selalu ada sesuatu yang harus diperbaiki, selalu salah ketik, selalu ada masalah rendering di Outlook, selalu ada sesuatu yang saya lupa tambahkan.

Anda dapat menguji email Anda dengan beberapa cara:

• Kirim email ke diri Anda sendiri dan periksa di klien desktop (Outlook), klien web (Gmail), dan klien seluler (iOS Mail).
• Mengotomatiskan tes menggunakan Lakmus atau Email pada Asam.
• Koreksi konten, dan periksa render tata letak.
• Uji A/B berbagai jenis konten, panjang konten, dan baris subjek.

Bagaimana Anda mengirim email HTML ke diri Anda sendiri? Pertanyaan bagus. Ini lebih sulit dari yang Anda pikirkan. PutsMail memungkinkan Anda melakukan ini dengan cukup mudah, dan Thunderbird memungkinkan Anda menulis dengan editor HTML-nya.

Multi-Bagian MIME

Email teks biasa hanya itu, teks biasa. Email HTML hanyalah HTML. Sebagian besar email yang Anda kirim atau terima adalah email multi-bagian MIME (Multipurpose Internet Mail Extensions) (jangan dikelirukan dengan jenis MIME). Standar ini menggabungkan teks biasa dan HTML, menyerahkannya kepada penerima untuk memutuskan mana yang akan dirender.

Saat Anda mengirim email, baik transaksional atau massal, sertakan versi HTML dan teks biasa . Bahkan jika, dalam pikiran Anda, setiap orang menggunakan klien yang membuat HTML, masih mengirim teks biasa.

Juga, perhatikan bahwa beberapa klien membuat email teks biasa sebagai HTML; misalnya, Gmail akan menambahkan beberapa gaya default dan mengubah URL menjadi tautan. Sebagian besar ESP akan membuat MIME untuk Anda, jadi Anda tidak perlu mengkhawatirkannya. Beberapa juga akan membuat versi teks biasa, berdasarkan HTML Anda.

Kiat pro: Di Gmail, pilih "Tampilkan yang asli" dari menu tarik-turun untuk melihat MIME lengkap.

Bagian MIME baru telah muncul: text/watch-html . Konten ini hanya akan ditampilkan di Apple Watch (dan klien lain yang mendukung jenis MIME ini ke depannya).

Aksesibilitas

Di web, jika Anda mengikuti standar dan praktik terbaik serta menggunakan markup semantik dan sintaks HTML yang valid , Anda cenderung mendapatkan aksesibilitas dasar di luar kotak. Sayangnya, dengan email, karena peretasan kami yang berlebihan dan dukungan yang buruk untuk HTML, aksesibilitas sering diabaikan.

Saya telah melihat sedikit diskusi tentang aksesibilitas email, tetapi yang menonjol adalah posting Mark Robbins tentang aksesibilitas. Dia merekomendasikan hal berikut:

• Tambahkan role="presentation" ke setiap tabel sehingga jelas tabel tersebut digunakan untuk tata letak.
• Berikan teks alt dengan deskripsi yang bermakna.
• Jika Anda tidak membutuhkan atau menginginkan teks alternatif, gunakan alt alt="" agar pembaca layar tahu bahwa teks tersebut seharusnya kosong.
• Gunakan tag HTML semantik, seperti <p> ​​dan <h1> , jika berlaku.
• Gunakan atribut role untuk elemen seperti header dan footer (misalnya, role="header" ).

Desain Email Responsif

• Pembukaan email di ponsel mencapai 50% dan terus meningkat. Metrik yang tepat bergantung pada laporan mana yang Anda periksa dan audiens mana yang Anda tuju, tetapi saya pikir kita semua dapat sepakat bahwa ini penting.
• Pangsa Pasar Klien Email, per Agustus 2016, menempatkan iPhone pada 33%, iPad pada 11% dan Android pada 10% (itu lebih dari 50%!).
• MailChimp menemukan bahwa klik unik di antara pengguna seluler untuk kampanye responsif meningkat dari 2,7 menjadi 3,1% — peningkatan hampir 15%.

“Desain web responsif” adalah frasa yang diciptakan oleh Ethan Marcotte pada tahun 2010:

Dengan menggabungkan tata letak berbasis grid yang lancar dan kueri media CSS3, kita dapat membuat satu desain, yang merespons bentuk tampilan yang merendernya.

Di dunia email, kita masih dapat menggunakan desain yang lancar, tata letak berbasis kisi, dan kueri media . Masalahnya adalah tidak semua klien mendukung ini. Oleh karena itu, kami membutuhkan beberapa peretasan di sepanjang jalan.

Sampai saat ini, Gmail tidak mendukung kueri media. Untungnya, pada September 2016, sebagian besar kliennya melakukannya. Namun, beberapa klien seluler masih belum, termasuk Yahoo, Windows Phone 8 dan Gmail untuk Android.

Beberapa teknik digunakan di dunia email untuk mengatasi kurangnya dukungan untuk kueri media. Beberapa istilah yang akan Anda dengar adalah "cair", "adaptif", "responsif", "hibrida", dan "spons".

Cairan

Solusi termudah adalah tetap berpegang pada satu kolom dan membuat email Anda lancar. Ini berarti bahwa saat viewport menyusut, area konten Anda menyusut.

 .container { max-width: 600px; width: 100%; }

Responsif dan Adaptif

Dengan menggunakan kueri media dan titik henti sementara, kami dapat menyediakan gaya alternatif untuk area pandang dengan ukuran berbeda. Kami juga dapat menyembunyikan atau menampilkan elemen.

Ini mulai menjadi rumit setelah Anda memperkenalkan kisi dan kolom. Anda bisa memiliki tata letak dua kolom dan kemudian beralih ke tata letak satu kolom bertumpuk di bawah lebar viewport tertentu.

Namun , seperti yang telah kita lihat, kueri media tidak didukung di semua tempat, jadi ini tidak selalu dapat diandalkan.

Hibrida dan Spons

Teknik ini menggunakan sedikit cairan, sedikit responsif, dan beberapa peretasan untuk dukungan Outlook. Kami juga dapat memastikan bahwa kolom ditumpuk tanpa kueri media.

Teknik ini diuraikan oleh ActionRocket, dan Nicole Merlin telah menulis tutorial langkah demi langkah yang bagus tentangnya.

Berikut adalah cuplikan kode yang saya gunakan untuk membuat sebagian besar email saya.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Lihatlah repositori sumber terbuka Fabio Carneiro di GitHub dan baca pendapat Stig tentang pengkodean email yang mengutamakan seluler. Remi Parmentier juga memiliki teknik responsif lain yang tidak memerlukan kueri media dan menggunakan fungsi calc() .

Gambar Responsif

Seperti disebutkan, gunakan gambar Retina pada 1,5× hingga 3×, dan atur dimensi gambar sejajar.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

Kami tidak dapat mengandalkan max-width: 100%; karena beberapa klien mengabaikannya. Anda juga ingin menyematkan CSS berikut:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

Mengotomatiskan Alur Kerja Anda

Proses menyusun email antipeluru itu rumit. Ada banyak langkah, dan ada ruang untuk banyak hal yang salah.

Seperti tugas monoton dengan langkah-langkah, saya sarankan untuk mengotomatisasi apa yang Anda bisa, sehingga Anda membangun sistem sekali dan mempermudah pekerjaan di masa depan.

Brian Graves memiliki posting bagus tentang membuat email Anda modular. Sama seperti Anda memiliki sistem desain dan pustaka pola untuk situs web atau aplikasi, Anda harus melakukannya untuk email, membuat komponen dapat digunakan kembali dan email konsisten di seluruh produk dan perusahaan Anda.

Kevin Mandeville merekomendasikan penggunaan potongan kode yang dapat digunakan kembali untuk mengoptimalkan alur kerja Anda, sehingga Anda tidak terus-menerus menulis ulang kode . Dalam postingannya, dia menjelaskan cara menggunakan snippet di editor modern (seperti Atom dan Sublime), dan dia menunjuk ke perpustakaan snippet kontribusi komunitas yang dihosting oleh Litmus.

Untuk bagian saya sendiri, saya telah mengumpulkan dan membuka sumber alur kerja Grunt untuk mengotomatisasi pembuatan email. Ini menjalankan berbagai tugas, seperti menyisipkan CSS , mengompresi gambar, mengunggah gambar ke CDN, mengirim pratinjau, dan menguji dengan Litmus, semuanya dengan satu perintah. Jika Anda baru mengenal Grunt, saya telah menulis tutorial terperinci tentang cara kerjanya. Foundation for Email juga memiliki beberapa alat otomatisasi yang hebat untuk pengembang, seperti halnya Mailjet dengan kerangka kerja email responsif MJML.

Menatap Masa Depan

Google baru-baru ini meluncurkan dukungan untuk kueri media; Microsoft baru saja bermitra dengan Litmus untuk “membuat email lebih baik”; dan Alto AOL sekarang mendukung email responsif. Jadi, masa depan terlihat jauh lebih cerah.

Semakin banyak perusahaan dan pengembang bereksperimen dengan apa yang mungkin dilakukan dengan teknologi email: animasi CSS, audio, keranjang belanja di email. Harapkan lebih banyak contoh email interaktif dan kinetik muncul di tahun 2017.

Kesimpulan

Desain dan pengembangan email adalah binatang buas. Ini sangat mirip dengan membangun halaman web… 10 tahun yang lalu . Vendor klien email belum seprogresif vendor browser web dalam mengadopsi standar baru, dan kami pengguna dan perusahaan tidak mengadopsi klien email baru seperti yang kami lakukan dengan browser web. Selain itu, kebangkitan seluler, dan kami dibiarkan dalam keadaan harus mendukung campuran klien dan versi yang berbelit -belit.

Pengantar saya di sini adalah gambaran umum tingkat tinggi; Anda bisa menyelam jauh ke dalam setiap salah satu poin ini. Mudah-mudahan, ini memberi Anda wawasan yang baik tentang dunia membangun dan mengirim email, dan cuplikan kode dan sumber daya telah menambahkan beberapa jam kembali ke kehidupan Anda.

Sumber Daya yang Direkomendasikan

• Template Email HTML Responsif yang Sangat Sederhana, Lee Munroe (template email open-source gratis saya)
• Desain Email Profesional , Jason Rodriguez
• “Membongkar Email HTML” (kursus), Dan Denney, Code School
• “Desain Email Terbaik di Alam Semesta (Yang Datang Ke Kotak Masuk Saya),” Email Sangat Bagus
• “Contoh dan Teknik Email Dinamis dan Interaktif (Kinetic),” Justin Khoo

Blog untuk Diikuti

• Pemantau Kampanye
• Simpanse Surat
• Lakmus
• Email di Asam