Pertimbangan Desain untuk Beberapa Email dan Perangkat Klien

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Desain email berikut banyak pertimbangan yang sama sebagai web desain: berbagai jenis browser, sistem operasi, ukuran layar, dan perangkat. Tapi mana web designer telah mampu menggunakan teknik-teknik CSS modern dan bahasa scripting sisi klien untuk mengatasi tantangan-tantangan ini, desainer email belum begitu beruntung.

Jadi, apa itu email desainer untuk melakukan? Pertama, dan yang paling penting, sebagai desainer email kita perlu lupa gagasan dari pixel sempurna desain. Kemudian, kita perlu merangkul beberapa pertimbangan desain yang akan membantu email desain Penyemiran terlepas dari mana email membaca.

Catatan: tutorial ini adalah bagian dari seluruh seminggu dari konten email tentang Tuts + Web Desain-check out panduan belajar menguasai HTML Email untuk lebih!

Tata letak dan struktur

Email harus mudah untuk membaca dan memahami apa pun perangkat mereka sedang membaca di sehingga mereka pesan dikomunikasikan kepada pelanggan. Berikut adalah beberapa aspek desain sederhana untuk mempertimbangkan:

Model piramida terbalik

Model piramida terbalik (mana unsur-unsur yang paling perhatian ditempatkan pertama, diikuti oleh informasi pendukung dan sebagainya) sangat cocok untuk desain email:

Ini menciptakan hirarki dalam email yang membuat konten mudah untuk mengkonsumsi.
Konten hierarki membuat ajakan untuk bertindak jelas menonjol dalam email.
Ini adalah salah satu jenis termudah layout untuk beradaptasi untuk berbagai ukuran layar karena semua konten duduk di satu kolom.

Email ini dari sarang menggunakan model piramida terbalik dengan sempurna, untuk membantu menarik pengguna untuk tombol ajakan untuk bertindak:

email design for Nest — Sarang Cam IQ email desain

Zig-Zag atau Z Layout

Tata letak zig-zag adalah suatu struktur sederhana grid, yang dapat diterjemahkan ke tabel HTML sangat mudah-dasar dari semua email desain. Jenis tata letak membuat konten mudah dicerna independen perangkat email dibaca pada. Pada perangkat dengan layar besar ukuran, seperti desktop, struktur zig-zag akan ditampilkan. Pada perangkat yang lebih kecil, seperti ponsel cerdas, struktur dapat menurunkan ke satu kolom layout:

z-layout from zapier — *Tentu saja* Zapier menggunakan pola-Z

Sementara jenis tata letak ini sedikit lebih menantang untuk beradaptasi untuk ukuran layar yang berbeda, ada banyak metode yang didokumentasikan secara online untuk kode jenis tata letak.

Memeriksa email ini dari kapas yang menggunakan tata letak Z-pola untuk dengan mudah berjalan pengguna melalui cara mengatur profil mereka, tanpa berlebihan pelanggan dengan informasi:

tinder email design — Kapas email desain pada reallygoodemails

Sekali lagi, tata letak mengkonversi ke desain tunggal-kolom untuk perangkat lebih kecil.

Ruang putih

Ruang putih ini sering nemesis email desainer. Dengan ruang terbatas seperti itu, terutama pada smartphone, ada tekanan untuk memastikan bahwa ruang putih ditutup naik. Email dengan sedikit ruang putih dan konten yang penuh sesak bersama-sama dapat dihitung untuk pelanggan, tidak terbaca, dan akhirnya gagal.

Merangkul ruang putih. Cerdas penggunaan ruang putih dapat membuat email Anda lebih mudah untuk membaca dan digunakan secara efektif di sekitar ajakan Anda untuk bertindak tombol akan membuat mereka lebih menonjol dan mendapatkan lebih banyak dari mereka sangat dibutuhkan klik.

Efektif penggunaan ruang putih bahkan dapat membantu keterbacaan email Anda, yang merupakan kunci untuk pelanggan yang membaca email Anda pada perangkat mobile kecil mungil.

