() translation by (you can also view the original English article)
Mendesain email adalah tentang langsung ke poin dan memanfaatkan kesempatan singkat yang kamu miliki dengan subscriber. Kamu hanya memiliki satu kesempatan, jadi layak untuk menerapkan sebanyak mungkin trik untuk memastikan pesanmu tersampaikan. Prinsip mendasarnya adalah tentang menghargai pembaca dengan memberikan mereka sesuatu yang berharga sebagai balasan terhadap waktu yang mereka berikan untuk alasan mereka mendaftar yaitu mendengar langsung darimu.
Catatan Sebelum Kita Memulai
Beberapa saran yang akan saya buat tidak akan berlaku pada setiap daftar, perusahaan atau produk. Seperti halnya dengan email, coba apapun yang baru dan lihat bagaimana kinerjanya untuk menentukan mana yang terbaik bagi subscriber.
Aturan #1: Jadilah Transparan
Ini benar-benar penting. Hindari menggunakan nama pengirim, kalimat subyek, preheader atau salinan yang membingungkan atau samar, Ini akan membingungkan pembaca dan membuat mereka lebih cenderung menghapus email atau menandainya sebagai junk.
Sampaikan kepada pembaca mengenai dirimu, apa alasannya kamu mengirim email kepada mereka, dan pengalaman apa yang akan mereka dapatkan. Pastikan semua ini sedekat mungkin dengan bagian atas email. Ini berarti segera setelah email dibuka, tujuan dan identitasmu jelas, dan rencanamu tidak akan diabaikan.
Pastikan nama pengirim, kalimat subyek, preheader, dan konten 'di atas lipatan' penuh makna dan relevan dengan alasanmu menghubungi pembaca.
Aturan #2: Jadilah Jelas, Rangkullah Konvensi
Itu mungkin tampak membosankan, namun menjadi konvensional sangat berguna dalam email. Email berukuran kecil dan mereka dibuka dalam periode yang sangat singkat, sehingga fungsi setiap elemen yang diperlukan harus jelas.
Buat Tautan Yang Jelas
Buat tombol yang bagus, besar, mudah diklik dan diketuk untuk tautan. Pada mobile, buat ukuran lebar 100% sehingga dapat mudah diketuk dengan jempol (tanpa perlu menjangkau).
Jika kamu juga ingin memiliki tautan teks di dalam salinan, pastikan mereka dicetak tebal dan berwarna kontras sehingga tampak menonjol. Cobalah untuk tidak memiliki terlalu banyak tautan yang berdekatan, yang dapat menyebabkan pengguna secara tidak sengaja mengetuk yang salah.
Sekitar 50% pembuka berada pada perangkat sentuh di masa sekarang, sehingga hindari bahasa yang tidak masuk akal, seperti "klik di sini".
Jangan ragu-ragu menambahkan sebuah panah—studi menunjukkan bahwa itu lebih efektif—namun, seperti biasanya, uji pada subscriber-mu.
Buat Manfaat Klik Tampak Jelas
Tombol terbaik menggabungkan manfaat klik dengan tindakan itu sendiri. Sebagai contoh, "Mulai gunakan akun barumu" atau "Klaim uji coba gratis".
Aturan #3: Katakan Lebih Sedikit
Jangan menulis banyak. Penerima akan memindai email untuk hal-hal yang menarik mereka daripada membaca keseluruhan email, jadi bagi itu ke dalam potongan kecil yang sesingkat mungkin.
Tujuanmu dengan email pemasaran adalah membawa orang mengklik melalui websitemu, sehingga tidak perlu menunda itu dengan monolog panjang, khususnya karena email yang tampak panjang akan memenuhi pembaca dengan kelelahan mental dan membuat mereka cenderung menekan "Delete".
Buat Itu Dapat Dipindai
Desain emailmu agar mengena. Teks hendaklah tampak jelas dan tergambar yang langsung ke tujuan.
Gunakan heading yang jelas dan tuliskan konsep utama dalam huruf tebal sehingga pembaca bisa mendapatkan inti, bahkan jika mereka tidak membaca semuanya (yang kemungkinan besar akan seperti itu).
Kamu Bisa Mengatakan Lebih Banyak—Nanti
Jika kamu berada di dalam urusan mengirimkan konten yang lebih panjang yang dinikmati pembaca, saya tentu saja tidak mengatakan bahwa tidak ada tempat untuk itu di dalam pemasaran email.
Orang membaca email dalam semua jenis skenario yang berbeda. Beberapa akan berada 'di perjalanan' dan di antara rapat penting, yang lainny mungkin sedang sangat bosan di ruang tunggu dokter gigi, dan saya sangat memohon maaf mengatakan bahwa yang lainnya masih berada di toilet. Skenario ini semuanya sangat berbeda, namun mudah untuk melayani setiap orang dengan berpegang pada hirarki lokal.
Sediakan informasi yang paling singkat dan paling mengena, dan kemudian cantumkan konten panjang di bawahnya. Dengan cara ini kamu tidak memaksa siapa pun untuk menyebrangi konten yang panjang kecuali mereka yang secara aktif menelusuri email.
Ulangi Ajakan Utama Bertindak
Jika email berukuran panjang dan pengguna telah melakukan scroll sepanjang konten, pastikan mereka memiliki akses ke ajakan bertindak lainnya tanpa harus melakukan scroll kembali ke atas email.
Email Promosional dan Pengumuman
Tips ini berlaku pada pesan pemasaran dimana biasanya ada satu atau dua hal utama alasan kamu menghubungi subscriber.
Jangan Cairkan Pesanmu
Jika kamu menuliskan mengenai satu hal ke pembaca, coba untuk tidak mencairkan pesanmu dengan menambahkan banyak hal di bawah atau pada sidebar. Dengan setiap opsi tambahan kamu mengumpulkan risiko menggelincirkan mereka.
Hapus Semua Elemen Non Esensial
Periksa desain emailmu, kenali apapun yang tidak esensial dalam menyampaikan pesanmu, kemudian hapus itu. Semakin sedikit gangguan berarti semakin jelas komunikasinya.
Jangan Berikan Terlalu Banyak Pilihan
Terlalu banyak pilihan meningkatkan beban kognitif pembaca, membuat mereka cenderung kurang membuat keputusan.
Pikirkan tentang persyaratan minimum adalah membuat seseorang mengklik melalui websitemu, kemudian secara bertahap memperkenalkan lebih banyak detail yang diperlukan. Membebani orang dengan terlalu banyak pilihan di awal hanya akan mendorong mereka meninggalkannya.
Jika kamu mencoba mengarahkan subscriber untuk memilih produk dan membelinya, jangan sajikan semua pilihan dalam email. Cukup arahkan mereka melalui websitemu, dan mulai perkenalkan kompleksitas di sana.
Coba Menarik Perhatian Secara Bertahap
Terkadang terasa mengintimidasi dalam menerima sebuah email yang langsung mengatakan, "BELI ITU! DAFTAR! KOMITMEN!!"
Sebagai gantinya, coba untuk mengarahkan orang ke situsmu sebagai langkah awal, seperti "pilih ukuran sepatumu untuk melihat gaya yang tersedia" daripada "beli sepatu ini".
Miliki Titik Fokus
Jadikan ajakan bertindak sebagai titik fokus utama pada email. Pastikan pembaca tidak harus mencari ajakan bertindak di dalam lautan kesamaan.
Membuat titik fokus itu mudah. Pertama-tama, pastikan kamu memiliki tujuan utama. Kemudian kamu hanya perlu membuatnya lebih besar daripada yang lainnya, dan memastikan ada cukup ruang di sekitarnya sehingga mata terlebih dahulu tertarik ke area ini. Ini jauh lebih berlaku pada desain desktop ketika pengguna akan melihat lebih banyak email sekaligus.
Gunakan Whitespace di Sekitar Elemen
Jika kamu memiliki banyak hal dengan bobot dan ukuran lebih kecil tanpa whitespace di sekitarnya, mereka akan tampak sebagai sebuah blok besar tak berbentuk yang akan mudah dilewatkan mata. Gunakan whitespace di sekitar elemen untuk membantu menarik mata pada hal tersebut.
Tips Umum
Jika Orang Ingin Pergi, Biarkan
Jangan kubur, sembunyikan atau kaburkan informasi untuk berhenti berlangganan. Selain itu tidak sah di banyak negara, itu kasar dan kontra-produktif. Jika seseorang ingin berhenti berlangganan dari newsletter dan kamu membuatnya tidak mungkin agar mereka melakukannya, mereka tidak akan kembali menjadi pelanggan yang bahagia. Itu hanya akan membuat rasa tidak suka terhadap brand-mu karena mereka akan dipaksa melanjutkan memproses emailmu (atau mengatur filter untuk mengirimkan pesanmu ke trash).
Hindari Terlalu Banyak Pembagi Vertikal
Semakin banyak pembagi vertikal di dalam sebuah layout, itu semakin mengganggu mata. Berpeganglah pada dua atau tiga pembagi vertikal di dalam grid.
Garis tepi yang solid juga mengganggu mata, jadi pastikan ini tetap minimum.
Pertimbangan Praktis
Jaga Lebar Tetap Di Bawah 600px
Ini umumnya merupakan lebar maksimum teraman untuk desain desktop untuk memastikan pengguna tidak harus melakukan scrolling secara horizontal.
Gunakan Peningkatan Progresif
Sebelum memberikan sudut melengkung dan drop shadow pada tiap kotak, pikirkan tentang bagaimana jadinya layout tanpa penambahan ini. Perlakukan ini sebagai desain 'dasar', dimana kamu akan menambahkan sudut melengkung dan bayangan sebagai tambahan.
Membuat bentuk tegas dengan tepi kotak tampak sama bagusnya, dan pengguna pada email client terbaru akan melihat sudut melengkung sebagai bonus tambahan.
Pendekatan ini akan menghemat banyak waktu ketika sedang membuat email. Jika kamu harus membuat kotak teks sudut melengkung dengan drop shadow dan itu harus berfungsi pada setiap email client, kamu akan harus membuat efek menggunakan gambar, yang dapat sangat menguras waktu khususnya ketika membuat template yang dapat digunakan kembali.
Berikan Ruang Bernafas Pada Desainmu
Rangkullah fakta bahwa tidak selalu mungkin untuk mendapatkan semua yang tampak identik dalam setiap email client hingga pada pixel terakhir. Desain dengan pemikiran ini untuk meringankan sakit kepala.
Buat desain yang memiliki sedikit ruang bernafas, dimana itu tidak akan bermasalah jika salah satu client menambahkan 7 pixel area misteri di bawahnya. Paling tidak, hentikan detail kecil yang rumit yang akan tampak rusak jika hanya kehilangan satu pixel.
Pertimbangkan Pengalaman Menyeluruh
Emailmu merupakan sebuah kohesif secara keseluruhan, jadi pikirkan tentang bagaimana semua berfungsi bersama. Pengguna akan melihat terlebih dahulu email di dalam inbox mereka dan membaca nama pengirim, subyek dan preheader. Kemudian mereka mungkin akan melihat versi email dengan gambar yang dinonaktifkan, yang merupakan opsi default bagi kebanyakan email client. Terakhir, mereka akan melihat emailmu sesuai keinginanmu—jk mereka mengaktifkan email.
Pastikan bahwa semuanya pas bersama, dan pelanggan akan tetap dapat mengerti pesanmu, bahkan jika gambar dinonaktifkan.
Jangan cantumkan pesan utama di dalam sebuah gambar. Itu akan diblokir secara default dan kebanyakan email client tidak akan menampilkan alt tag.
Di dalam contoh di bawah, kamu dapat melihat bagaimana hampir semuanya di dalam pesan akan terlewat tanpa mengaktifkan gambar, karena semua teks berada di dalam gambar dan alt text tidak diterapkan untuk membuatnya terbaca.
Terapkan Style Pada Alt Tag
Kamu bisa menambahkan CSS styles ke gambar (atau cell induk atau tag tautan) untuk memastikan bahwa mereka ditampilkan dengan baik di dalam client yang mendukung alt tags. Ini benar-benar dapat meningkatkan pengalaman menyeluruh bagi pelanggan.
Uji Buta Warna
Jika kamu menggunakan Photoshop, ini adalah bawaan. Ada banyak tool yang akan memungkinkanmu untuk melihat bagaimana tampilan desain pada 10% orang dengan kelainan penglihatan warna.
Tautkan Semuanya
Ketika membuat, jangan hanya menautkan tombol. Pastikan kamu menautkan semuanya sehingga pengguna dapat mengklik dimana saja. Tautkan gambar, tombol dan headline. Bahkan, tautkan teks jika itu berfungsi.
Bagaimana Mendesain Email Ramah Mobile
Ada beberapa cara pendekatan yang dapat kamu lakukan dalam membuat email yang ramah mobile.
1. Desain Kolom Tunggal, Agnostik Perangkat
Ini adalah cara termudah untuk memiliki email yang ramah mobile. Dengan menggunakan metode ini, gambar dan teks diatur cukup besar sehingga apakah email dilihat pada desktop atau mobile, font tetap terbaca dan gambarnya sudah cukup besar.
Manfaat dari jenis desain ini adalah bahwa kamu hanya perlu melakukan coding pada sebuah layout tunggal. Itu tentu saja merupakan opsi tercepat dan termudah. Smartphone client yang mendukung perubahan skala akan mengatur skala emailmu menjadi lebar 100%, dan pada yang tidak mendukung, akan ada sedikit scrolling horizontal.
Kelemahannya adalah bahwa versi desktop sangat besar ukurannya (yang secara pribadi bukan saya anggap sebagai kelemahan).
Untuk mendapatkan layout ini:
- Desain emailmu pada lebar sekitar 450px
- Heading hendaklah paling tidak 30px
- Salinan body hendaklah paling tidak 20px
2. Desain email responsif penuh
Sebuah email HTML responsif penuh menggunakan media queries untuk menampilkan email dalam cara tertentu, tergantung pada ukuran perangkat saat itu ditampilkan. Hampir tidak ada client besar pada desktop dan webmail mendukung media queries, namun kebanyakan mail client pada smartphone dan tablet mendukung itu. Ini berarti bahwa melakukan coding email responsif sedikit belakang-ke-depan dibandingkan coding pada website responsif, dimana versi desktop sebagai versi 'dasar', dan kamu menggunakan max-width query untuk menyesuaikan layout pada perangkat yang lebih kecil.
Manfaat jenis desain ini adalah bahwa kamu dapat membuat email multi-kolom yang bagus yang menerjemahkan ke versi mobile kolom tunggal dan mudah dibaca. Media queries juga fleksibel karena kamu dapat menargetkan ukuran layar yang spesifik dan juga layar dengan kepadatan pixel yang spesifik (untuk menampilkan gambar beresolusi tinggi).
Kelemahannya adalah bahwa aplikasi Gmail untuk Android (mail client terpopuler di Android) tidak mendukung media queries, dan dapat membuat hasil yang tidak biasa ketika melakukan rendering pada email responsif penuh. Email responsif penuh juga memakan waktu lebih lama untuk melakukan coding daripada sepupunya agnostik-perangkat.
3. Desain Email Fully Fluid
Pikirkan ini sebagai menjadi responsif tanpa media queries.
Metode ini melibatkan pembuatan desain mengalir, lebar 100%, dengan lebar maksimum sekitar 600px yang diatur pada tabel terluar. Komentar kondisional diperlukan (untuk Outlook) seperti pada media query (untuk Apple Mail yang mana, hebatnya, tidak mendukung max-width property).
Manfaat jenis desain ini adalah bahwa itu akan menjadi responsif di dalam setiap email client, termasuk aplikasi Gmail untuk Android. Metode ini juga dapat digunakan bersamaan dengan media queries untuk lebih memoles hal-hal seperti ukuran teks dan tombol pada client yang mendukungnya.
Kelemahannya adalah itu hanya akan berfungsi dengan baik dengan desain yang cukup sederhana dan umumnya tidak memiliki lebih dari satu kolom. Konten dengan dua kolom tidak masalah selama itu cukup kecil untuk tampak baik di dalam sebuah kolom sempit pada sebuah layar smartphone.
Kamu juga harus dapat menggunakan lebar persentase untuk gambarmu, yang tidak selalu mungkin ketika membuat template (seringkali gambar dalam template harus memiliki pixel width yang tetap).
Meningkatkan Lebih Lanjut Desain Email
Dan terakhir, ada beberapa hal bagus yang dapat kamu gunakan untuk mulai membuat email yang sangat cantik dan benar-benar menonjol.
Gambar Background
Gambar background digunakan untuk menjadi sesuatu untuk tumpukan "Terlalu Sulit", namun berkat Stig Morten Myre dan teman-temannya di Campaign Monitor, sekarang ada Bulletproof Email Backgrounds generator super mudah yang menangani semua kendala. Tidak perlu lagi menahan diri dalam menambahkan gambar background pada kampanyemu.
Web Fonts
Penggunaan web fonts juga merupakan cara yang sangat bagus untuk membuat desainmu menonjol dari yang lainnya. Dengan sedikit pertimbangan desain ekstra dan sedikit waktu pembuatan ekstra, mudah untuk menerapkan web fonts yang akan me-render sangat bagus dalam sejumlah email client.
Animasi CSS3
Email client modern (seperti Apple Mail dan yang ada di iPhone dan perangkat Android) sebenarnya mendukung Animasi CSS3, yang berarti kamu dapat mulai memikirkan mengenai menambahkan beberapa hal keren pada kampanyemu. Transisi, juga animasi keyframe, di render cukup baik dan dapat menjadi tambahan fantastis pada email (selama mereka menurun dengan anggun) karena mereka tidak meningkatkan ukuran file sebanyak animasi GIF.
Kesimpulan
Ada banyak yang perlu diperhitungkan ketika mendesain sebuah email! Tips yang ada di dalam artikel ini akan memberikan awalan yang kokoh, dan lihat lebih banyak post di dalam seri ini yang akan membahas berbagai aspek (seperti penggunaan web fonts dan desain responsif) secara lebih detail.
