Jadikan Desain Email Anda Responsif Mobile-Friendly Dalam 5 Langkah Mudah

Apakah Anda ingin buletin email dan kampanye pemasaran Anda terlihat menakjubkan di perangkat apa pun? Tentu saja. Tidak ada seorang pun yang ingin kerja kerasnya tidak terbaca di kotak masuk seseorang. Untungnya, hanya dalam lima langkah, Anda dapat memastikan bahwa email Anda responsif dan siap mengesankan pelanggan. Jadi, ambillah minuman segar, playlist favorit Anda, atau minuman, dan mari kita mulai memastikan minuman tersebut tampil terbaik di layar mana pun.

Tetapkan lebar kolom dalam persentase, bukan piksel

Untuk membuat desain email Anda responsif, atur lebar kolom menggunakan persentase, bukan nilai piksel tetap. Hal ini memungkinkan kolom untuk secara fleksibel menyesuaikan dengan lebar layar yang berbeda.

Gunakan grid cairan

Pendekatan fluid grid menggunakan persentase lebar kolom sehingga dapat diperluas dan dikontrak sesuai kebutuhan berdasarkan ukuran layar. Untuk tata letak dua kolom sederhana, buat kolom kiri lebarnya 60-70% dan kolom kanan lebarnya 30-40%. Misalnya:

<tabel>

<tr>

<td width=”65%”>Konten kolom 1 di sini</td>

<td width=”35%”>Konten kolom 2 di sini</td>

</tr>

</tabel>

Hal ini akan memungkinkan Kolom 1 mengambil 65% dari ruang yang tersedia dan Kolom 2 mengambil 35% sisanya. Pada layar desktop besar, Kolom 1 mungkin memiliki lebar 650 piksel, sedangkan pada layar seluler kecil, lebarnya mungkin hanya 200 piksel. Namun proporsi relatifnya akan tetap sama.

Tambahkan kueri media untuk breakpoint responsif

Kueri media memungkinkan Anda menerapkan aturan penataan gaya yang berbeda berdasarkan lebar layar. Anda dapat menggunakannya untuk melakukan penyesuaian lebih lanjut pada jaringan fluida Anda pada titik henti sementara yang berbeda. Misalnya:

/* Untuk ponsel: */

@layar khusus media dan (lebar maksimal: 600 piksel) {

tabel, td {

lebar: 100% !penting;

}

}

/* Untuk tablet: */

@media saja layar dan (lebar minimum: 601 piksel) dan (lebar maksimal: 900 piksel) {

tabel, td {

lebar: 80% !penting;

}

}

Hal ini akan membuat tabel dan kolom diperluas hingga memenuhi 100% lebar layar pada ponsel kecil dan 80% pada tablet, sehingga membuat desainnya sepenuhnya responsif.

Gunakan gambar dan media yang dapat diubah ukurannya

Untuk membuat desain email Anda ramah seluler, gambar dan media lainnya perlu diubah ukurannya dengan lancar agar sesuai dengan ukuran layar apa pun. Ikuti tip berikut:

Gunakan ukuran gambar responsif

Saat menambahkan gambar ke email Anda, gunakan ukuran gambar responsif. Ini berarti menyediakan beberapa ukuran gambar sehingga klien email dapat memilih ukuran yang tepat untuk layar yang sedang melihatnya.

Misalnya, daripada hanya menyertakan gambar besar dengan lebar 1000 piksel, sertakan juga:

• Ukuran sedang (sekitar 600px)
• Ukuran kecil untuk kolom sempit (sekitar 400px)
• Ukuran kecil untuk layar ponsel kecil (sekitar 200 piksel)

Klien email akan secara otomatis memilih ukuran terbaik untuk layar dan bandwidth. Untuk menentukan beberapa ukuran gambar di email Anda, gunakan atribut <img srcset>.

Jadikan media ramah seluler