Email ini dari Squarespace adalah contoh yang bagus tentang bagaimana spasi dapat meningkatkan desain email Anda dan membuat pesan email jelas kepada pelanggan:

keanu squarespace email design — Nah jika Keanu dapat melakukannya...

Tipografi

Pengguna harus dapat membaca email Anda apakah mereka mengambil sekilas pada itu pada perangkat mobile atau memeriksa email mereka di desktop. Memastikan teks dalam email Anda dibaca tidak peduli apa ukuran layar yang adalah membaca email Anda sangat penting.

Dalam waktu sebelum smartphone, hal itu biasa bagi tubuh teks dalam email menjadi 12px. Ketika orang mulai membaca email pada smartphone, ada banyak mencubit-untuk-zoom-ing terjadi hanya untuk membaca konten. Ini sering mengaburkan desain email, meninggalkan pelanggan dengan pengalaman kotak masuk yang mengerikan.

Menggunakan ukuran font minimum 16px untuk salinan isi email Anda akan memastikan bahwa ukurannya terbaca, tidak peduli apa ukuran layar yang dibaca. Tetapi bukan hanya ukuran font yang penting. Ketinggian baris juga merupakan pertimbangan desain utama untuk memastikan email Anda mudah dibaca. Ketinggian baris yang tidak lebih kecil dari 1,5 kali ukuran ukuran font Anda akan memastikan salinan email Anda mudah dibaca semua orang. Jadi, jika ukuran font untuk salinan tubuh 16px, tinggi baris harus 24px. Anda dapat menggunakan perhitungan yang sama pada judul dan item lainnya dari teks dalam email Anda.

evernote email design — Evernote dengan beberapa salinan tubuh yakin 22px dan (hampir 1,5) 30px tinggi baris

Gambar

Dukungan untuk bahkan yang paling dasar dari atribut HTML dan CSS masih jerawatan banyak klien email populer dan perangkat. Ambil contoh gambar latar belakang.

Gambar latar belakang

Gambar latar belakang yang digunakan oleh banyak desainer email, namun, mereka sedang tidak didukung dalam semua klien email, khusus versi Microsoft Outlook dan GANGGA (Gmail Android dengan Gmail Account bebas).

Ada alat online yang besar dari Monitor kampanye yang akan menghasilkan VML (vektor Markup Language) — bahasa milik Microsoft yang digunakan untuk HTML markup di Outlook — sehingga memungkinkan gambar latar belakang dalam versi-versi Outlook yang tidak mendukung latar belakang gambar. Menang!

Tetapi jika Anda tidak ingin main-main dengan VML kode dan ingin tetap dengan HTML dan CSS, hanya menggunakan warna latar belakang fallback yang sesuai untuk Kapan gambar latar belakang tidak didukung. Dan ketika memilih warna latar belakang fallback jangan lupa untuk memperhitungkan warna teks apapun yang mungkin duduk di atas gambar latar belakang.

Menggunakan warna latar belakang fallback yang juga adalah cara yang bagus untuk memastikan email Anda masih dipahami jika seseorang membaca mereka pada perangkat mobile dengan koneksi data yang buruk. Jika gambar tidak memuat, warna latar belakang fallback yang mengisi ruang gambar latar belakang di.

Teknik yang dikenal sebagai piksel seni mengambil ini ke tingkat lain. Dikenal sebagai bentuk desain defensif, menggabungkan gambar dan warna latar belakang yang menciptakan mosaik ketika gambar tidak memuat.

Teks dalam gambar

Keterbatasan dalam mendukung font web dan ketat merek pedoman berarti bahwa, secara historis, email desainer harus membuat gambar dengan teks pada mereka, sehingga mereka bisa memiliki kontrol penuh atas tampilan dan nuansa teks.

Kembali pada hari, ketika sebagian besar email melihat pada desktop perangkat ini adalah sempurna dapat diterima. Namun, teks dalam gambar menimbulkan masalah besar bagi orang-orang yang melihat email pada perangkat mobile. Sebagai skala gambar, jadi tidak teks. Ini sering menjadi terbaca, menciptakan pengalaman buruk bagi pelanggan.

