Desain, Template, dan Contoh untuk 2023

Pernahkah Anda membuka email di ponsel dan kualitas gambarnya rendah, teksnya terlalu kecil, dan tombol ajakan bertindak rusak? Itu semua adalah kekurangan dari desain email statis. Email responsif adalah jawabannya.

Mengingat bahwa lebih dari separuh penduduk AS melihat pesan pemasaran email di ponsel mereka, Anda perlu mengoptimalkan email untuk beberapa layar, termasuk ponsel dan tablet.

Email responsif menggunakan gambar dan tabel yang lancar agar tetap fleksibel di berbagai ukuran layar. Pada akhirnya, mereka mengirimkan konten yang dirancang untuk pengalaman optimal setiap pengguna.

Meskipun email responsif dapat dirancang menggunakan kueri media CSS, Anda tidak memerlukan pengalaman pengkodean apa pun untuk membuatnya. Membuat email yang responsif bukan hanya tugas bagi pembuat kode.

Di sini, kami telah menyusun beberapa praktik terbaik dan template siap pakai, serta tutorial singkat tentang dasar-dasar email responsif.

Email responsif juga lebih mudah diakses, karena memungkinkan pelanggan membaca di perangkat pilihan mereka.

Sebagai ilustrasi, berikut adalah tampilan email promosi yang saya terima di desktop.

Email ini memiliki citra yang mengagumkan, ikon yang dapat dibeli, dan diformat dengan baik. Ketika saya membuka email di ponsel, inilah yang saya sambut.

Saya masih memiliki informasi yang sama dan foto serta ikon yang dapat dibeli yang sama. Satu-satunya perbedaan yang mencolok adalah format email. Ini berbeda agar lebih sesuai dengan pengalaman seluler.

Sekarang, bayangkan jika tata letak desktop yang sama diterapkan ke seluler. Saya harus memperbesar ponsel saya untuk melihat gambar atau teks apa pun. Alih-alih melakukan itu, saya akan berhenti berlangganan.

Dengan email yang responsif, pengalaman pengguna dapat ditingkatkan, serta ROI kampanye.

Coba pikirkan: Pelanggan yang puas dengan desain email seluler yang dioptimalkan akan menemukan diri mereka membuka lebih banyak pesan pemasaran karena mereka tahu itu akan dapat diakses dan terlihat bagus.

Jadi, dengan semua pembicaraan tentang email responsif ini, Anda pasti ingin sekali membuatnya sendiri. Selanjutnya, kita akan melihat beberapa contoh dan template email responsif.

Desain Email Responsif

Ada banyak cara untuk mendesain email yang responsif.

Jika Anda memiliki pengetahuan pengkodean, Anda dapat membuat kode template email yang berbeda untuk ukuran layar yang berbeda. Anda juga dapat menggunakan templat siap pakai yang berfungsi untuk semua ukuran layar.

Apa pun pendekatan Anda, Anda memerlukan perangkat lunak pemasaran email. Di sini, Anda dapat mendesain email, lalu mempratinjau email tersebut di beberapa perangkat. Sebagian besar perangkat lunak email akan menunjukkan kepada Anda bagaimana desain akan terlihat di beberapa perangkat.

Video di bawah ini akan memandu Anda tentang cara mendesain email dengan template. Dalam video tersebut, pengguna menggunakan Klaviyo, tetapi konsepnya tetap berlaku, apa pun perangkat lunak yang Anda gunakan.

Pengodean Email yang Responsif

Jika Anda ingin membuat elemen email Anda responsif, Anda harus bekerja dengan kueri media.

Kueri media adalah teknik CSS. Ini memungkinkan Anda menetapkan aturan gaya yang hanya muncul jika kondisi tertentu benar. Misalnya, Anda dapat menentukan ukuran font dan ukuran gambar yang akan digunakan saat layar berukuran lebar 600px atau lebih kecil.

Saat bekerja dengan email, Anda dapat menggunakan kueri media untuk menentukan seperti apa tampilan desain Anda di desktop, tablet, dan perangkat seluler. Untuk melakukannya, Anda harus menentukan hal berikut:

• Gunakan pemilih "@media" dan tentukan "layar". Ini menunjukkan bahwa kode tersebut akan memengaruhi perangkat dengan layar.
• Tetapkan "max-width" Anda dalam piksel. Ini menentukan ukuran layar tempat kode akan diterapkan.
• Tentukan panduan gaya CSS apa pun yang Anda inginkan untuk diikuti oleh layar tertentu.