Untuk media lain seperti video atau GIF, sediakan juga beberapa pilihan ukuran. Video harus memiliki sumber MP4 dalam resolusi berbeda. GIF dan iframe (seperti penyematan YouTube) harus memiliki batasan lebar yang dapat diubah ukurannya agar sesuai dengan layar mana pun.

Ingatlah kiat-kiat ini dan gambar email Anda, video, dan media lainnya akan ditampilkan dengan indah di perangkat apa pun. Pelanggan Anda akan menghargai email yang tampak bagus dan mudah dibaca di mana pun mereka membukanya.

Ukuran font dalam em, bukan piksel

Untuk membuat desain email Anda ramah seluler, Anda sebaiknya menggunakan ukuran font dalam em, bukan piksel. Piksel adalah unit tetap, jadi jika browser seseorang diperbesar, teksnya bisa terdistorsi. Ems, di sisi lain, adalah unit relatif yang disesuaikan dengan pengaturan pengguna.

Gunakan kerangka email responsif

Kerangka kerja email responsif memiliki komponen bawaan yang secara otomatis diubah ukurannya untuk lebar layar apa pun. Beberapa opsi populer adalah MJML, Foundation for Emails, dan Ink. Kerangka kerja ini menggunakan ems untuk menentukan ukuran, jadi Anda tidak perlu khawatir melakukan konversi sendiri.

Jika tidak menggunakan kerangka kerja, ubah piksel menjadi ems

Jika Anda ingin kontrol penuh atas CSS Anda dan memilih untuk tidak menggunakan kerangka kerja, Anda harus mengonversi ukuran piksel apa pun menjadi em. Begini caranya:

1. Tentukan ukuran font dasar Anda dalam piksel. Katakanlah itu 16px.
2. Ubah itu menjadi ems. 1em = 16px (ukuran dasar Anda), jadi 16px = 1em.
3. Ukuran apa pun yang ingin Anda gunakan, bagi dengan 16px dan kalikan dengan 1em. Misalnya, untuk judul 24px, 24px/16px = 1,5em.
4. Ganti semua ukuran piksel di CSS Anda dengan em yang setara.

Sejajarkan konten Anda secara responsif

Untuk membuat desain email Anda responsif, Anda perlu menyelaraskan konten Anda agar ditampilkan dengan benar di ukuran layar apa pun. Ikuti langkah ini:

Gunakan pengukuran cairan

Daripada menggunakan lebar piksel tetap untuk kolom, gambar, dan wadah, gunakan persentase. Ini akan memungkinkan konten Anda diskalakan secara proporsional berdasarkan lebar layar. Misalnya, alih-alih menggunakan gambar dengan lebar=”600px”, gunakan lebar=”50%”.

Hindari penataan rambut yang berat

Buat email Anda tetap sederhana dengan membatasi penggunaan gaya khusus, yang tidak akan ditampilkan dengan benar di beberapa klien email. Andalkan tabel HTML dasar, gaya sebaris, dan atribut align untuk tata letak. Pusatkan elemen bila diperlukan.

Mengikuti langkah-langkah praktis ini akan memastikan konten email Anda ditampilkan dengan indah, apa pun perangkat yang digunakan pembaca Anda untuk membuka kotak masuk mereka. Menciptakan pengalaman desain email responsif yang luar biasa untuk pelanggan Anda sepadan dengan usaha yang dilakukan.

Uji, uji, dan uji lagi

Periksa tampilannya di perangkat seluler

Kita semua tahu mayoritas orang menggunakan perangkat seluler mereka untuk mengakses email. Jadi untuk memastikan email Anda ramah seluler, uji email Anda dengan mengirimkannya ke ponsel yang berbeda. Periksa di Android, iPhone, dan tablet. Periksa bagaimana gambar, tombol, dan teks ditampilkan dalam mode potret dan lanskap.

Uji pada klien email utama

