Kompletny przewodnik po listach punktowanych w wiadomościach e-mail w formacie HTML
Kompletny przewodnik po listach punktowanych w wiadomościach e-mail w formacie HTML
Opublikowany: 2019-09-06
Listy punktowane mogą być niezwykle przydatne w hierarchii treści. Pozwalają subskrybentom szybko i łatwo odczytać kluczowe punkty w wiadomości e-mail i mogą oddzielić ważne informacje od reszty treści.
Ale jak to często bywa w przypadku tworzenia wiadomości e-mail, coś, co brzmi tak prosto — dodanie listy punktowanej nie może być nauką rakietową, prawda? — okazuje się trudniejsze, niż mogłoby się wydawać. Nie wszystkie klienty poczty e-mail wyświetlają listy punktowane w ten sam sposób. Dlatego niektórzy programiści po prostu całkowicie unikają używania list punktowanych lub używają tabel do wymuszania ich kształtu – taktyka, która może przysporzyć dużego bólu głowy subskrybentom korzystającym z czytników ekranu.
Jeśli chcesz umieszczać listy punktowane w swoich wiadomościach e-mail w sposób, który sprawi, że będą one dostępne i odporne na kule w różnych klientach poczty e-mail, mamy dla Ciebie rozwiązanie.
Używanie tagów list do list punktowanych
W Litmus używamy tagów list, kiedy kodujemy listy punktowane w naszych e-mailach:
<ul> oznacza listę nieuporządkowaną lub wypunktowaną listę elementów
<ol> wskazuje uporządkowaną listę lub ponumerowaną listę pozycji
<li> wskazuje pozycję na nieuporządkowanej lub uporządkowanej liście pozycji
Jeśli interesuje Cię implementacja tagów list w wiadomościach e-mail, czytaj dalej!
Jak zacząć korzystać z semantycznych list punktowanych
Aby zacząć korzystać z list punktowanych w wiadomościach e-mail, podajemy minimalny kod, który jest potrzebny do ich działania.
W tym kodzie zauważysz kilka rzeczy, które zadbaliśmy o uwzględnienie. Jednym z nich jest zidentyfikowanie konkretnego typu punktora, który chcemy umieścić na naszej liście, za pomocą zdefiniowanego atrybutu type w tagach <ul> i <ol>. Dla <ul> określiliśmy przycisk w stylu dysku. W przypadku <ol> określiliśmy „A” — aby elementy listy były identyfikowane za pomocą A, B, C itd. — ale w uporządkowanych listach można również używać liczb, małych i wielkich liter oraz cyfr rzymskich. Oto pełna lista opcji atrybutów typu , których można użyć w wiadomości e-mail:
Nieuporządkowane opcje typu listy
dysk (czytaj jako „pocisk” • )
kółko (czytaj jako „białe kółko” ○ )
kwadrat (czytaj „czarny kwadrat” ■ )
Uporządkowane opcje typu listy
1 (domyślna liczba dziesiętna)
A (wielkie litery)
a (małe litery)
I (wielka cyfra rzymska)
ja (mała cyfra rzymska)
Należy zwrócić uwagę na kilka rzeczy związanych ze stylem marginesu na tych listach. Na obu listach uwzględniliśmy również „ margines lewy ”. Ma to na celu upewnienie się, że pociski renderują się wewnątrz granic kontenera, a nie są źle wyrównane lub w ogóle się nie pojawiają.
Uwagi dotyczące Gmaila
Warto zauważyć, że poczta internetowa Gmaila (ale nie aplikacja Gmail dla telefonów komórkowych) to jedyny klient, który nie wymaga marginesu lewego, aby punktory były renderowane we właściwych granicach, co oznacza, że listy będą zawierać dodatkowe wcięcie z lewej strony. Jeśli absolutnie potrzebujesz, aby listy punktowane były równo z lewym marginesem kontenera, możesz zresetować lewy margines do zera za pomocą kodu specyficznego dla Gmaila, w następujący sposób:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Jak widać, uwzględniliśmy zapytanie o media responsywne na telefon komórkowy, aby upewnić się, że resetowanie marginesu nie wpłynie na aplikację Gmail na telefonie komórkowym. Zwróć też uwagę na kolejność pisania CSS . Jeśli umieścisz CSS responsywny dla urządzeń mobilnych przed CSS dla komputerów stacjonarnych, CSS responsywny dla urządzeń mobilnych zostanie unieważniony ze względu na kaskadę.
PS: Semantyczne listy punktowane są naturalnie dostosowane do urządzeń mobilnych , więc jest to korzystne dla wszystkich korzyści z ułatwień dostępu!
Stylizacja pocisków
Jeśli uważasz, że listy punktowane powinny być proste (mamy na myśli czarne, okrągłe punktory lub tylko 1, 2, 3), to się mylisz! Z punktorami możesz zrobić praktycznie wszystko, co możesz zrobić z tekstem w wiadomościach e-mail. Czy chcesz zmienić kolor, aby pasował do przewodnika stylu Twojej marki? Zacząć robić. Czy masz uporządkowaną listę i chcesz użyć niestandardowej czcionki pasującej do reszty wiadomości e-mail? Zdecydowanie możesz i powinieneś. W przypadku dowolnej listy możesz zmienić rozmiar i kolor punktorów, a w przypadku list uporządkowanych możesz zmienić czcionkę i pogrubienie lub kursywę również w liczbach lub literach.
Zobaczmy, co niektóre z tych stylów robią z naszym oryginalnym kodem z wcześniejszych czasów.
Jednak ta stylizacja nie jest jeszcze do końca właściwa. Jeśli zauważysz, globalny styl czcionki, który ustawiliśmy wcześniej dla każdej listy, został zastąpiony przez styl, który dodaliśmy do samych punktorów. Chcesz tylko zaktualizować styl punktora , a nie kopię, która pojawia się po nim. Jest to szybkie rozwiązanie — wystarczy zawinąć tekst elementów listy stylizowanym tagiem <span>, aby zresetować kopię do zamierzonego stylu czcionki.
Dużo lepiej — teraz możesz mieć stylizowane semantyczne listy punktowane bez uszczerbku dla stylu treści na liście.
Zagnieżdżanie list
Skoro już wiesz, jak dołączyć do wiadomości e-mail semantyczną listę punktowaną, co powiesz na listę zagnieżdżoną ?
Uwzględnienie list zagnieżdżonych bez tabel nie jest aż tak trudne, jak myślisz. Wystarczy zakodować zagnieżdżoną listę w normalny sposób, ale upewnij się, że jest ona zagnieżdżona w tagu <li>, a nie na zewnątrz — w przeciwnym razie w klientach poczty e-mail, takich jak Gmail IMAP (GANGA), mogą pojawić się nieuczciwe punktory. Oto jak wyglądałby ten kod:
Listy zagnieżdżone dziedziczą globalny styl list nadrzędnych, więc nie potrzebujesz żadnych dodatkowych odstępów ani stylów, aby zachować spójność list. Jednak odstępy mogą być nadal trudne — niespodzianka, niespodzianka — w programie Outlook. Oto nasze wskazówki, dzięki którym zachowasz odpowiednie odstępy:
Aby uzyskać odstępy w poziomie , dodaj padding-left: #px; z prawidłowym wymiarem tagu <li>. Pomoże to kontrolować odstępy między punktorem a kopią. Ponadto nie zapomnij dołączyć wskaźnika lewego marginesu, o którym mowa na początku tego przewodnika, aby upewnić się, że pociski nie będą renderowane daleko od kopii.
Uwaga: Niestety nie działa to w programie Outlook dla systemu Windows.
W przypadku odstępów w pionie dodaj margines-dolny: #px; z prawidłowym wymiarem tagu <li>. Pomoże to zwiększyć odstępy w pionie między poszczególnymi elementami listy.
Używanie niestandardowych symboli lub obrazów do punktorów
Wystylizowałeś punktory — teraz spróbuj zamiast tego użyć obrazów lub ikon!
W przeciwieństwie do stylizacji punktorów na niestandardowy rozmiar lub czcionkę, niestandardowe symbole i punktory graficzne nie są tak powszechnie obsługiwane w klientach poczty e-mail, więc zachowaj ostrożność i użyj narzędzia takiego jak Lakmusowy podgląd wiadomości e-mail, aby upewnić się, że listy dobrze renderują się w urządzenia abonentów.
W naszym kodzie zmienimy nasze listy punktowane, aby zawierały serca, a także nasze własne logo Litmus dla niektórych niestandardowych obrazów.
<head> Metadane
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook dla Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Aplikacja Gmail
Aplikacja Outlook
Outlook.com
Gmail
Dlaczego metoda tabelowa nie jest idealna dla ułatwień dostępu
Słyszeliście, jak mówiliśmy, że należy unikać używania tabel podczas kodowania list punktowanych. Ale dlaczego?
Możesz wiedzieć, ale nie musisz, że czytniki ekranowe stają się coraz bardziej popularne — przewiduje się, że do 2023 r. będzie ich używać 275 milionów ludzi. Twoi subskrybenci mogą korzystać z czytników ekranowych, ponieważ wymagają ich niepełnosprawności lub chcą słyszeć, jakie e-maile mają podczas mycia zębów rano.
Jeśli chodzi o hierarchię treści wiadomości e-mail, zalecamy używanie w jak największym stopniu tagów semantycznych — czyli sensowne i celowe użycie <h1>, <h2> itd., w przeciwieństwie do ogólnych <p> i <span > tagi. Ale jeśli chodzi o tagi semantyczne, dla twórców poczty e-mail punktem spornym jest lista punktowana lub nieuporządkowana.
Czytniki ekranu mają problem z odczytaniem wiadomości e-mail z tabelami. Jeśli czytnik ekranu zidentyfikuje tabelę w kodzie wiadomości e-mail, zostanie ona odczytana na głos jako jedna. Dosłownie opowie Ci o pozycji i zawartości każdego wiersza i każdej kolumny. To może być trochę za dużo dla subskrybentów słuchających twoich e-maili, a to z pewnością utrudnia im zebranie zamierzonej treści. Spójrzmy na tę listę punktowaną:
Zakodowane za pomocą tabel, brzmiałoby to trochę tak:
To… nie jest świetne , prawda? Jeśli chodzi o listy punktowane, wielu programistów rozwiązuje problem wizualny, kodując fałszywe listy punktowane w tabelach. Ale jeśli wiedział tych tabel brzmiały tak, byś nadal kodem z listy w ten sposób?
W przeciwieństwie do tabel, znaczniki <ul>, <ol> i <li> są znacznie łatwiejsze do zrozumienia dla czytnika ekranu. Gdy czytnik ekranu zobaczy te tagi w e-mailu, który czyta na głos, odczyta to subskrybentom:
Aby rozpocząć listę, powie Ci, ile pozycji jest na liście
Opisuje typ punktora używanego do oznaczenia każdego elementu listy, z następujących:
Listy nieuporządkowane: „ punktor ” dla typu=”dysk” , „ biały punktor ” dla typu=”koło”, „ czarny kwadrat ” dla typu=”kwadrat”
Listy uporządkowane: powiązany znak alfanumeryczny lub cyfra rzymska (na przykład: „ a ”, „ 2 ”, „ IV ”)
Aby zakończyć listę, powie „ poza listą ”
Na przykład oto dostępna lista punktowana, odczytana przez czytnik ekranu:
To brzmi znacznie lepiej niż słuchanie całej masy wierszy i kolumn, prawda? Znacznie łatwiej jest zrozumieć zawartość list, gdy jest ona czytana na głos w taki sam sposób, w jaki czyta się listę w głowie, tak jakbyś patrzył na samą wiadomość e-mail.
Chcesz udostępnić swoje listy punktowane?
Chcesz udostępnić listę punktowaną wiadomości e-mail i chcesz się upewnić, że będzie ona dobrze renderować się w klientach poczty e-mail i na urządzeniach? Korzystanie z narzędzia takiego jak Litmus Email Previews pomoże Ci upewnić się, że Twoja lista punktowana jest kuloodporna. Ponadto nasze nowe kontrole dostępności na Liście kontrolnej Litmus pomagają natychmiast sprawdzić, czy Twoje e-maile są zgodne z najważniejszymi najlepszymi praktykami ułatwień dostępu i uzyskać przydatne porady, jak sprawić, by Twoje e-maile były bardziej inkluzywne.