Mari kita lihat kode di bawah ini.

@layar media dan (maks-lebar: 600px)

tubuh

ukuran font: 30px;

Saat diterapkan ke CSS email, teks isi akan muncul dengan ukuran 30px untuk layar dengan lebar 600px atau lebih kecil.

Meskipun pendekatan ini dapat membantu Anda membuat elemen tertentu dari tanggapan email Anda, sebaiknya gunakan template jika memungkinkan.

Kecuali Anda memiliki pengalaman desain web yang komprehensif, pengkodean beberapa layar media bisa memakan waktu dan membuat frustrasi.

Jika Anda tidak teknis atau menginginkan metode yang lebih mudah, coba gunakan alat pemasaran email dengan template responsif bawaan. Perangkat lunak email gratis HubSpot, misalnya, menyediakan template drag-and-drop yang responsif secara default.

Contoh Desain Email Responsif

Saatnya untuk mengeksplorasi contoh. Mulailah dengan video ini, yang membahas beberapa kampanye pemasaran email terbaik.

Kemudian, Anda dapat membaca tentang beberapa desain email responsif favorit kami.

1. Buletin TOMS

Dalam buletin TOMS, perbedaan utama antara versi desktop dan versi seluler adalah susunan dan ukuran iklan bergambar.

Dengan desain responsif, versi seluler tidak memiliki navigasi yang berantakan, dan gambarnya pas dengan layar. CTA juga telah dipindahkan untuk visibilitas yang lebih baik.

Sumber Gambar

2. Museum Seni Metropolitan

Seperti yang terlihat di buletin TOMS, desain email yang responsif membantu menumpuk konten dengan cara yang menarik secara visual dan mudah dicerna. Contoh dari MET ini tidak berbeda.

Di seluler, posisi menu berubah. Tautan ke berbagai item toko suvenir ada di bagian bawah halaman. Ini membuat gambar suvenir yang tersedia di depan dan tengah.

Sumber Gambar

3. Murbei

Sekali lagi, dengan desain email yang responsif, nama gimnya menumpuk. Ini semua tentang membuat konten mudah dibaca dan menarik secara visual, tidak peduli seberapa kecil perangkat yang digunakan seseorang untuk melihat konten tersebut.

Foto dan teks bergantian masuk akal untuk desktop, sementara penumpukan foto yang konsisten di atas teks terkait untuk seluler, bersama dengan garis pemisah, memastikan pemirsa tidak bingung.

Sumber Gambar

Template Email Responsif

Template yang responsif akan secara otomatis beradaptasi dengan ukuran layar apa pun, sehingga baik email dibuka di smartphone, tablet, atau komputer, akan terlihat bagus dan memiliki fungsionalitas yang lengkap.

Bagi mereka yang memiliki sedikit latar belakang pengkodean atau mereka yang ingin menghabiskan lebih sedikit waktu dengan desain, saran saya adalah menggunakan template. Ini adalah cara jitu untuk memastikan email Anda terlihat profesional dan responsif.

Template email yang responsif menghemat waktu Anda dalam mendesain email yang dapat dipilih dari pilihan. Misalnya, alat pemasaran email HubSpot menyertakan lebih dari 60 template hanya untuk email responsif.

Mari kita lihat beberapa opsi template sekarang.

1.HubSpot

HubSpot menawarkan beberapa template email responsif gratis . Jika Anda pelanggan HubSpot atau pengguna gratis, Anda dapat mengunduh dan mencobanya sendiri.

Misalnya, inilah salah satu template email yang responsif — perhatikan sidebar, tempat Anda dapat melihat pratinjau template di beberapa perangkat.

Sumber Gambar

Mengklik jenis perangkat dan memastikan email Anda diformat dengan benar adalah salah satu langkah terakhir dalam proses desain dan merupakan satu-satunya langkah dalam proses email responsif saat Anda menggunakan perangkat lunak seperti HubSpot.

Dengan mengeklik perangkat smartphone untuk pratinjau, misalnya, Anda dapat melihat apakah konten Anda — termasuk ukuran font dan resolusi gambar — diformat dengan cara yang menyenangkan untuk seluler.

2. Monitor Kampanye

Template yang ditawarkan oleh CampaignMonitor mirip dengan banyak lainnya, di mana hasil email responsif ditampilkan di alat pratinjau. Misalnya, ini adalah template CampaignMonitor:

Sumber Gambar

