Ghidul suprem pentru listele cu marcatori în e-mailul HTML
Ghidul suprem pentru listele cu marcatori în e-mailul HTML
Publicat: 2019-09-06
Listele cu marcatori pot fi incredibil de utile pentru ierarhia conținutului. Acestea permit abonaților să citească rapid și ușor punctele cheie din e-mailul dvs. și pot separa informațiile importante de restul conținutului dvs.
Dar, ca atât de des în dezvoltarea de e-mailuri, ceva care sună atât de simplu - adăugarea unei liste cu marcatori nu poate fi știință rachetă, nu-i așa? - se dovedește a fi mai complicat decât ați crede. Nu toți clienții de e-mail redă listele cu marcatori în același mod. Așa că unii dezvoltatori evită pur și simplu să folosească listele cu marcatori sau folosesc tabele pentru a le forța să se formeze - o tactică care poate provoca mari bătăi de cap abonaților care folosesc cititoare de ecran.
Dacă doriți să includeți liste cu marcatori în e-mailurile dvs. într-un mod care să le facă accesibile și rezistente la gloanț pentru clienții de e-mail, avem soluția pentru dvs.
Utilizarea etichetelor de listă pentru listele cu marcatori
Aici, la Litmus, folosim etichete de listă atunci când codificăm liste cu marcatori în e-mailurile noastre:
<ul> indică o listă neordonată sau o listă cu marcatori de articole
<ol> indică o listă ordonată sau o listă numerotată de articole
<li> indică un element rând într-o listă de articole neordonată sau ordonată
Dacă implementarea etichetelor de listă în e-mailurile dvs. este ceva care vă interesează, citiți mai departe!
Cum să începeți cu listele semantice cu marcatori
Pentru a începe cu listele cu marcatori în e-mailurile dvs., iată codul minim de care aveți nevoie pentru a le face să funcționeze.
În acest cod, veți observa câteva lucruri pe care ne-am asigurat că le includem. Unul dintre acestea este identificarea tipului specific de marcator pe care suntem interesați să îl includem în lista noastră, cu un atribut de tip definit în etichetele <ul> și <ol>. Pentru <ul>, am specificat un buton în stil disc. Pentru <ol>, am specificat „A”—deci articolele din listă ar fi identificate cu A, B, C și așa mai departe—dar numerele și atât litere mici, cât și majuscule și cifre romane pot fi, de asemenea, folosite în liste ordonate. Iată lista completă a opțiunilor de atribute de tip pe care le puteți utiliza în e-mail:
Opțiuni de tip de listă neordonate
disc (a se citi „glonț” • )
cerc (a se citi „cerc alb” ○ )
pătrat (a se citi „pătrat negru” ■ )
Opțiuni de tip listă ordonată
1 (cifra zecimală implicită)
A (alfabet majuscule)
a (alfabet cu litere mici)
I (numerele romane majuscule)
i (numerele romane minuscule)
Există câteva lucruri de remarcat despre modul în care am stilat marja în aceste liste. Am inclus, de asemenea, „ margin-left ” în ambele liste. Asta pentru a vă asigura că gloanțele sunt afișate în interiorul limitelor containerului, mai degrabă decât să se alinieze greșit sau să nu apară deloc.
Considerații Gmail
În special, Gmail webmail (dar nu aplicația Gmail pentru mobil) este singurul client care nu are nevoie de marjă stângă pentru a se asigura că marcatorii sunt randați în limitele corecte, ceea ce înseamnă că listele dvs. vor include acea indentație suplimentară din stânga. Dacă aveți absolut nevoie ca listele cu marcatori să fie la același nivel cu marginea din stânga a containerului, puteți reseta marginea din stânga la zero cu codul specific Gmail, astfel:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
După cum puteți vedea, am inclus interogarea media receptivă pentru mobil pentru a ne asigura că resetarea marjei nu afectează aplicația Gmail pe mobil. De asemenea, vă rugăm să rețineți ordinea în care este scris CSS-ul . Dacă puneți CSS-ul responsiv pentru dispozitive mobile înaintea CSS-ului desktop, atunci CSS-ul responsiv la mobil va fi anulat din cauza cascadei.
PS: Listele semantice cu marcatori sunt în mod natural responsive la mobil , așa că este un câștig pentru toate avantajele de accesibilitate!
Aranjați-vă gloanțele
Dacă credeți că trebuie să vă păstrați listele cu marcatori simple (ne gândim la gloanțe negre, rotunde sau doar 1, 2, 3), vă înșelați! Puteți face aproape orice cu gloanțele pe care le puteți face pentru a trimite mesaje în e-mailuri. Doriți să schimbați culoarea pentru a se potrivi cu ghidul de stil al mărcii dvs.? Dați-i drumul. Aveți o listă ordonată și doriți să utilizați un font personalizat pentru a se potrivi cu restul e-mailului dvs.? Cu siguranță poți și ar trebui. Pentru orice listă, puteți modifica dimensiunea și culoarea marcatorilor, iar pentru listele ordonate, puteți schimba fontul și, de asemenea, puteți să vă puneți în aldine sau cu italice numerele sau literele.
Să vedem ce face o parte din acel stil codului nostru original de mai devreme.
Acest stil nu este încă tocmai potrivit, totuși. Dacă observați, stilul global al fontului pe care l-am setat mai devreme pentru fiecare listă a fost înlocuit de stilul pe care l-am adăugat la marcatori. Doriți doar să actualizați stilul marcatorului , nu copia care urmează după el. Aceasta este o remediere rapidă - pur și simplu înfășurați textul elementelor din listă într-o etichetă <span> cu stil pentru a reseta copia la stilul de font dorit.
Mult mai bine — acum puteți avea liste semantice cu marcatori stilate fără a compromite stilul conținutului listat.
Imbricați-vă listele
Acum că știi cum să incluzi o listă semantică cu marcatori în e-mailul tău, ce zici de o listă imbricată ?
Nu este atât de dificil pe cât credeți să includeți liste imbricate fără tabele. Trebuie pur și simplu să codificați lista imbricată așa cum ați proceda în mod normal, dar asigurați-vă că este imbricată într- o etichetă <li> în loc de exterior - altfel puteți vedea niște marcatori necinstiți să apară în clienții de e-mail precum Gmail IMAP (GANGA). Iată cum ar arăta acel cod:
Listele imbricate moștenesc stilul global al listelor părinte, așa că nu aveți nevoie de nicio spațiere sau stil suplimentar pentru a menține listele consistente. Cu toate acestea, distanța poate fi încă dificilă - surpriză, surpriză - în Outlook. Iată sfaturile noastre pentru a vă asigura că vă păstrați spațiul așa cum doriți:
Pentru spațierea orizontală , adăugați padding-left: #px; cu dimensiunea corectă a etichetei <li>. Acest lucru va ajuta la controlul distanței dintre marcator și copie. În plus, nu uitați să includeți indicatorul pe marginea din stânga menționat la începutul acestui ghid pentru a vă asigura că gloanțele dvs. nu se redau departe de copie.
Notă: Din păcate, acest lucru nu funcționează pentru Outlook pentru Windows.
Pentru spațierea verticală , adăugați margin-bottom: #px; cu dimensiunea corectă a etichetei <li>. Acest lucru va ajuta la creșterea distanței verticale dintre fiecare element din listă.
Utilizarea simbolurilor sau imaginilor personalizate pentru gloanțe
V-ați modelat gloanțele – acum încercați să utilizați imagini sau pictograme, în schimb!
Spre deosebire de stilarea marcatorilor la o dimensiune sau un font personalizat, simbolurile personalizate și marcatoarele de imagine nu sunt la fel de acceptate la fel de universal între clienții de e-mail, așa că asigurați-vă că continuați cu precauție și utilizați un instrument precum Litmus Email Previews pentru a vă asigura că listele dvs. dispozitivele abonaților.
Pentru codul nostru, ne vom schimba listele cu marcatori pentru a include inimi, precum și propriul nostru logo Litmus pentru câteva imagini personalizate.
<head> Metadate
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook pentru Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
aplicația Gmail
aplicația Outlook
Outlook.com
Gmail
De ce metoda tabelului nu este ideală pentru accesibilitate
Ne-ați auzit spunând că ar trebui să evitați utilizarea tabelelor atunci când codificați listele cu marcatori. Dar de ce?
Este posibil să știți sau nu că cititorii de ecran cresc în mod dramatic în popularitate — se estimează că 275 de milioane de oameni le vor folosi până în 2023. Abonații dvs. ar putea folosi cititoare de ecran pentru că au o dizabilitate care o impune sau pentru că doresc să audă ce e-mailuri au în timp ce se spală pe dinți dimineața.
Când vine vorba de ierarhia conținutului e-mail-ului dvs., pledăm pentru utilizarea etichetelor semantice cât mai mult posibil, adică utilizarea semnificativă și intenționată a <h1>, <h2> și așa mai departe, față de generice <p> și <span. > etichete. Dar când vine vorba de etichete semantice, un punct de blocare pentru dezvoltatorii de e-mail este lista cu marcatori sau neordonată.
Cititoarele de ecran au probleme cu citirea e-mailurilor cu tabele. Dacă un cititor de ecran identifică un tabel în codul de e-mail, acesta va citi cu voce tare ca unul. Vă va spune literalmente despre poziția și conținutul fiecărui rând și coloană. Acest lucru poate fi puțin pentru abonații care vă ascultă e-mailurile și, cu siguranță, le este greu să culeagă conținutul dorit. Să ne uităm la această listă cu marcatori:
Codificat cu tabele, ar suna cam așa:
Asta... nu e grozav , nu-i așa? Când vine vorba de liste cu marcatori, mulți dezvoltatori rezolvă problema vizuală prin codificarea listelor cu marcatori false în tabele. Dar dacă ai ști aceste tabele suna ca asta, ar continua să vă cod listele de acest fel?
Spre deosebire de tabele, etichetele <ul>, <ol> și <li> sunt mult mai ușor de înțeles pentru un cititor de ecran. Când un cititor de ecran vede aceste etichete într-un e-mail pe care îl citește cu voce tare, va citi acest lucru abonaților tăi:
Pentru a începe o listă, aceasta vă va spune câte articole există în listă
Acesta va descrie tipul de marcator folosit pentru a desemna fiecare element din listă, dintre următoarele:
Liste neordonate: „ glonț ” pentru tip=”disc” , „ glonț alb ” pentru tip=”cerc”, „ pătrat negru ” pentru tip=”pătrat”
Liste ordonate: caracterul alfanumeric asociat sau cifra romană (de exemplu: „ a ”, „ 2 ”, „ IV ”)
Pentru a încheia o listă, se va spune „în afara listei ”
De exemplu, iată o listă cu marcatori accesibilă, citită de un cititor de ecran:
Sună mult mai bine decât să auzi o grămadă de rânduri și coloane, nu-i așa? Este mult mai ușor să înțelegi conținutul din liste atunci când este citit cu voce tare, în același mod în care ai citi lista din capul tău, ca și cum te-ai uita la e-mailul în sine.
Sunteți gata să vă faceți accesibile listele cu marcatori?
Sunteți motivat să faceți accesibilă lista cu marcatori a e-mailului și doriți să vă asigurați că se redă bine pe clienții și dispozitivele de e-mail? Folosirea unui instrument precum Litmus Email Previews vă va ajuta să vă asigurați că lista cu marcatori este rezistentă la gloanțe. În plus, noile noastre verificări de accesibilitate din Lista de verificare Litmus vă ajută să vedeți instantaneu dacă e-mailurile dvs. respectă cele mai bune practici cheie de accesibilitate și să obțineți sfaturi utile despre cum vă puteți face e-mailurile mai incluzive.