Tidak semua klien email menampilkan email dengan cara yang sama. Lakukan pengujian pada Gmail, Outlook, Yahoo Mail, dan layanan email utama lainnya yang biasa digunakan pelanggan Anda. Cari masalah apa pun terkait cara gambar, tautan tersemat, tombol, atau elemen interaktif lainnya ditampilkan. Edit kode Anda untuk memperbaiki masalah tampilan dan memastikan konsistensi di seluruh klien.

Periksa bagaimana konten cadangan muncul

Untuk pelanggan dengan gambar yang dinonaktifkan di klien emailnya, konten cadangan Anda akan muncul di tempat gambar. Periksa kembali apakah semua teks alternatif, keterangan gambar, dan deskripsi gambar masuk akal dan memberikan konteks untuk konten email Anda. Konten cadangan tetap akan memberikan pengalaman pembaca yang baik, bahkan tanpa gambar.

Tinjau layanan rendering email

Gunakan layanan pengujian rendering email gratis seperti Litmus, Email on Acid, atau Moseso untuk melihat bagaimana desain email Anda ditampilkan di berbagai klien email dan perangkat sekaligus. Mereka memberikan laporan yang menyoroti masalah apa pun yang harus diatasi untuk meningkatkan daya tanggap email Anda. Buat perubahan pada kode Anda dan unggah ulang email percobaan hingga laporan kembali bersih.

Periksa kembali tautan dan elemen interaktif

Tautan, tombol, dan komponen interaktif lainnya yang tersemat di email Anda harus berfungsi dengan baik di semua platform. Periksa kembali apakah tautan mengarah ke tujuan yang diinginkan dan tombol atau formulir apa pun berfungsi seperti yang diharapkan. Uji beberapa kali untuk memastikan tidak ada tautan yang rusak atau elemen yang tidak berfungsi sebelum meluncurkan kampanye Anda.

Pengujian dan penyesuaian yang konstan diperlukan untuk menyempurnakan desain responsif email Anda. Namun melakukan upaya di awal akan menghasilkan email dengan jangkauan luas dan keterlibatan tinggi di semua perangkat pelanggan dan klien email Anda.

Memecahkan masalah umum email responsif

Konten melimpah di perangkat seluler

• Gunakan tata letak kolom tunggal. Beberapa kolom jarang berfungsi dengan baik secara responsif di email.
• Jaga agar paragraf dan bagian tetap pendek dan ringkas. Blok teks yang panjang sulit dibaca di layar kecil.
• Gunakan poin-poin dan daftar bernomor jika memungkinkan. Mereka memakan lebih sedikit ruang dibandingkan paragraf.
• Sembunyikan konten sekunder di layar kecil. Anda dapat menggunakan kueri media untuk menampilkan/menyembunyikan konten berdasarkan lebar layar.

Masalah lebar email

Beberapa klien email lama mempunyai masalah dengan lebar email responsif. Untuk memperbaikinya:

1. Tetapkan lebar maksimal pada wadah email Anda. Kami merekomendasikan 600px untuk sebagian besar email.
2. Tambahkan !important setelah deklarasi lebar untuk mengganti beberapa CSS klien email. Misalnya:
3. Tambahkan kode cadangan untuk Outlook 2007-2013. Versi lama ini memerlukan gaya terpisah:

Mengikuti tip pemecahan masalah ini akan menyelesaikan sebagian besar masalah email responsif yang umum. Beri tahu saya jika Anda memiliki pertanyaan lain!

Kesimpulan

Ini adalah beberapa cara sederhana untuk memastikan email Anda responsif. Ingatlah bahwa saat ini lebih dari 50% email dibuka melalui perangkat seluler, jadi mengoptimalkan ukuran layar yang lebih kecil sangatlah penting. Tinjau semua template Anda untuk email dan buat perubahan apa pun yang diperlukan pada ukuran font serta ukuran dan spasi gambar. Penerima Anda akan senang menerima email yang dapat mereka baca dan berinteraksi dengan perangkat apa pun yang mereka gunakan.