La guida definitiva agli elenchi puntati nelle e-mail HTML
La guida definitiva agli elenchi puntati nelle e-mail HTML
Pubblicato: 2019-09-06
Gli elenchi puntati possono essere incredibilmente utili per la gerarchia dei contenuti. Consentono agli abbonati di leggere rapidamente e facilmente i punti chiave della tua e-mail e possono distinguere informazioni importanti dal resto dei tuoi contenuti.
Ma come spesso accade nello sviluppo della posta elettronica, qualcosa che sembra così semplice—aggiungere un elenco puntato non può essere scienza missilistica, vero?—si rivela più complicato di quanto si possa pensare. Non tutti i client di posta elettronica visualizzano gli elenchi puntati allo stesso modo. Quindi alcuni sviluppatori evitano del tutto di usare elenchi puntati o usano tabelle per forzarli a formarli, una tattica che può causare grossi grattacapi agli abbonati che usano gli screen reader.
Se stai cercando di includere elenchi puntati nelle tue e-mail in un modo che li renda accessibili e a prova di proiettile attraverso i client di posta elettronica, abbiamo la soluzione per te.
Utilizzo dei tag di elenco per gli elenchi puntati
Qui a Litmus usiamo i tag di elenco quando codifichiamo gli elenchi puntati nelle nostre e-mail:
<ul> indica un elenco non ordinato o un elenco puntato di elementi
<ol> indica un elenco ordinato o un elenco numerato di elementi
<li> indica un elemento pubblicitario in un elenco di elementi non ordinato o ordinato
Se l'implementazione dei tag dell'elenco nelle tue e-mail è qualcosa che ti interessa, continua a leggere!
Come iniziare con gli elenchi puntati semantici
Per iniziare con gli elenchi puntati nelle tue e-mail, ecco il codice minimo necessario per farli funzionare.
In questo codice noterai un paio di cose che ci siamo assicurati di includere. Uno di questi è identificare il tipo specifico di proiettile che ci interessa includere nel nostro elenco, con un attributo di tipo definito nei tag <ul> e <ol>. Per <ul>, abbiamo specificato un pulsante in stile disco. Per <ol>, abbiamo specificato "A", in modo che gli elementi dell'elenco vengano identificati con A, B, C e così via, ma negli elenchi ordinati possono essere utilizzati anche numeri, lettere maiuscole e minuscole e numeri romani. Ecco l'elenco completo delle opzioni di attributo di tipo che puoi utilizzare nell'e-mail:
Opzioni del tipo di elenco non ordinato
disco (leggi come “proiettile” • )
cerchio (leggi come “cerchio bianco” ○ )
quadrato (leggi come "quadrato nero" ■ )
Opzioni del tipo di elenco ordinato
1 (numero decimale predefinito)
A (alfabeto maiuscolo)
a (alfabeto minuscolo)
I (numero romano maiuscolo)
i (numero romano minuscolo)
Ci sono un paio di cose da notare su come abbiamo stilizzato il margine in questi elenchi. Abbiamo anche incluso " margine sinistro " in entrambi gli elenchi. Questo serve per assicurarsi che i proiettili vengano visualizzati all'interno dei confini del contenitore anziché disallineati o non visualizzati affatto.
Considerazioni su Gmail
In particolare, Gmail webmail (ma non Gmail app per cellulari) è il un cliente che non ha bisogno margin-left per assicurare i proiettili rendono all'interno dei confini corretti, il che significa che le vostre liste comprenderà che il rientro in più a sinistra. Se hai assolutamente bisogno che i tuoi elenchi puntati siano allineati con il margine sinistro del tuo contenitore, puoi azzerare il margine sinistro con il codice specifico di Gmail in questo modo:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Come puoi vedere, abbiamo incluso la query multimediale reattiva per dispositivi mobili per garantire che il ripristino dei margini non influisca sull'app Gmail sui dispositivi mobili. Inoltre, si prega di notare l'ordine in cui è scritto il CSS . Se metti il CSS per dispositivi mobili prima del CSS per desktop, il CSS per dispositivi mobili verrà annullato a causa della cascata.
PS: gli elenchi puntati semantici sono naturalmente sensibili ai dispositivi mobili , quindi è un vantaggio per tutti con i vantaggi di accessibilità!
Modella i tuoi proiettili
Se pensi di dover mantenere semplici le tue liste puntate (stiamo pensando a proiettili neri, rotondi o solo 1, 2, 3), ti sbagli! Puoi fare praticamente qualsiasi cosa ai proiettili che puoi fare al testo nelle e-mail. Vuoi cambiare il colore in modo che corrisponda alla guida di stile del tuo marchio? Andare avanti. Hai un elenco ordinato e desideri utilizzare un carattere personalizzato che corrisponda al resto della tua email? Sicuramente puoi e dovresti. Per qualsiasi elenco puoi modificare la dimensione e il colore dei tuoi punti elenco e per gli elenchi ordinati, puoi cambiare il carattere e il grassetto o il corsivo anche i tuoi numeri o lettere.
Vediamo cosa fa parte di quello stile al nostro codice originale di prima.
Questo stile non è ancora del tutto corretto, però. Se noti, lo stile del carattere globale che abbiamo impostato in precedenza per ogni elenco è stato sovrascritto dallo stile che abbiamo aggiunto agli stessi punti elenco. Vuoi solo aggiornare lo stile del punto elenco , non la copia che viene dopo di esso. Questa è una soluzione rapida: è sufficiente avvolgere il testo degli elementi dell'elenco in un tag <span> con stile per reimpostare la copia allo stile di carattere previsto.
Molto meglio: ora puoi avere elenchi puntati semantici con stile senza compromettere lo stile dei tuoi contenuti elencati.
Annidare le tue liste
Ora che sai come includere un elenco puntato semantico nella tua email, che ne dici di un elenco nidificato ?
Non è così difficile come pensi includere elenchi nidificati senza tabelle. Devi semplicemente codificare il tuo elenco nidificato come faresti normalmente, ma assicurati che sia nidificato all'interno di un tag <li> anziché all'esterno, altrimenti potresti vedere alcuni punti elenco non autorizzati apparire nei client di posta elettronica come Gmail IMAP (GANGA). Ecco come sarebbe il codice:
Gli elenchi nidificati ereditano lo stile globale degli elenchi padre, quindi non hai bisogno di spazi o stili aggiuntivi per mantenere coerenti gli elenchi. Tuttavia, la spaziatura può ancora essere complicata, sorpresa, sorpresa in Outlook. Ecco i nostri consigli per assicurarti di mantenere la spaziatura come desideri:
Per la spaziatura orizzontale , aggiungi padding-left: #px; con la dimensione corretta al tag <li>. Questo aiuterà a controllare la spaziatura tra il punto elenco e la copia. Inoltre, non dimenticare di includere il puntatore del margine sinistro menzionato all'inizio di questa guida per assicurarti che i tuoi proiettili non vengano visualizzati lontano dalla tua copia.
Nota: Sfortunatamente, questo non funziona per Outlook per Windows.
Per la spaziatura verticale , aggiungi margin-bottom: #px; con la dimensione corretta al tag <li>. Ciò contribuirà ad aumentare la spaziatura verticale tra ogni elemento dell'elenco.
Utilizzo di simboli o immagini personalizzati per i proiettili
Hai dato uno stile ai tuoi proiettili: ora prova invece a utilizzare immagini o icone!
A differenza dello stile dei tuoi punti elenco con una dimensione o un carattere personalizzato, i simboli personalizzati e i punti elenco immagine non sono supportati universalmente tra i client di posta elettronica, quindi assicurati di procedere con cautela e utilizzare uno strumento come Anteprime e-mail di tornasole per assicurarti che i tuoi elenchi vengano visualizzati bene sul tuo dispositivi degli abbonati.
Per il nostro codice, cambieremo i nostri elenchi puntati per includere i cuori, così come il nostro logo Litmus per alcune immagini personalizzate.
<head> Metadati
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook per Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Applicazione Gmail
Applicazione Outlook
Outlook.com
Gmail
Perché il metodo della tabella non è l'ideale per l'accessibilità?
Ci hai sentito dire che dovresti evitare di usare le tabelle durante la codifica di elenchi puntati. Ma perché?
Potresti sapere o meno che gli screen reader stanno aumentando drammaticamente in popolarità: si prevede che 275 milioni di persone li utilizzeranno entro il 2023. I tuoi abbonati potrebbero utilizzare gli screen reader perché hanno una disabilità che lo richiede o perché vogliono sentire quali email hanno mentre si lavano i denti al mattino.
Quando si tratta della gerarchia dei contenuti della tua email, sosteniamo l'uso il più possibile di tag semantici, ovvero un uso significativo e intenzionale di <h1>, <h2> e così via, rispetto ai generici <p> e <span > tag. Ma quando si tratta di tag semantici, un punto critico per gli sviluppatori di posta elettronica è l'elenco puntato o non ordinato.
I lettori dello schermo hanno problemi a leggere le e-mail con le tabelle. Se uno screen reader identifica una tabella nel codice della tua email, verrà letta ad alta voce come una. Ti parlerà letteralmente della posizione e del contenuto di ogni riga e colonna. Questo può essere un po 'troppo per gli abbonati che ascoltano le tue e-mail e sicuramente rende loro difficile raccogliere il contenuto previsto. Diamo un'occhiata a questo elenco puntato:
Codificato con le tabelle, suonerebbe un po' così:
Questo... non è fantastico , vero? Quando si tratta di elenchi puntati, molti sviluppatori risolvono il problema visivo codificando elenchi puntati falsi nelle tabelle. Ma se tu sapessi quei tavoli sembrava che, vuoi continuare a codice vostre liste in questo modo?
A differenza delle tabelle, i tag <ul>, <ol> e <li> sono molto più facili da capire per uno screen reader. Quando un'utilità per la lettura dello schermo vede questi tag in un'e-mail che sta leggendo ad alta voce, leggerà questo ai tuoi iscritti:
Per iniziare un elenco, ti dirà quanti elementi ci sono nell'elenco
Descriverà il tipo di punto elenco utilizzato per indicare ogni elemento dell'elenco, dai seguenti:
Elenchi non ordinati: “ bullet ” per type=”disc” , “ white bullet ” per type=”circle”, “ black square ” per type=”square”
Liste ordinate: il carattere alfanumerico o numero romano associato (ad esempio: “ a ”, “ 2 ”, “ IV ”)
Per terminare un elenco, dirà " fuori elenco "
Ad esempio, ecco un elenco puntato accessibile, letto da uno screen reader:
Suona molto meglio che ascoltare un sacco di righe e colonne, non è vero? È molto più facile capire il contenuto degli elenchi quando viene letto ad alta voce nello stesso modo in cui leggeresti l'elenco nella tua testa, come se stessi guardando l'e-mail stessa.
Pronto a rendere accessibili i tuoi elenchi puntati?
Sei motivato a rendere accessibile l'elenco puntato della tua e-mail e vuoi assicurarti che venga visualizzato correttamente su tutti i client e i dispositivi di posta elettronica? L'utilizzo di uno strumento come Litmus Email Previews ti aiuterà a garantire che il tuo elenco puntato sia a prova di proiettile. Inoltre, i nostri nuovi controlli di accessibilità in Litmus Checklist ti aiutano a vedere immediatamente se le tue e-mail seguono le migliori pratiche di accessibilità chiave e ottenere consigli utili su come rendere le tue e-mail più inclusive.