Solusinya? Menggunakan gambar latar belakang dengan hidup teks di atas. Menggunakan teks hidup, Anda akan mampu mengontrol ukuran teks pada perangkat yang berbeda menggunakan query media yang didukung secara luas di klien email populer seperti Gmail dan Apple Mail.

Email ini dari REI menggunakan kombinasi dari gambar latar belakang teks lebih dari itu untuk pesannya utama, dan itu tampak hebat pada desktop dan mobile perangkat:

Animasi GIFs

GIF animasi sederhana masih banyak digunakan oleh desainer email. GIF sempurna untuk menambahkan sedikit bunga atau kegembiraan ke email. Tapi ada kecenderungan berbahaya semakin rumit animasi GIFs dengan animasi yang lebih lama — dan itu berarti lebih besar ukuran file.

Mungkin mudah untuk men-download 4MB GIF dari laptop Anda, di rumah, pada koneksi internet kabel. Tetapi berpikir tentang orang-orang yang mencoba untuk men-download GIF yang sama pada perangkat mobile menggunakan jaringan data mereka. Gambar mungkin membutuhkan waktu begitu lama untuk men-download bahwa pembaca hanya akan tumbuh lelah menunggu dan menutup atau menghapus email Anda. Dan ini terutama buruk jika pesan utama dari email Anda di GIF itu.

Idealnya, Anda ingin untuk menjaga ukuran gambar GIF animasi di bawah 1MB. Itu berarti menyederhanakan setiap animasi, menjaga berbagai warna yang relatif kecil, dan durasi pendek animasi. Anda tidak perlu menjadi seorang penyihir Photoshop untuk mengoptimalkan GIFs Anda untuk email. Ada alat online yang dapat membantu Anda melakukan hal itu, seperti Pengoptimal GIF ini online.

Untuk mengurangi ukuran GIF animasi Anda coba:

Mengubah ukuran gambar
Menerapkan kompresi lossy
Mengurangi jumlah bingkai dengan menghapus bingkai duplikat

Email dari Postable ini menampilkan GIF animasi yang menyenangkan, dan jam hanya pada 303kb:

Postable email design — Lihatlah versi animasi sebenarnya

Tombol ajakan untuk bertindak

Tombol ajakan untuk bertindak, atau CTAs untuk jangka pendek, adalah sebuah pokok utama untuk email. Setelah semua, Anda mengirimkan email untuk memberitahukan Pelanggan sesuatu dan Anda ingin pelanggan mampu untuk melakukan sesuatu dengan informasi dalam email Anda. Itu di mana panggilan untuk tindakan tombol masuk.

Masalahnya di sini adalah sekarang orang-orang yang tidak hanya mengklik pada email Anda dari perangkat desktop dengan mouse atau trackpad. Tetapi mereka juga menggunakan tablet yang memiliki styluses. Dan smartphone, dari berbagai ukuran layar, menggunakan ibu jari atau jari mereka tekan dengan.

Panggilan untuk tindakan tombol harus diklik pada berbagai ukuran layar yang berbeda, baik menggunakan mouse, stylus, ibu jari, atau bahkan jari. Menyapa anti peluru tombol.

Antipeluru tombol gunakan hanya HTML dan CSS untuk membuat tombol diklik 100%. Ada berbagai teknik yang berbeda yang dapat Anda gunakan untuk membuat tombol antipeluru. Dan bahkan generator kode yang akan membuat tombol Anda untuk Anda. Mereka kunci sepotong informasi untuk tombol antipeluru besar adalah ukuran. Apple pedoman merekomendasikan tombol tidak harus lebih kecil dari 44px oleh 44px untuk memastikan mereka dapat mengetuk dari perangkat mobile. Dan ini adalah standar yang email desainer telah mengadopsi untuk antipeluru tombol dalam email mereka.

Kesimpulan

Semua pertimbangan desain menjamin bahwa email Anda akan membaca, memahami, dan actioned pada oleh khalayak yang lebih besar. Semua tujuan yang setiap pemasar email harus bertujuan untuk mencapai.