Desain email seluler dimulai dari urutan baca: pelanggan harus memahami penawaran, syarat penting, dan tindakan berikutnya tanpa memperbesar layar. Kisi produk Shopify yang terasa lapang di desktop dapat berubah menjadi tumpukan gambar kecil di ponsel. Rancang lebih dahulu untuk ruang baca yang sempit, lalu periksa saat teks memanjang, gambar gagal dimuat, atau kolom bertumpuk.
Susun urutan baca yang jelas
Gunakan struktur satu kolom yang sederhana untuk pesan utama. Letakkan janji, penjelasan pendukung, dan tindakan utama dalam urutan yang tetap masuk akal saat gambar tidak tersedia. Blok produk tambahan seharusnya mendukung tindakan tersebut, bukan bersaing dengannya.
Pertahankan salinan penting sebagai teks langsung. Pembaca tidak seharusnya memperbesar gambar promosi hanya untuk mengetahui penawaran atau syaratnya. Pilih font yang aman untuk email dan ukuran teks isi yang nyaman; sekitar 16 piksel dapat menjadi titik awal, lalu uji hasil sebenarnya. Terjemahan panjang mungkin memerlukan ruang vertikal tambahan, bukan huruf lebih kecil.
Rancang layar pertama untuk satu keputusan
Buat sketsa versi sempit sebelum mengatur kisi desktop. Untuk peluncuran produk, urutan baca dapat berupa nama produk, satu kalimat kegunaan, gambar pendukung, konteks harga, lalu tombol. Pembaca harus memahami penawaran meski hanya bagian awal yang terlihat. Banner dekoratif besar jangan mendorong semua informasi penting ke beberapa layar gulir di bawahnya.
Mulai teks isi sekitar 16 piksel dengan jarak baris yang nyaman, lalu periksa email yang sudah dikirim. Ini titik awal desain, bukan aturan bahwa semua label dan judul harus berukuran sama. Bedakan teks isi dan judul dengan jelas, serta beri ruang cukup di sekitar tindakan utama. Mengecilkan seluruh template agar muat biasanya bukan solusi yang tepat untuk tata letak padat.
Untuk dua kartu produk, satukan gambar, judul, harga, dan tautan tiap produk dalam komponen yang sama. Saat kartu bertumpuk, pelanggan seharusnya melihat satu produk lengkap sebelum produk berikutnya. Hindari susunan yang menampilkan kedua gambar lebih dulu lalu kedua deskripsi, karena pembaca harus menebak informasi mana milik produk mana.
Biarkan komponen bertambah sesuai isi
Hindari area teks dengan tinggi tetap dan pemisah baris paksa hanya demi menyeimbangkan satu judul desktop. Beri ruang pada tombol untuk label yang lebih panjang dan pastikan seluruh area mudah disentuh. Jarakkan tautan yang berdekatan agar ibu jari tidak memilih tujuan yang keliru.
Gunakan teks alternatif yang menjelaskan gambar informatif dan jangan biarkan gambar dekoratif menambah gangguan. Periksa kontras teks dengan latar sebenarnya, termasuk perubahan mode gelap. Label pucat yang tampak elegan di monitor mungkin sulit dibaca di luar ruangan melalui ponsel.
Gunakan matriks pratinjau yang mengungkap komponen lemah
Matriks yang berguna mencakup tampilan selebar ponsel, layar lebih besar, gambar tidak tersedia, mode gelap bila didukung, dan data pelanggan realistis. Untuk terjemahan, sertakan versi terpanjang, bukan hanya yang terpendek. Lihat email secara utuh lalu periksa bagian yang paling rawan gagal: nama produk, harga, tombol, dan tautan footer.
- Jika label tombol terbungkus, biarkan tinggi tombol bertambah dan periksa jaraknya; jangan memotong kata tindakan.
- Jika nama produk menyentuh blok berikutnya, hilangkan tinggi tetap dan beri ruang agar teks dapat membungkus.
- Jika informasi penting hilang bersama gambar, pindahkan ke teks langsung dan jadikan gambar sebagai pendukung.
- Jika tautan berdekatan sulit disentuh satu per satu, tambah jarak atau kurangi jumlah tindakan yang bersaing.
Sengaja uji kasus kegagalan
Di Sendvio, pratinjau template dengan data pelanggan nyata dan periksa lebar sempit. Coba nama panjang, kolom personalisasi kosong, harga lebih panjang, dan produk dengan judul yang tidak biasa panjang. Kirim uji ke aplikasi email yang umum dipakai pelanggan.
Untuk promosi dua produk, periksa urutan saat bertumpuk: gambar, nama, harga, dan tindakan setiap produk harus tetap bersama. Jika terpisah, sederhanakan bloknya. Tujuannya bukan mempertahankan susunan desktop dengan segala cara, tetapi menjaga makna dan membuat langkah berikutnya jelas tanpa memperbesar layar, menebak, atau menggulir horizontal.
Periksa kontras pada kombinasi teks dan latar sebenarnya. Untuk teks biasa, rasio setidaknya 4,5:1 merupakan acuan aksesibilitas yang berguna; teks besar dapat memakai ambang lebih rendah, 3:1. Nilai ini tidak menggantikan pemeriksaan aksesibilitas menyeluruh, tetapi membantu keputusan warna lebih objektif. Uji label abu-abu kecil seteliti judul utama.
Simpan komponen yang sudah diperbaiki dalam template yang dapat digunakan ulang, lalu uji lagi setelah perubahan besar. Template seluler yang baik bukan sekadar menghindari gulir horizontal; template harus menjaga urutan baca, pemahaman penawaran, dan tindakan berikutnya tetap jelas di lingkungan email yang Anda dukung.