Panduan Utama untuk Menggunakan Cuplikan dalam Desain Email

Diterbitkan: 2015-11-20

Di antara lusinan klien email, kebiasaan rendering yang tampaknya tak terhitung jumlahnya, dan perubahan dukungan untuk HTML dan CSS, pengkodean kampanye email itu rumit. Sayangnya untuk desainer email, kerumitan itu berarti desain email menjadi lebih memakan waktu, jadi kami membuat panduan utama untuk menggunakan cuplikan dalam desain email.

Pada Konferensi Desain Email, Dan Denney dari Code School membingkai masalahnya dengan sempurna:

Tantangan terbesar dalam membuat email bukanlah Gmail…saatnya.

Ketika datang ke desain email, waktu adalah yang terpenting dan menempatkan alur kerja pengembangan sangat penting. Untuk mengikuti tuntutan desain email yang berubah dengan cepat, semakin penting untuk membuat alur kerja Anda seefisien mungkin.

Jadi, apa yang dapat Anda lakukan untuk mengoptimalkan alur kerja Anda? Satu kata: Cuplikan .

Dengan bantuan snippet, Anda dapat membuat email dengan lebih mudah—dan lebih cepat—daripada sebelumnya. Habiskan lebih sedikit waktu untuk membuat dan memecahkan masalah email, dan lebih banyak waktu untuk menciptakan pengalaman email yang lebih baik bagi pelanggan Anda.

Apa itu cuplikan?

Cuplikan adalah modul email dari kode yang dapat digunakan kembali yang dapat Anda gunakan dalam template email atau sistem desain email yang lebih luas. Mereka ideal untuk elemen yang umum digunakan di seluruh desain email, seperti doctype, tombol antipeluru, dan tautan. Daripada harus menulis ulang kode setiap kali salah satu elemen ini digunakan, Anda dapat menggunakan cuplikan. Menggunakan cuplikan mengotomatiskan pengkodean Anda dan secara drastis mempercepat waktu pengembangan.

Cara menggunakan cuplikan

Terlepas dari editor email mana yang Anda gunakan untuk membuat email, Anda dapat menggunakan cuplikan untuk mengoptimalkan alur kerja Anda. Berikut ini cara menggunakannya di editor paling umum.

Dreamweaver

Di Dreamweaver, Anda dapat menambahkan atau mengedit snippet dengan mengunjungi: Windows → Snippets → New/Edit. Anda bahkan dapat menyimpan cuplikan Anda dalam grup (yaitu, cuplikan terkait tabel, cuplikan terkait gambar, dll.) untuk memudahkan pencarian.

Saat mengkodekan email Anda, gunakan cuplikan dengan mengklik dua kali pada judul cuplikan, mengklik sisipkan, atau menggunakan pintasan keyboard.

Pembuat Lakmus

Dalam proyek Builder, klik ikon Cuplikan di kanan atas editor.

Anda dapat membuat dan mengedit cuplikan baru dalam antarmuka itu, dan memicu cuplikan dalam kode Anda melalui pintasan keyboard. Anda juga dapat menambahkan titik edit di dalam cuplikan menggunakan {braces} . Setelah Anda memicu cuplikan, Anda dapat secara otomatis melompat ke titik edit yang telah ditentukan sebelumnya dalam cuplikan untuk penyesuaian yang cepat dan mudah.

Teks Sublim

Untuk melihat cuplikan yang ada atau menambahkan yang baru di Sublime Text, kunjungi: Alat → Cuplikan/Snippet Baru. Setiap cuplikan disimpan dalam file .sublime-snippet sendiri.

Tambahkan cuplikan ke kode Anda melalui pemicu pintasan keyboard. Misalnya, dalam kode di bawah ini, cuplikan dipicu saat "halo" diketik di dalam kode. Anda juga dapat menambahkan titik edit di dalam cuplikan menggunakan tanda dolar secara berurutan ( $1 , $2 , dll.).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>

Atom

Lihat, edit, atau tambahkan cuplikan di Atom dengan mengunjungi: Atom → Buka Cuplikan Anda. Setiap snippet disimpan sebagai file snippets.cson-nya sendiri.

