Cara mendesain email untuk pendekatan seluler pertama

Diterbitkan: 2015-05-21

Kami sedang berjuang melawan yang baik, yang merupakan pertempuran tanpa akhir dari aliran email yang konstan. Ke mana pun kita pergi, atau perangkat apa pun yang kita miliki, email dapat menemukan kita di mana saja. Kemungkinan Anda akan mendapatkan sepuluh email lagi setelah membaca artikel ini. Dan sebagai desainer, kami berada di kedua sisi kotak masuk: kami terus-menerus menerima email, tetapi kami juga bertanggung jawab untuk merancang dan membuat desain email yang sebenarnya.

Tidak peduli siapa yang Anda targetkan dengan email Anda, tujuannya adalah untuk memberikan pengalaman pengguna terbaik saat mengirim email ke pelanggan, pelanggan, dan prospek. Dan karena sebagian besar email dibuka di perangkat seluler, kami perlu mendesain email untuk mengakomodasi perangkat apa pun yang dapat digunakan untuk membukanya.

Kami telah menjadi begitu terbiasa dengan desain web responsif dan aplikasi seluler terbaik, kami sering menerima begitu saja bahwa kami hanya dapat mengambil perangkat apa pun dan merancang pengalaman yang dibuat khusus. Dengan email, hal-hal yang tidak dipotong dan kering. Dalam hal teknologi, ini adalah tahun-tahun cahaya di belakang desain web modern. Kita perlu mendesain dengan atribut HTML, tata letak berbasis tabel, dan gaya sebaris, yang tidak dijamin berperilaku sama di setiap klien email.

Mendesain email untuk semua perangkat, apa saja pilihan saya?

Sebelum Anda pergi dan membersihkan koleksi CD-ROM Anda, ingatlah ada harapan untuk merancang email "responsif" yang sukses, bahkan dengan keterbatasan. Membuat email yang benar-benar responsif tentu saja merupakan pilihan, tetapi penting untuk mempertimbangkan ketiga pendekatan ini saat membuat desain mobile first yang sukses:

  • Desain yang dapat diskalakan
  • Desain cairan
  • Desain responsif

Untuk memilih pendekatan yang paling sesuai dengan kebutuhan Anda, penting untuk memahami perbedaan dan batasan antara ketiga bentuk desain ini. Membuat keputusan membutuhkan pengetahuan tentang audiens Anda dan perangkat serta klien email apa yang mereka gunakan. Karena tidak semua klien email menawarkan dukungan CSS yang sama, ini akan membantu menentukan pendekatan mana yang paling baik melayani pengguna Anda.

Desain yang dapat diskalakan

scalable-desain

Tata letak email yang dapat diskalakan bersifat serbaguna karena dapat dibaca dan diklik di semua ukuran layar. Ini adalah opsi yang bagus jika audiens Anda cenderung membuka email mereka di berbagai perangkat: seluler, tablet, dan desktop.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Opsi ini biasanya paling mudah diterapkan karena tidak menggunakan kueri media dan tidak ada lebar tabel yang perlu disesuaikan. Salah satu keuntungannya adalah tidak ada kurva belajar yang besar saat merancang jenis email ini. Dalam kebanyakan kasus, perangkat seluler adalah perangkat yang paling umum untuk membaca email, dan ini memudahkan untuk memastikan bahwa pertimbangan seluler dilakukan terlebih dahulu. Tombol yang lebih besar, teks yang mudah dibaca, dan ajakan bertindak yang jelas memberikan prioritas pertama pada ponsel untuk mengakomodasi kebutuhan akan ukuran layar yang lebih kecil.

Desain email yang dapat diskalakan dapat membatasi kenyataan bahwa itu harus menjadi satu kolom agar berfungsi dengan baik di semua perangkat. Alasannya adalah, jika desain memiliki banyak kolom, kolom ini akan menjadi sangat kecil di perangkat seluler, sehingga memengaruhi keterbacaan. Namun, jika Anda menggulir kotak masuk Anda, Anda akan melihat banyak tata letak kolom tunggal karena sangat umum.

Konten adalah kunci untuk email apa pun, jadi ukuran teks harus sesuai dengan ukuran yang berfungsi baik untuk seluler dan juga di layar yang lebih besar. Dengan sebagian besar klien email, seluruh email akan memenuhi layar sehingga pengguna tidak perlu menggulir secara vertikal. Namun, tetap disarankan agar informasi utama dan ajakan bertindak harus ditempatkan di kiri atas email, untuk berjaga-jaga jika email tidak memenuhi layar sebagaimana dimaksud.

