HTML E-postasında Madde İşaretli Listeler İçin En İyi Kılavuz
HTML E-postasında Madde İşaretli Listeler İçin En İyi Kılavuz
Yayınlanan: 2019-09-06
Madde imli listeler, içerik hiyerarşisi için inanılmaz derecede faydalı olabilir. Abonelerin e-postanızdaki önemli noktaları hızlı ve kolay bir şekilde okumasına olanak tanır ve önemli bilgileri içeriğinizin geri kalanından ayırabilir.
Ama çok sık e-posta geliştirme, şey gibi o sesler basit ekleyerek, roket bilimi olamaz o madde işaretli liste edebilir? Düşündüğünüzden daha yanıltıcıdır olduğu ortaya -turns böylece. Tüm e-posta istemcileri madde işaretli listeleri aynı şekilde oluşturmaz. Bu nedenle, bazı geliştiriciler madde işaretli listeleri tamamen kullanmaktan kaçınır veya onları şekle sokmak için tablolar kullanır; bu, ekran okuyucu kullanan aboneler için büyük baş ağrısına neden olabilecek bir taktiktir.
E-posta istemcileri arasında erişilebilir ve kurşun geçirmez hale getirecek şekilde e-postalarınıza madde işaretli listeler eklemek istiyorsanız, sizin için bir çözümümüz var.
Madde işaretli listeler için liste etiketlerini kullanma
Burada Litmus'ta, e-postalarımızda madde işaretli listeleri kodlarken liste etiketlerini kullanırız:
<ul> sırasız bir listeyi veya madde işaretli bir öğe listesini belirtir
<ol> sıralı bir listeyi veya numaralı bir öğe listesini belirtir
<li> , sırasız veya sıralı bir öğe listesindeki bir satır öğesini belirtir
E-postalarınıza liste etiketleri uygulamak ilgilendiğiniz bir şeyse, okumaya devam edin!
Anlamsal madde işaretli listelere nasıl başlanır?
E-postalarınızda madde işaretli listeler kullanmaya başlamak için, bunları çalıştırmak için ihtiyacınız olan minimum kod burada.
Bu kodda, eklediğimizden emin olduğumuz birkaç şey fark edeceksiniz. Bunlardan biri, listemize dahil etmek istediğimiz belirli madde işareti türünü <ul> ve <ol> etiketlerinde tanımlanmış bir tür özniteliği ile belirlemektir. <ul> için disk stili bir düğme belirledik. <ol> için, “A”yı belirledik—böylece liste öğeleri A, B, C vb. ile tanımlanacaktı— ancak sıralı listelerde sayılar ve hem küçük hem de büyük harfler ve romen rakamları da kullanılabilir. E-postada kullanabileceğiniz tür özelliği seçeneklerinin tam listesi:
Sırasız liste türü seçenekleri
disk (“mermi” olarak okuyun • )
daire ("beyaz daire" olarak okuyun ○ )
kare ("siyah kare" olarak okuyun ■ )
Sıralı liste tipi seçenekleri
1 (varsayılan ondalık sayı)
A (büyük harf)
a (küçük harf)
I (büyük roma rakamı)
i (küçük roma rakamı)
Bu listelerde kenar boşluğunu nasıl şekillendirdiğimize dair birkaç not var. Her iki listeye de “ sol kenar boşluğu ” nu ekledik. Bu, mermilerin yanlış hizalamak veya hiç görünmemek yerine kapsayıcı sınırlarınızın içinde işlendiğinden emin olmak içindir.
Gmail'de Dikkat Edilmesi Gereken Hususlar
Özellikle, Gmail web posta (mobil için değil Gmail uygulaması) marjı-sol mermi doğru sınırları içine işlemek sağlamak için, bu ekstra sol girinti içerecek listelerinizi demektir gerekmez tek bir müşteri. Madde işaretli listelerinizin kapsayıcınızın sol kenar boşluğuyla aynı hizada olmasına kesinlikle ihtiyacınız varsa, aşağıdaki gibi Gmail'e özgü kodla sol kenar boşluğunu sıfıra sıfırlayabilirsiniz:
<head> CSS'si
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Gördüğünüz gibi, marj sıfırlamanın mobil cihazlarda Gmail uygulamasını etkilememesini sağlamak için mobil duyarlı medya sorgusunu ekledik. Ayrıca, lütfen CSS'nin yazıldığı sıraya dikkat edin . Mobil uyumlu CSS'yi masaüstü CSS'den önce koyarsanız, kademeli nedeniyle mobil uyumlu CSS geçersiz kılınır.
Not: Semantik madde işaretli listeler doğal olarak mobil duyarlıdır , bu nedenle erişilebilirlik avantajlarıyla bir kazan-kazan!
Mermilerinizi şekillendirmek
Madde işaretli listelerinizi basit tutmanız gerektiğini düşünüyorsanız (siyah, yuvarlak madde işaretleri veya sadece 1, 2, 3 düşünüyoruz), yanılıyorsunuz! E-postalardaki metinlere yapabileceğiniz hemen hemen her şeyi madde işaretleri için yapabilirsiniz. Rengi markanızın stil rehberine uyacak şekilde değiştirmek ister misiniz? Devam etmek. Sıralı bir listeniz var ve e-postanızın geri kalanıyla eşleşmesi için özel bir yazı tipi mi kullanmak istiyorsunuz? Kesinlikle yapabilirsin ve yapmalısın. Herhangi bir liste için madde işaretlerinin boyutunu ve rengini değiştirebilirsiniz ve sıralı listeler için yazı tipini değiştirebilir ve sayılarınızı veya harflerinizi kalın veya italik yazabilirsiniz.
Bu stilin bir kısmının daha önceki orijinal kodumuza ne yaptığını görelim.
Bu stil henüz tam olarak doğru değil. Dikkat ederseniz, her liste için daha önce belirlediğimiz genel yazı tipi stili, madde işaretlerinin kendisine eklediğimiz stil tarafından geçersiz kılındı. Madde işaretinin stilini güncellemek istiyorsunuz, ondan sonra gelen kopyayı değil. Bu hızlı bir düzeltmedir; kopyayı istenen yazı tipi stiline sıfırlamak için liste öğelerinin metnini stillendirilmiş bir <span> etiketine sarmanız yeterlidir.
Çok daha iyi—şimdi, listelenen içeriğinizin stilinden ödün vermeden stilize anlamsal madde işaretli listelere sahip olabilirsiniz.
Listelerinizi yerleştirme
Artık e-postanıza anlamsal madde işaretli bir listeyi nasıl ekleyeceğinizi bildiğinize göre, iç içe bir listeye ne dersiniz?
Tablolar olmadan iç içe listeleri dahil etmek düşündüğünüz kadar zor değil. Yalnızca iç içe listenizi normalde yaptığınız gibi kodlamanız gerekir, ancak bunun dışarısı yerine bir <li> etiketi içinde iç içe geçtiğinden emin olun; aksi takdirde Gmail IMAP (GANGA) gibi e-posta istemcilerinde bazı hileli madde işaretlerinin göründüğünü görebilirsiniz. İşte bu kodun nasıl görüneceği:
İç içe listeler, üst listelerin genel stilini devralır, bu nedenle listeleri tutarlı tutmak için herhangi bir ek boşluk veya stile ihtiyacınız yoktur. Bununla birlikte, Outlook'ta boşluk bırakmak hala yanıltıcı olabilir (sürpriz, sürpriz). Boşluğu istediğiniz gibi tuttuğunuzdan emin olmak için ipuçlarımız:
Yatay boşluk için , padding-left: #px; <li> etiketine doğru boyutla. Bu, madde işareti ile kopya arasındaki boşluğu kontrol etmeye yardımcı olacaktır. Ayrıca, madde işaretlerinizin kopyanızdan çok uzakta görüntülenmemesini sağlamak için bu kılavuzun başında bahsedilen sol kenar boşluğu işaretçisini eklemeyi unutmayın.
Not: Ne yazık ki bu, Windows için Outlook'ta çalışmaz.
Dikey boşluk için , margin-bottom: #px; <li> etiketine doğru boyutla. Bu, her liste öğesi arasındaki dikey aralığı artırmaya yardımcı olacaktır.
Madde işaretleri için özel semboller veya resimler kullanma
Madde işaretlerinizi şekillendirdiniz; şimdi bunun yerine resim veya simgeler kullanmayı deneyin!
Madde işaretlerinizi özel bir boyuta veya yazı tipine göre şekillendirmenin aksine, özel sembol ve resim madde işaretleri e-posta istemcileri arasında evrensel olarak desteklenmez, bu nedenle dikkatli ilerlediğinizden ve listelerinizin web sitenizde iyi görüntülendiğinden emin olmak için Litmus E-posta Önizlemeleri gibi bir araç kullandığınızdan emin olun. abonelerin cihazları.
Kodumuz için madde işaretli listelerimizi kalpleri ve ayrıca bazı özel görüntüler için kendi Litmus logomuzu içerecek şekilde değiştireceğiz.
<head> Meta Verileri
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Windows için Outlook (2007, 2010, 2013, 2016, 2019)
Windows 10
Gmail uygulaması
Outlook uygulaması
Outlook.com
Gmail
Tablo yöntemi neden erişilebilirlik için ideal değil?
Madde işaretli listeleri kodlarken tablo kullanmaktan kaçınmanız gerektiğini söylediğimizi duydunuz. Ama neden?
Ekran okuyucuların popülaritesinin çarpıcı bir şekilde arttığını biliyor veya bilmiyor olabilirsiniz - 2023 yılına kadar 275 milyon kişinin bunları kullanacağı tahmin ediliyor. Aboneleriniz, ekran okuyucuları, bunu gerektiren bir engelleri olduğu veya hangi e-postaları duymak istedikleri için kullanıyor olabilir. sabah dişlerini fırçalarken yaparlar.
E-postanızın içerik hiyerarşisi söz konusu olduğunda, mümkün olduğunca semantik etiketlerin kullanılmasını savunuyoruz; yani, genel <p> ve <span yerine <h1>, <h2> ve benzerlerinin anlamlı ve kasıtlı kullanımı. > etiketler. Ancak semantik etiketler söz konusu olduğunda, e-posta geliştiricileri için bir sorun, madde işaretli veya sırasız listedir.
Ekran okuyucular, tablolar içeren e-postaları okurken sorun yaşar. Bir ekran okuyucu, e-posta kodunuzdaki bir tabloyu tanımlarsa, bir tablo gibi yüksek sesle okuyacaktır. Kelimenin tam anlamıyla size her satırın ve sütunun konumu ve içeriği hakkında bilgi verecektir. Bu, e-postalarınızı dinleyen aboneler için biraz fazla olabilir ve amaçlanan içeriği toplamalarını kesinlikle zorlaştırıyor. Bu madde işaretli listeye bakalım:
Tablolarla kodlanmış, kulağa biraz şöyle gelebilir:
Bu… harika değil, değil mi? Madde işaretli listeler söz konusu olduğunda, birçok geliştirici görsel sorunu sahte madde işaretli listeleri tablolarda kodlayarak çözmektedir. Böyle kulağa bu tabloları bilselerdi Ancak sizin de listeler yolu o koda devam edeceğini?
Tabloların aksine <ul>, <ol> ve <li> etiketlerini bir ekran okuyucunun anlaması çok daha kolaydır. Bir ekran okuyucu, yüksek sesle okuduğu bir e-postada bu etiketleri gördüğünde, abonelerinize şunu okur:
Bir listeye başlamak için size listede kaç tane öğe olduğunu söyleyecektir.
Aşağıdakilerden her liste öğesini belirtmek için kullanılan madde işaretinin türünü açıklayacaktır:
Sırasız Listeler: “mermi” türü için type =”daire”, ‘siyah kare’türündeki”disk”, ‘beyaz mermi’ için =”kare”
Sıralı Listeler: İlişkili alfanümerik karakter veya Romen rakamı (Örneğin: “ a ”, “ 2 ”, “ IV ”)
Listeyi bitirmek için " liste dışı " yazacaktır.
Örneğin, bir ekran okuyucu tarafından okunan erişilebilir madde işaretli bir liste:
Bu, bir sürü satır ve sütun duymaktan çok daha iyi geliyor, değil mi? Listeleri yüksek sesle okunduğunda, listeyi kafanızın içinde, e-postaya bakıyormuşsunuz gibi okuduğunuz gibi, listelerdeki içeriği anlamak çok daha kolaydır.
Madde işaretli listelerinizi erişilebilir hale getirmeye hazır mısınız?
E-postanızın madde işaretli listesini erişilebilir kılmak için motive oldunuz ve e-posta istemcileri ve cihazları arasında iyi sonuç verdiğinden emin olmak mı istiyorsunuz? Litmus Email Previews gibi bir araç kullanmak, madde işaretli listenizin kurşun geçirmez olmasını sağlamanıza yardımcı olacaktır. Ayrıca, Litmus Kontrol Listesindeki yeni erişilebilirlik kontrollerimiz, e-postalarınızın erişilebilirlikle ilgili en iyi uygulamaları takip edip etmediğini anında görmenize ve e-postalarınızı nasıl daha kapsayıcı hale getirebileceğiniz konusunda uygulanabilir tavsiyeler almanıza yardımcı olur.
