Daftar berpoin bisa sangat berguna untuk hierarki konten. Mereka memungkinkan pelanggan untuk dengan cepat dan mudah membaca poin-poin penting dalam email Anda dan dapat membedakan informasi penting dari konten Anda lainnya.
Tetapi seperti yang sering terjadi dalam pengembangan email, sesuatu yang terdengar sangat sederhana—menambahkan daftar berpoin bukanlah ilmu roket, bukan?—ternyata lebih rumit dari yang Anda kira. Tidak semua klien email membuat daftar berpoin dengan cara yang sama. Jadi beberapa pengembang hanya menghindari menggunakan daftar berpoin sama sekali atau menggunakan tabel untuk memaksanya menjadi bentuk—taktik yang dapat menyebabkan sakit kepala besar bagi pelanggan yang menggunakan pembaca layar.
Jika Anda ingin menyertakan daftar berpoin di email Anda dengan cara yang membuatnya dapat diakses dan antipeluru di seluruh klien email, kami memiliki solusi untuk Anda.
Menggunakan tag daftar untuk daftar berpoin
Di sini, di Litmus, kami menggunakan tag daftar ketika kami mengkodekan daftar berpoin di email kami:
<ul> menunjukkan daftar yang tidak diurutkan, atau daftar butir butir
<ol> menunjukkan daftar yang diurutkan, atau daftar item yang diberi nomor
<li> menunjukkan item baris dalam daftar item yang tidak diurutkan atau diurutkan
Jika menerapkan tag daftar di email Anda adalah sesuatu yang Anda minati, baca terus!
Bagaimana memulai dengan daftar berpoin semantik
Untuk memulai dengan daftar berpoin di email Anda, berikut kode minimum yang Anda perlukan untuk membuatnya berfungsi.
Dalam kode ini, Anda akan melihat beberapa hal yang telah kami pastikan untuk disertakan. Salah satunya adalah mengidentifikasi jenis peluru tertentu yang ingin kami sertakan dalam daftar kami, dengan atribut jenis yang ditentukan dalam tag <ul> dan <ol>. Untuk <ul>, kami telah menentukan tombol gaya disk. Untuk <ol>, kami telah menetapkan “A”—jadi item daftar akan diidentifikasi dengan A, B, C, dan seterusnya—tetapi angka dan huruf kecil dan besar serta angka romawi juga dapat digunakan dalam daftar berurutan. Berikut adalah daftar lengkap opsi atribut tipe yang dapat Anda gunakan dalam email:
Opsi jenis daftar tidak berurutan
disc (dibaca sebagai “bullet” • )
lingkaran (dibaca sebagai “lingkaran putih” )
persegi (dibaca sebagai “kotak hitam” ■ )
Opsi jenis daftar yang dipesan
1 (angka desimal default)
A (huruf besar)
a (huruf kecil)
I (angka romawi huruf besar)
i (angka romawi huruf kecil)
Ada beberapa hal yang perlu diperhatikan tentang bagaimana kita menata margin dalam daftar ini. Kami juga menyertakan " margin-left " di kedua daftar. Itu untuk memastikan bahwa peluru merender di dalam batas wadah Anda daripada tidak sejajar atau tidak muncul sama sekali.
Pertimbangan Gmail
Khususnya, email web Gmail (tetapi bukan aplikasi Gmail untuk seluler) adalah satu-satunya klien yang tidak memerlukan margin-kiri untuk memastikan poin dirender di dalam batas yang benar, yang berarti daftar Anda akan menyertakan lekukan kiri ekstra itu. Jika Anda benar-benar membutuhkan daftar berpoin agar rata dengan margin kiri wadah Anda, Anda dapat mengatur ulang margin kiri ke nol dengan kode khusus Gmail seperti:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Seperti yang Anda lihat, kami menyertakan kueri media responsif seluler untuk memastikan bahwa pengaturan ulang margin tidak memengaruhi aplikasi Gmail di seluler. Perhatikan juga urutan penulisan CSS . Jika Anda menempatkan CSS responsif seluler sebelum CSS desktop, maka CSS responsif seluler akan ditolak karena kaskade.
PS: Daftar berpoin semantik secara alami responsif seluler , jadi itu adalah win-win dengan manfaat aksesibilitas!
Menata peluru Anda
Jika Anda berpikir Anda perlu membuat daftar berpoin Anda tetap sederhana (kami menganggapnya hitam, peluru bulat atau hanya 1, 2, 3), Anda salah! Anda dapat melakukan hampir semua hal untuk peluru yang dapat Anda lakukan untuk teks dalam email. Apakah Anda ingin mengubah warna agar sesuai dengan panduan gaya merek Anda? Lanjutkan. Apakah Anda memiliki daftar yang dipesan dan ingin menggunakan font khusus untuk mencocokkan sisa email Anda? Anda pasti bisa dan harus. Untuk daftar apa pun, Anda dapat mengubah ukuran dan warna poin Anda—dan untuk daftar yang diurutkan, Anda juga dapat mengubah font dan menebalkan atau memiringkan angka atau huruf Anda.
Mari kita lihat apa yang dilakukan beberapa gaya itu pada kode asli kita dari sebelumnya.
Gaya ini masih belum tepat. Jika Anda perhatikan, gaya font global yang kami atur sebelumnya untuk setiap daftar ditimpa oleh gaya yang kami tambahkan ke poin itu sendiri. Anda hanya ingin memperbarui gaya peluru , bukan salinan yang datang setelahnya. Ini adalah perbaikan cepat—cukup bungkus teks item daftar dalam tag <span> bergaya untuk mengatur ulang salinan ke gaya font yang diinginkan.
Jauh lebih baik—sekarang Anda dapat memiliki daftar berpoin semantik yang ditata tanpa mengorbankan gaya konten yang Anda daftarkan.
Menyusun daftar Anda
Sekarang setelah Anda tahu cara memasukkan satu daftar berpoin semantik di email Anda, bagaimana dengan daftar bersarang ?
Ini tidak sesulit yang Anda pikirkan untuk memasukkan daftar bersarang tanpa tabel. Anda hanya perlu mengkodekan daftar bersarang seperti biasa, tetapi pastikan daftar tersebut bersarang di dalam tag <li> bukan di luar—jika tidak, Anda mungkin melihat beberapa peluru jahat muncul di klien email seperti Gmail IMAP (GAGA). Berikut tampilan kode tersebut:
Daftar bersarang mewarisi gaya global dari daftar induk, jadi Anda tidak memerlukan spasi atau gaya tambahan untuk menjaga agar daftar tetap konsisten. Namun, penspasian masih bisa rumit—kejutan, kejutan—di Outlook. Berikut adalah tips kami untuk memastikan Anda menjaga jarak Anda seperti yang Anda inginkan:
Untuk spasi horizontal , tambahkan padding-left: #px; dengan dimensi yang benar untuk tag <li>. Ini akan membantu mengontrol jarak antara peluru dan salinan. Plus, jangan lupa untuk menyertakan penunjuk margin-kiri yang disebutkan di awal panduan ini untuk memastikan peluru Anda tidak merender jauh dari salinan Anda.
Catatan: Sayangnya, ini tidak berfungsi untuk Outlook untuk Windows.
Untuk spasi vertikal , tambahkan margin-bottom: #px; dengan dimensi yang benar untuk tag <li>. Ini akan membantu meningkatkan jarak vertikal antara setiap item daftar.
Menggunakan simbol atau gambar khusus untuk peluru
Anda telah menata poin Anda—sekarang coba gunakan gambar atau ikon!
Tidak seperti menata peluru Anda ke ukuran atau font khusus, simbol khusus dan peluru gambar tidak didukung secara universal di seluruh klien email, jadi pastikan untuk melanjutkan dengan hati-hati dan gunakan alat seperti Pratinjau Email Litmus untuk memastikan daftar Anda ditampilkan dengan baik di seluruh perangkat pelanggan.
Untuk kode kami, kami akan mengubah daftar berpoin untuk menyertakan hati, serta logo Litmus kami sendiri untuk beberapa citra khusus.
<head> Metadata
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook untuk Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
aplikasi Gmail
Aplikasi Outlook
Outlook.com
Gmail
Mengapa metode tabel tidak ideal untuk aksesibilitas
Anda pernah mendengar kami mengatakan bahwa Anda harus menghindari penggunaan tabel saat mengkodekan daftar berpoin. Tapi kenapa?
Anda mungkin tahu atau tidak tahu bahwa pembaca layar meningkat secara dramatis dalam popularitas—275 juta orang diperkirakan akan menggunakannya pada tahun 2023. Pelanggan Anda mungkin menggunakan pembaca layar karena mereka memiliki disabilitas yang membutuhkannya, atau karena mereka ingin mendengar email apa mereka miliki saat menyikat gigi di pagi hari.
Dalam hal hierarki konten email Anda, kami menganjurkan penggunaan tag semantik sebanyak mungkin—yaitu, penggunaan yang bermakna dan disengaja dari <h1>, <h2>, dan seterusnya, dibandingkan dengan <p> dan <span generik > tag. Tetapi ketika berbicara tentang tag semantik, satu poin penting bagi pengembang email adalah daftar berpoin atau tidak berurutan.
Pembaca layar mengalami kesulitan membaca email dengan tabel. Jika pembaca layar mengidentifikasi tabel dalam kode email Anda, itu akan dibacakan sebagai satu. Ini benar-benar akan memberi tahu Anda tentang posisi dan konten setiap baris dan kolom. Ini bisa menjadi sedikit berlebihan bagi pelanggan yang mendengarkan email Anda, dan tentu saja membuat mereka sulit untuk mendapatkan konten yang diinginkan. Mari kita lihat daftar bullet ini:
Dikodekan dengan tabel, itu akan terdengar sedikit seperti ini:
Itu… tidak bagus kan? Ketika datang ke daftar berpoin, banyak pengembang memecahkan masalah visual dengan mengkodekan daftar berpoin palsu dalam tabel. Tetapi jika Anda tahu tabel-tabel itu terdengar seperti itu , apakah Anda akan terus mengkodekan daftar Anda seperti itu?
Tidak seperti tabel, tag <ul>, <ol>, dan <li> lebih mudah dipahami oleh pembaca layar. Saat pembaca layar melihat tag ini dalam email yang dibacakan dengan lantang, pembaca layar akan membacakan ini untuk pelanggan Anda:
Untuk memulai daftar, ini akan memberi tahu Anda berapa banyak item yang ada dalam daftar
Ini akan menjelaskan jenis peluru yang digunakan untuk menunjukkan setiap item daftar, dari berikut ini:
Daftar Tidak Berurutan: “ bullet ” untuk type=”disc” , “ white bullet ” untuk type=”circle”, “ black square ” untuk type=”square”
Daftar Berurutan: Karakter alfanumerik terkait atau angka Romawi (Misalnya: " a ", " 2 ", " IV ")
Untuk mengakhiri daftar, itu akan mengatakan " keluar dari daftar "
Misalnya, berikut adalah daftar berpoin yang dapat diakses, dibaca oleh pembaca layar:
Kedengarannya jauh lebih baik daripada mendengar banyak baris dan kolom, bukan? Jauh lebih mudah untuk memahami konten dalam daftar ketika itu dibacakan dengan cara yang sama seperti Anda membaca daftar di dalam kepala Anda, seolah-olah Anda sedang melihat email itu sendiri.
Siap membuat daftar berpoin Anda dapat diakses?
Termotivasi untuk membuat daftar berpoin email Anda dapat diakses dan ingin memastikannya ditampilkan dengan baik di seluruh klien dan perangkat email? Menggunakan alat seperti Pratinjau Email Litmus akan membantu Anda memastikan daftar bullet Anda antipeluru. Selain itu, pemeriksaan aksesibilitas baru kami di Daftar Periksa Litmus membantu Anda langsung melihat apakah email Anda mengikuti praktik terbaik aksesibilitas utama dan mendapatkan saran yang dapat ditindaklanjuti tentang cara membuat email Anda lebih inklusif.
