Le guide ultime des listes à puces dans les e-mails HTML
Le guide ultime des listes à puces dans les e-mails HTML
Publié: 2019-09-06
Les listes à puces peuvent être incroyablement utiles pour la hiérarchie du contenu. Ils permettent aux abonnés de lire rapidement et facilement les points clés de votre e-mail et peuvent distinguer les informations importantes du reste de votre contenu.
Mais comme si souvent dans le développement d'e-mails, quelque chose qui semble si simple - ajouter une liste à puces ne peut pas être sorcier, n'est-ce pas ? - s'avère plus compliqué que vous ne le pensez. Tous les clients de messagerie n'affichent pas les listes à puces de la même manière. Ainsi, certains développeurs évitent tout simplement d'utiliser des listes à puces ou utilisent des tableaux pour les forcer à se mettre en forme, une tactique qui peut causer de gros maux de tête aux abonnés utilisant des lecteurs d'écran.
Si vous cherchez à inclure des listes à puces dans vos e-mails de manière à les rendre accessibles et à l'épreuve des balles sur tous les clients de messagerie, nous avons la solution pour vous.
Utilisation de balises de liste pour les listes à puces
Chez Litmus, nous utilisons des balises de liste lorsque nous codons des listes à puces dans nos e-mails :
<ul> indique une liste non ordonnée, ou une liste à puces d'éléments
<ol> indique une liste ordonnée, ou une liste numérotée d'éléments
<li> indique un élément de ligne dans une liste d'éléments non ordonnée ou ordonnée
Si la mise en œuvre de balises de liste dans vos e-mails est quelque chose qui vous intéresse, lisez la suite !
Comment démarrer avec les listes à puces sémantiques
Pour commencer avec des listes à puces dans vos e-mails, voici le code minimum dont vous avez besoin pour les faire fonctionner.
Dans ce code, vous remarquerez quelques éléments que nous nous sommes assurés d'inclure. L'un d'eux consiste à identifier le type spécifique de puce que nous souhaitons inclure dans notre liste, avec un attribut de type défini dans les balises <ul> et <ol>. Pour <ul>, nous avons spécifié un bouton de style disque. Pour <ol>, nous avons spécifié « A » – les éléments de la liste seraient donc identifiés par A, B, C, etc. Voici la liste complète des options d'attribut de type que vous pouvez utiliser dans les e-mails :
Options de type de liste non ordonnée
disque (lire comme « balle » • )
cercle (lire comme "cercle blanc" ○ )
carré (lu comme « carré noir » ■ )
Options de type liste ordonnée
1 (chiffre décimal par défaut)
A (alphabet majuscule)
a (alphabet minuscule)
I (chiffre romain majuscule)
i (chiffre romain minuscule)
Il y a quelques points à noter sur la façon dont nous avons stylisé la marge dans ces listes. Nous avons également inclus « margin-left » dans les deux listes. Cela permet de s'assurer que les puces s'affichent à l'intérieur des limites de votre conteneur plutôt que de se désaligner ou de ne pas apparaître du tout.
Considérations sur Gmail
Notamment, Gmail WebMail (mais pas l' application Gmail pour mobile) est un client qui n'a pas besoin de marge gauche pour assurer les balles rendent à l' intérieur des limites correctes, ce qui signifie que vos listes comprendra que gauche supplémentaire indentation. Si vous avez absolument besoin que vos listes à puces soient alignées avec la marge gauche de votre conteneur, vous pouvez réinitialiser la marge gauche à zéro avec un code spécifique à Gmail comme suit :
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Comme vous pouvez le voir, nous avons inclus la requête média responsive mobile pour garantir que la réinitialisation de la marge n'affecte pas l'application Gmail sur mobile. Veuillez également noter l'ordre dans lequel le CSS est écrit . Si vous placez le CSS réactif pour mobile avant le CSS pour ordinateur de bureau, le CSS réactif pour mobile sera annulé en raison de la cascade.
PS : les listes à puces sémantiques sont naturellement adaptées aux mobiles , c'est donc une solution gagnant-gagnant avec les avantages de l'accessibilité !
Styliser vos balles
Si vous pensez que vous devez garder vos listes à puces simples (nous pensons aux puces noires, rondes ou simplement 1, 2, 3), vous vous trompez ! Vous pouvez faire pratiquement n'importe quoi aux puces que vous pouvez faire pour le texte dans les e-mails. Vous souhaitez changer la couleur pour l'adapter au style guide de votre marque ? Vas-y. Avez-vous une liste ordonnée et souhaitez-vous utiliser une police personnalisée pour correspondre au reste de votre e-mail ? Vous pouvez et devriez certainement. Pour n'importe quelle liste, vous pouvez modifier la taille et la couleur de vos puces, et pour les listes ordonnées, vous pouvez également modifier la police et mettre en gras ou en italique vos chiffres ou lettres.
Voyons ce que certains de ces styles font à notre code d'origine.
Ce style n'est pas encore tout à fait correct, cependant. Si vous remarquez, le style de police global que nous avons défini précédemment pour chaque liste a été remplacé par le style que nous avons ajouté aux puces elles-mêmes. Vous souhaitez uniquement mettre à jour le style de la puce , pas la copie qui la suit. Il s'agit d'une solution rapide : enveloppez simplement le texte des éléments de la liste dans une balise stylisée <span> pour réinitialiser la copie dans le style de police souhaité.
Bien mieux, vous pouvez désormais styliser des listes à puces sémantiques sans compromettre le style de votre contenu répertorié.
Imbrication de vos listes
Maintenant que vous savez comment inclure une liste à puces sémantique dans votre e-mail, que diriez-vous d'une liste imbriquée ?
Il n'est pas aussi difficile que vous le pensez d'inclure des listes imbriquées sans tableaux. Vous devez simplement coder votre liste imbriquée comme vous le feriez normalement, mais assurez-vous qu'elle est imbriquée dans une balise <li> plutôt qu'à l'extérieur. Voici à quoi ressemblerait ce code :
Les listes imbriquées héritent du style global des listes parentes, vous n'avez donc pas besoin d'espacement ou de style supplémentaire pour maintenir la cohérence des listes. Cependant, l'espacement peut toujours être délicat - surprise, surprise - dans Outlook. Voici nos conseils pour vous assurer de conserver votre espacement comme vous le souhaitez :
Pour l'espacement horizontal , ajoutez padding-left: #px; avec la bonne dimension à la balise <li>. Cela aidera à contrôler l'espacement entre la puce et la copie. De plus, n'oubliez pas d'inclure le pointeur de la marge gauche mentionné au début de ce guide pour vous assurer que vos puces ne sont pas rendues loin de votre copie.
Remarque : Malheureusement, cela ne fonctionne pas pour Outlook pour Windows.
Pour l'espacement vertical , ajoutez margin-bottom: #px; avec la bonne dimension à la balise <li>. Cela aidera à augmenter l'espacement vertical entre chaque élément de la liste.
Utilisation de symboles ou d'images personnalisés pour les puces
Vous avez stylisé vos puces, essayez maintenant d'utiliser des images ou des icônes à la place !
Contrairement au style de vos puces avec une taille ou une police personnalisée, les puces de symboles et d'images personnalisées ne sont pas aussi universellement prises en charge par les clients de messagerie, alors assurez-vous de procéder avec prudence et utilisez un outil comme Litmus Email Previews pour vous assurer que vos listes s'affichent bien appareils des abonnés.
Pour notre code, nous allons modifier nos listes à puces pour inclure des cœurs, ainsi que notre propre logo Litmus pour certaines images personnalisées.
<head> Métadonnées
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook pour Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Application Gmail
Application Outlook
Outlook.com
Gmail
Pourquoi la méthode de la table n'est pas idéale pour l'accessibilité
Vous nous avez entendu dire que vous devriez éviter d'utiliser des tableaux lors du codage des listes à puces. Mais pourquoi?
Vous savez peut-être ou non que les lecteurs d'écran gagnent considérablement en popularité : 275 millions de personnes devraient les utiliser d'ici 2023. Vos abonnés pourraient utiliser des lecteurs d'écran parce qu'ils ont un handicap qui l'exige, ou parce qu'ils veulent savoir quels e-mails ils ont en se brossant les dents le matin.
En ce qui concerne la hiérarchie du contenu de votre e-mail, nous préconisons l'utilisation de balises sémantiques autant que possible, c'est-à-dire une utilisation significative et intentionnelle de <h1>, <h2>, etc., par rapport à <p> et <span génériques > balises. Mais en ce qui concerne les balises sémantiques, l'un des points de friction pour les développeurs de messagerie est la liste à puces ou non ordonnée.
Les lecteurs d'écran ont du mal à lire les e-mails avec des tableaux. Si un lecteur d'écran identifie un tableau dans le code de votre e-mail, il sera lu à haute voix comme un. Il vous indiquera littéralement la position et le contenu de chaque ligne et colonne. Cela peut être un peu trop pour les abonnés qui écoutent vos e-mails, et il leur est certainement difficile de glaner le contenu prévu. Regardons cette liste à puces :
Codé avec des tables, cela ressemblerait un peu à ceci :
C'est… pas génial , n'est-ce pas ? En ce qui concerne les listes à puces, de nombreux développeurs résolvent le problème visuel en codant de fausses listes à puces dans des tableaux. Mais si vous saviez que ces tableaux sonnaient comme ça , continueriez-vous à coder vos listes de cette façon ?
Contrairement aux tableaux, les balises <ul>, <ol> et <li> sont beaucoup plus faciles à comprendre pour un lecteur d'écran. Lorsqu'un lecteur d'écran voit ces balises dans un e-mail qu'il lit à haute voix, il le lira à vos abonnés :
Pour commencer une liste, il vous dira combien d'éléments il y a dans la liste
Il décrira le type de puce utilisé pour désigner chaque élément de la liste, parmi les suivants :
Listes non ordonnées : " bullet " pour type="disc" , " white bullet " pour type="circle", " black square " pour type="square"
Listes ordonnées : le caractère alphanumérique ou le chiffre romain associé (par exemple : « a », « 2 », « IV »)
Pour terminer une liste, il dira " hors liste "
Par exemple, voici une liste à puces accessible, lue par un lecteur d'écran :
Cela sonne bien mieux que d'entendre tout un tas de lignes et de colonnes, n'est-ce pas ? Il est beaucoup plus facile de comprendre le contenu des listes lorsqu'il est lu à haute voix de la même manière que vous liriez la liste dans votre tête, comme si vous regardiez l'e-mail lui-même.
Prêt à rendre vos listes à puces accessibles ?
Vous êtes motivé pour rendre la liste à puces de votre e-mail accessible et vous voulez vous assurer qu'elle s'affiche bien sur tous les clients et appareils de messagerie ? L'utilisation d'un outil comme Litmus Email Previews vous aidera à vous assurer que votre liste à puces est à l'épreuve des balles. De plus, nos nouveaux contrôles d'accessibilité dans Litmus Checklist vous aident à voir instantanément si vos e-mails suivent les meilleures pratiques d'accessibilité clés et à obtenir des conseils pratiques sur la façon dont vous pouvez rendre vos e-mails plus inclusifs.