Desain cairan

fluid-email-desain

Anda mungkin akrab dengan tata letak "cair" dari desain web. Komponen desain memiliki lebar persentase, dan menyesuaikan dengan resolusi layar pengguna, menjaga lebar yang sama. Desain email yang lancar menggunakan ide yang sama.

Opsi email ini menjembatani kesenjangan antara scalable dan opsi yang benar-benar bertanggung jawab. Lebih banyak desain di muka harus dilakukan daripada dengan opsi yang dapat diskalakan. Alasan untuk ini adalah bahwa ukuran berbasis persentase membuat lebar tabel dan gambar beradaptasi dengan ukuran layar apa pun yang digunakan untuk melihat email. Tabel tidak mengubah tata letak pada ukuran yang berbeda, tetapi konten mengalir dan mengisi ruang. Ini adalah pilihan yang bagus untuk email yang berisi teks, karena ada sedikit kontrol atas bagaimana salinan dan gambar berhubungan satu sama lain. Sebaiknya tata letak tetap sederhana, sebaiknya tata letak tabel tunggal untuk menjaga keterbacaan email sebagai prioritas pertama.

Ingat bagaimana kami mengatakan ini menjembatani kesenjangan antara tetap dan responsif? Pasalnya, ukurannya perlu dibatasi untuk layar yang lebih besar. Jika email terlalu lebar, baris teks menjadi terlalu panjang secara visual dan kami ingin memastikan pembaca kami dapat dengan mudah membaca email kami. Membungkus konten email Anda dalam tabel wadah lebar tetap akan membantu untuk tampilan pada ukuran layar yang lebih besar. Kemudian kueri media yang bermanfaat akan menargetkan ukuran layar yang lebih kecil.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Contoh kueri media untuk perangkat seluler:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

Email responsif

desain responsif

Mari kita ambil apa yang kita ketahui dari email yang terukur dan lancar dan tambahkan beberapa aturan lagi. Responsif memungkinkan Anda memiliki kontrol lebih besar atas apa yang disajikan di titik henti sementara yang berbeda dengan kueri media CSS. Dengan opsi ini, tata letak dapat diubah, dan elemen lain juga dapat disesuaikan dengan gaya bersyarat untuk titik henti sementara tertentu.

Berikut adalah contoh kueri media untuk tata letak responsif:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Seperti opsi lainnya, Anda tidak terbatas pada satu kolom atau desain sederhana. Email bisa lebih kompleks, dengan sedikit batasan pada tata letak dan jumlah gambar. Misalnya, desain email dapat berupa multi kolom di perangkat yang lebih besar tetapi satu kolom di ponsel. Ukuran teks, gambar, dan hampir semua hal lainnya dapat dioptimalkan untuk pengalaman terbaik.

Sebelum kita membuat desain yang kompleks dengan beberapa kueri media, penting untuk membicarakan beberapa pengorbanannya. Kueri media tidak berfungsi di semua klien email. Bahkan, dukungannya sangat terbatas. Menurut daftar dukungan kueri media Litmus, aplikasi Android Outlook.com, klien asli Android 4.x, dan iOS (iPhone/iPad) saat ini mendukungnya. Ini dapat dimanfaatkan secara maksimal jika mayoritas pemirsa Anda adalah pengguna ponsel dan tablet.

Pertimbangan desain lainnya

Sebelum Anda mulai membuat desain email Anda, penting untuk melihat analitik untuk menentukan klien email dan perangkat pengguna Anda. Disarankan untuk sering memeriksa ini dan biarkan pendekatan desain Anda berkembang seiring perubahan. Meskipun dengan keterbatasan, email terus berkembang sehingga penting untuk mengikuti apa yang saat ini didukung.

Berikut adalah beberapa sumber yang bagus untuk bacaan lebih lanjut:

  • CSS Khusus Seluler
  • Masa Depan Email
  • Email iPhone dan Android

Kabar baiknya adalah pendekatan seluler pertama dimungkinkan dengan keterbatasan email saat ini. Bahkan jika desainnya bukan bentuk "responsif" yang sebenarnya, hanya dengan beberapa persentase tertentu dan beberapa kueri media, Anda akan membuat desain email yang pasti akan mengesankan, apa pun perangkatnya. Dalam kebanyakan kasus, sebagian besar pengguna memeriksa email di perangkat seluler, jadi mengambil pendekatan seluler pertama menjadi dasar yang kuat untuk desain email Anda.