Anda dapat melihat berbagai perangkat secara berdampingan sehingga Anda dapat membandingkan elemen desain dengan mudah. Pengeditan kecil dapat dilakukan untuk menciptakan pengalaman terbaik bagi semua pelanggan.

Template CampaignMonitor seringkali gratis, jadi ini adalah pilihan yang bagus jika Anda memiliki anggaran minimal.

3. Stripo

Stripo menawarkan lebih dari 300 templat email HTML gratis. Anda dapat memilih template berdasarkan industri, musim, jenis, dan fitur. Misalnya, inilah template dari bagian industri bisnis mereka.

Sumber Gambar

Pertanda bagus dari template email responsif yang solid adalah opsi untuk melihat pratinjau di variasi desktop dan ponsel cerdas, seperti yang ditunjukkan dalam mode pratinjau Stripo.

Perhatikan bagaimana satu tata letak kolom diadopsi dalam pratinjau seluler agar sesuai dengan spesifikasi ponsel.

Stripo adalah situs web yang dapat Anda kunjungi dengan cepat untuk menemukan template yang sesuai dengan tujuan Anda. Anda dapat mempertimbangkan Stripo jika Anda ingin mencoba email responsif atau menginginkan inspirasi desain.

4. Kontak Konstan

Kontak Konstan menawarkan lebih dari 200 templat email profesional yang dapat diakses setelah mendaftar. Dari melihat contoh di bawah ini, Anda dapat melihat bahwa platform ini menawarkan template email yang responsif.

Sumber Gambar

Templat Kontak Konstan memiliki pengeditan seret dan lepas, opsi untuk menambahkan survei, fungsi e-niaga, dan alat pustaka foto. Semua fitur ini dapat membantu membuat email yang ingin dilihat pelanggan.

Sangat membantu untuk menggunakan layanan seperti Kontak Konstan karena alat khusus memungkinkan Anda menjaga konsistensi, seperti pada contoh di atas. Anda dapat mengetahui bahwa sifat email yang responsif tidak mengganggu elemen desain apa pun.

Sekarang kita telah melihat beberapa opsi template, mari kita lihat cara lain untuk membuat email responsif berfungsi, bersama dengan praktik terbaik.

Praktik Terbaik Email Responsif

Desain yang tepat dari email responsif Anda akan bervariasi berdasarkan tujuan kampanye Anda. Namun, tips ini dapat membantu Anda memastikan pengalaman terbaik bagi pembaca Anda.

• Pastikan email responsif Anda terukur dan fleksibel. Pratinjau email di berbagai perangkat untuk memastikan pesan Anda responsif.
• Jika Anda mengodekan email Anda sendiri, ingatlah bahwa kueri media CSS mengubah bidang yang diperbaiki ke bidang yang berubah-ubah.
• Gunakan font yang lebih besar yang akan mudah dibaca di layar yang lebih kecil.
• Tata letak kolom tunggal lebih mudah untuk diskalakan. Jika tata letak sederhana bagus untuk halaman web Anda, pertimbangkan itu untuk email yang responsif.

Pastikan untuk menguji email Anda sebelum menekan "jadwal". Selesaikan desain hanya setelah Anda melihat tampilannya di beberapa resolusi layar. Begitu banyak orang mengakses email melalui ponsel hanya untuk kemudahannya.

Cara sederhana untuk memeriksa keefektifan email Anda adalah dengan mengirimkannya ke diri Anda sendiri atau tim Anda sebagai percobaan — apakah email tersebut dibandingkan dengan email pemasaran responsif lainnya di kotak masuk Anda? Jika demikian, Anda siap mengirim.

Memulai dengan Email Responsif

Email responsif menciptakan pengalaman yang lebih baik dan lebih mudah diakses bagi pelanggan Anda. Jika Anda baru saja melakukan transisi, mulailah dengan menjelajahi template email responsif siap pakai. Ini akan menghemat waktu Anda sambil memberi Anda fleksibilitas desain.

Kemudian, dapatkan pendapat kedua. Minta seorang kolega untuk membuka email di desktop dan telepon mereka. Anda bisa mendapatkan umpan balik yang jujur ​​dari kedua pengalaman tersebut.

Terakhir, jangan takut untuk bereksperimen. Anda dapat menguji A/B berbagai desain responsif hingga Anda menemukan tata letak yang paling sesuai.

Segera, Anda akan mengirimkan email responsif dan meningkatkan tarif terbuka Anda.