Mirip dengan Sublime Text, snippet di Atom bekerja melalui pemicu pintasan keyboard. Anda juga dapat menambahkan titik edit di dalam cuplikan menggunakan tanda dolar secara berurutan ( $1 , $2 , dll.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """

Coda

Cuplikan dalam Coda disebut sebagai "Klip." Untuk menambah atau mengedit klip, kunjungi: Sidebar → Clips. Klip dapat disimpan dalam grup, dan berfungsi pada pemicu pintasan keyboard. Anda juga dapat menambahkan titik edit di dalam cuplikan dengan menentukan titik placeholder khusus di UI.

Pustaka cuplikan

Di dalam setiap editor, Anda dapat membuat pustaka cuplikan Anda. Segala sesuatu di dalam perpustakaan harus mutakhir dan telah diuji sebelumnya. Karena dunia email terus berubah, pastikan untuk sering menguji cuplikan Anda dan menambahkan yang baru bila perlu.

Meskipun ada lebih banyak lagi, kami telah mengumpulkan daftar lengkap dari beberapa cuplikan out-of-the-box favorit kami untuk digunakan untuk pengembangan email. Jangan ragu untuk menambahkannya ke pustaka cuplikan Anda!

Doctype

Sebuah doctype memberitahu klien email untuk membuat email dalam mode standar atau quirks. Ada dua bentuk doctype yang direkomendasikan untuk digunakan untuk email. Yang pertama adalah doctype HTML5:

HTML5

 <!doctype html>

XHTML

Yang kedua adalah doctype XHTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Campaign Monitor memecah doctypes HTML mana yang baik untuk digunakan, dan ada diskusi yang bagus tentangnya di Komunitas Litmus juga. Jika Anda tidak menentukan doctype untuk email Anda, klien email akan merender email dalam "mode keanehan" yang dapat mengakibatkan masalah rendering.

Tag Meta

Jika Anda mengkodekan email agar responsif, ada beberapa tag meta utama yang harus Anda sertakan.

UTF-8

Tag meta pertama yang direkomendasikan menyetel pengkodean karakter ke utf-8, yang merupakan pengkodean tipikal untuk email. Ini dapat diubah jika perlu.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Area pandang

Tag meta kedua yang direkomendasikan menetapkan responsivitas untuk email.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Windows Phone

Meta tag ketiga yang direkomendasikan khusus untuk membuat email responsif di Windows Phone.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Tabel

Email HTML menggunakan tabel untuk menyusun konten. Tabel bisa sangat membosankan untuk dikodekan dengan tangan, jadi kami telah mengembangkan cuplikan dasar untuk tata letak tabel sederhana.

Tabel 1×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Tabel 2×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabel 3×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabel 2×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabel 2×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabel 3×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabel 3×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tombol anti peluru

Membuat tombol di email cukup merepotkan berkat kebiasaan rendering Outlook. Ada empat jenis tombol antipeluru yang direkomendasikan, yang ditampilkan terlepas dari ada atau tidaknya gambar.

Tombol VML

Metode tombol antipeluru pertama dikembangkan oleh Stig Morten Myre dari Campaign Monitor dan merupakan pendekatan tombol berbasis VML:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

Campaign Monitor juga telah membuat button.cm, alat sederhana untuk menghasilkan kode tombol VML di atas.

Tombol Berbasis Padding

Metode kedua adalah pendekatan teks langsung dengan tombol berbasis padding:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Kelemahan utama tombol ini adalah tidak 100% dapat diklik.

Tombol Berbasis Perbatasan

Metode tombol antipeluru ketiga melibatkan pembuatan batas di sekitar tautan untuk membuat area besar yang dapat diklik:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Kelemahan utama dari metode ini adalah bahwa Outlook 2007-2013 tidak menghormati lebar batas pada tag tautan, sehingga menyebabkan beberapa pengurangan bantalan buatan pada tombol.

Padding + Tombol Berbasis Perbatasan

Metode terakhir melibatkan kombinasi tombol padding dan border:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Peretasan ini digunakan untuk menghindari masalah rendering padding di Outlook.

Gambar-gambar

Ada banyak faktor kunci yang perlu dipertimbangkan saat menggunakan gambar dalam email. Misalnya, Anda harus menentukan tinggi dan lebar dalam atribut HTML agar gambar dapat dirender dengan benar di Outlook. Dan, menggunakan teks ALT sangat penting tidak hanya untuk tujuan aksesibilitas, tetapi karena 43% pengguna melihat email dengan gambar mati. Terakhir, untuk mencegah bantalan ekstra dan celah di sekitar gambar, Anda harus mengaturnya ke display:block;.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Tautan

Tautan Dasar

Saat menggunakan tautan dalam email, Anda harus mengatur gaya sebaris di dalamnya, seperti ukuran font, keluarga font, dan dekorasi teks. Berikut cuplikan sederhana yang sudah memiliki gaya sebaris ini:

 <a href="#">{style}</a>

Hapus Tautan Biru di iOS

Ada beberapa strategi untuk menghapus tautan biru di iOS, tetapi berikut adalah cuplikan sederhana yang menggunakan satu deklarasi CSS untuk melakukannya:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Preheader/Teks Pratinjau Tersembunyi

Preheader atau teks pratinjau adalah salinan yang ditarik dari badan email Anda yang biasanya ditampilkan di bawah dari nama dan baris subjek di kotak masuk pelanggan. Menggunakan teks preheader tersembunyi adalah cara untuk menentukan salinan yang digunakan, dan mencegahnya memengaruhi desain email yang sebenarnya.

Berikut cuplikannya:

 <div> {preheader text} </div>

Pertanyaan Media

Kueri media adalah komponen dari cascading style sheets (CSS), bahasa yang digunakan untuk mendesain situs web dan kampanye email. Dengan kueri media, Anda dapat menyempurnakan desain email sehingga lebih dapat digunakan di seluruh kotak masuk seluler, desktop, dan email web.

Berikut daftar semua kueri media penting yang Anda perlukan saat mendesain email:

Kueri Media Dasar

 @media screen and ({declaration}) { {content} }

Kueri Media Lebar Maks

 @media screen and (max-width: {width}) { {content} }

Kueri Media Lebar Min

 @media screen and (min-width: {width}) { {content} }

iPad 1 & 2 + iPad Mini Media Kueri

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

Permintaan Media iPad 3 & 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Permintaan Media iPhone 2G/3G/3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4/4S/5/iPhone 6 (tampilan zoom) Media Query

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Permintaan Media HTC ONE + SAMSUNG GALAXY S4/S5

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (tampilan standar) + iPhone 6 Plus (tampilan zoom) Media Query

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (tampilan standar) Media Query

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Komentar Bersyarat Outlook

Dengan banyaknya masalah rendering yang datang dengan harus mendukung Outlook, terkadang berguna untuk menargetkan Outlook dengan gaya tertentu. Outlook dapat ditargetkan menggunakan komentar mso bersyarat untuk konten HTML atau CSS.

Rendering Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Outlook 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Lebih banyak komentar bersyarat Outlook:

Pandangan 2000
Pandangan 2000-2002
Pandangan 2000-2003
Outlook 2000-2007
Outlook 2000-2010
Pandangan 2002
Outlook 2002-2013
Outlook 2003
Outlook 2003-2013
Outlook 2007-2013
Outlook 2010
Outlook 2010-2013
Outlook 2013

WebKit

Salah satu cara terbaik untuk meningkatkan email Anda secara progresif adalah dengan menargetkan mesin rendering WebKit. Sekitar 47% dari pembukaan email terjadi di kotak masuk yang didukung oleh WebKit.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

Gmail tidak mendukung kelas atau id di <head> email, itulah sebabnya CSS harus disisipkan dalam email. Namun, Justin Khoo dari FreshInbox menemukan peretasan baru di mana Gmail akan membaca CSS di email.

Jika Anda menggunakan atribut lang atau title sebagai pemilih atribut yang nilainya ada dalam daftar nilai yang dipisahkan spasi, salah satunya sama persis, Gmail akan membaca CSS tersebut. Itu seteguk, jadi inilah cuplikan untuk membantu Anda:

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mail baru-baru ini memperkenalkan kueri media uniknya sendiri, memungkinkan kami dengan mudah menargetkan gaya tertentu untuk email web.

 @media yahoo { {style} }

Android

James White baru-baru ini memposting di Komunitas Litmus peretasan untuk memusatkan email di Android 4.4.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

Cuplikan di Komunitas

Ingin lebih banyak cuplikan? Punya beberapa favorit yang ingin Anda bagikan? Dengan bantuan ahli email di mana-mana, kami telah memiliki lusinan cuplikan yang berguna, seperti kode untuk menghapus tautan biru di perangkat iOS, di Komunitas Litmus.

Urutkan snippet yang ada menurut klien email tempat pembuatannya, atau jenis snippet (yaitu, retas, gambar, tautan, dll.). Anda dapat menambahkan milik Anda sendiri, dan membuat pustaka cuplikan favorit Anda. Dan, Anda dapat menghemat lebih banyak waktu dengan mengimpor cuplikan dari Komunitas langsung ke Builder. Digabungkan dengan Pratinjau Instan Builder, pengkodean dengan cuplikan mungkin merupakan cara tercepat untuk membuat kampanye email yang luar biasa.

Lihat cuplikannya di Komunitas →