Der ultimative Leitfaden für Aufzählungslisten in HTML-E-Mails
Der ultimative Leitfaden für Aufzählungslisten in HTML-E-Mails
Veröffentlicht: 2019-09-06
Listen mit Aufzählungszeichen können für die Inhaltshierarchie unglaublich nützlich sein. Sie ermöglichen es Abonnenten, wichtige Punkte in Ihrer E-Mail schnell und einfach zu lesen und können wichtige Informationen vom Rest Ihres Inhalts abheben.
Aber wie so oft in der E-Mail-Entwicklung stellt sich etwas, das so einfach klingt – das Hinzufügen einer Aufzählungsliste kann kein Hexenwerk sein, oder? – als kniffliger heraus, als Sie vielleicht denken. Nicht alle E-Mail-Clients rendern Aufzählungslisten auf die gleiche Weise. Daher vermeiden einige Entwickler die Verwendung von Aufzählungslisten ganz oder verwenden Tabellen, um sie in Form zu bringen – eine Taktik, die Abonnenten, die Screenreader verwenden, große Kopfschmerzen bereiten kann.
Wenn Sie Listen mit Aufzählungszeichen so in Ihre E-Mails aufnehmen möchten, dass sie für alle E-Mail-Clients zugänglich und kugelsicher sind, haben wir die Lösung für Sie.
Listen-Tags für Aufzählungslisten verwenden
Hier bei Litmus verwenden wir Listen-Tags, wenn wir Aufzählungslisten in unseren E-Mails codieren:
<ul> bezeichnet eine ungeordnete Liste oder eine Aufzählung von Elementen
<ol> bezeichnet eine geordnete Liste oder eine nummerierte Liste von Elementen
<li> bezeichnet eine Position in einer ungeordneten oder geordneten Liste von Elementen
Wenn Sie an der Implementierung von Listen-Tags in Ihren E-Mails interessiert sind, lesen Sie weiter!
Erste Schritte mit semantischen Aufzählungslisten
Um mit Aufzählungslisten in Ihren E-Mails zu beginnen, ist hier der Mindestcode, den Sie benötigen, damit sie funktionieren.
In diesem Code werden Sie einige Dinge bemerken, die wir unbedingt berücksichtigt haben. Einer von denen ist die Identifizierung der spezifischen Art von Kugel wir in auch in unserer Liste interessiert sind, mit einem definierten Typ - Attribut in der <ul> und <ol> -Tags. Für <ul> haben wir eine Schaltfläche im Disc-Stil angegeben. Für <ol> haben wir „A“ angegeben – Listenelemente werden also mit A, B, C usw. identifiziert –, aber auch Zahlen, Klein- und Großbuchstaben sowie römische Ziffern können in geordneten Listen verwendet werden. Hier ist die vollständige Liste der type - Attribut Optionen , die Sie in E - Mail verwenden können:
Optionen für den ungeordneten Listentyp
Disc (als „Kugel“ gelesen • )
Kreis (gelesen als „weißer Kreis“ ○ )
Quadrat (gelesen als „schwarzes Quadrat“ ■ )
Optionen für geordnete Listentypen
1 (Standard-Dezimalzahl)
A (Großbuchstaben)
a (Kleinbuchstaben)
I (große römische Zahl)
i (kleingeschriebene römische Zahl)
Es gibt ein paar Dinge zu beachten, wie wir den Rand in diesen Listen gestaltet haben. Wir haben auch " Margin-Left " in beide Listen aufgenommen. Damit stellen Sie sicher, dass die Aufzählungszeichen innerhalb Ihrer Containergrenzen gerendert werden und nicht falsch ausgerichtet sind oder überhaupt nicht angezeigt werden.
Überlegungen zu Google Mail
Bemerkenswert ist , Gmail Webmail (aber nicht Google Mail - App für mobile) ist ein Client, der nicht margin-left braucht , um sicherzustellen , dass die Kugeln in den richtigen Grenzen machen, die Ihre Listen bedeuten , dass der zusätzlichen linken Einzug umfassen. Wenn Ihre Aufzählungslisten unbedingt bündig mit dem linken Rand Ihres Containers abschließen müssen, können Sie den linken Rand mit Gmail-spezifischem Code wie folgt auf Null zurücksetzen:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Wie Sie sehen, haben wir die responsive Medienabfrage für Mobilgeräte integriert, um sicherzustellen, dass das Zurücksetzen des Rands keine Auswirkungen auf die Gmail-App auf Mobilgeräten hat. Beachten Sie auch die Reihenfolge, in der das CSS geschrieben wird . Wenn Sie das auf Mobilgeräte reagierende CSS vor dem Desktop-CSS platzieren, wird das auf Mobilgeräte reagierende CSS aufgrund der Kaskade überstimmt.
PS: Semantische Listen mit Aufzählungszeichen sind von Natur aus mobil-responsive , also eine Win-Win-Situation mit den Vorteilen der Barrierefreiheit!
Styling deiner Kugeln
Wenn Sie denken, dass Sie Ihre Aufzählungslisten einfach halten müssen (wir denken schwarze, runde Aufzählungszeichen oder nur 1, 2, 3), liegen Sie falsch! Sie können mit Aufzählungszeichen praktisch alles machen, was Sie mit Texten in E-Mails tun können. Möchten Sie die Farbe so ändern, dass sie dem Styleguide Ihrer Marke entspricht? Fortfahren. Haben Sie eine geordnete Liste und möchten Sie eine benutzerdefinierte Schriftart verwenden, die zum Rest Ihrer E-Mail passt? Sie können und sollten auf jeden Fall. Für jede Liste können Sie die Größe und Farbe Ihrer Aufzählungszeichen ändern – und für geordnete Listen können Sie auch die Schriftart ändern und Ihre Zahlen oder Buchstaben fett oder kursiv formatieren.
Sehen wir uns an, was ein Teil dieses Stylings mit unserem ursprünglichen Code von früher macht.
Dieses Styling ist jedoch noch nicht ganz richtig. Wie Sie bemerken, wurde der globale Schriftstil, den wir zuvor für jede Liste festgelegt haben, durch den Stil überschrieben, den wir den Aufzählungszeichen selbst hinzugefügt haben. Sie möchten nur den Stil des Aufzählungszeichens aktualisieren, nicht die Kopie, die darauf folgt. Dies ist eine schnelle Lösung – wickeln Sie einfach den Text der Listenelemente in ein gestyltes <span>-Tag ein, um die Kopie auf den beabsichtigten Schriftstil zurückzusetzen.
Viel besser – jetzt können Sie semantische Listen mit Aufzählungszeichen gestylt haben, ohne den Stil Ihrer aufgelisteten Inhalte zu beeinträchtigen.
Verschachteln Ihrer Listen
Nun, da Sie wissen, wie Sie eine semantische Liste mit Aufzählungszeichen in Ihre E-Mail einfügen, wie wäre es mit einer verschachtelten Liste?
Es ist nicht annähernd so schwierig, wie Sie denken, verschachtelte Listen ohne Tabellen einzubinden. Sie müssen Ihre verschachtelte Liste einfach wie gewohnt codieren, aber stellen Sie sicher, dass sie innerhalb eines <li>-Tags und nicht außerhalb verschachtelt ist. Andernfalls werden möglicherweise einige betrügerische Aufzählungszeichen in E-Mail-Clients wie Gmail IMAP (GANGA) angezeigt. So würde dieser Code aussehen:
Verschachtelte Listen erben den globalen Stil der übergeordneten Listen, sodass Sie keine zusätzlichen Abstände oder Stile benötigen, um die Listen konsistent zu halten. Der Abstand kann jedoch in Outlook immer noch schwierig sein – Überraschung, Überraschung. Hier sind unsere Tipps, um sicherzustellen, dass Sie Ihren Abstand so halten, wie Sie es möchten:
Für horizontalen Abstand fügen Sie padding-left hinzu: #px; mit der richtigen Dimension zum <li>-Tag. Dies hilft, den Abstand zwischen dem Aufzählungszeichen und der Kopie zu kontrollieren. Vergessen Sie außerdem nicht, den am Anfang dieses Handbuchs erwähnten Zeiger für den linken Rand einzufügen, um sicherzustellen, dass Ihre Aufzählungszeichen nicht weit von Ihrer Kopie entfernt gerendert werden.
Hinweis: Leider funktioniert dies nicht für Outlook für Windows.
Für vertikalen Abstand fügen Sie margin-bottom hinzu: #px; mit der richtigen Dimension zum <li>-Tag. Dadurch wird der vertikale Abstand zwischen den einzelnen Listenelementen erhöht.
Verwenden von benutzerdefinierten Symbolen oder Bildern für Aufzählungszeichen
Sie haben Ihre Aufzählungszeichen gestaltet – versuchen Sie es jetzt stattdessen mit Bildern oder Symbolen!
Im Gegensatz zur Gestaltung Ihrer Aufzählungszeichen in einer benutzerdefinierten Größe oder Schriftart werden benutzerdefinierte Symbol- und Bildaufzählungszeichen nicht von allen E-Mail-Clients unterstützt. Gehen Sie also vorsichtig vor und verwenden Sie ein Tool wie Litmus Email Previews, um sicherzustellen, dass Ihre Listen in Ihrem Geräte der Abonnenten.
Für unseren Code ändern wir unsere Aufzählungslisten so, dass sie Herzen enthalten, sowie unser eigenes Lackmus-Logo für einige benutzerdefinierte Bilder.
<head> Metadaten
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Fällt auf ein normales Scheibengeschoss zurück in :
Outlook für Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Gmail-App
Outlook-App
Outlook.com
Google Mail
Warum die Tabellenmethode für die Barrierefreiheit nicht ideal ist
Sie haben von uns gehört, dass Sie beim Codieren von Aufzählungslisten keine Tabellen verwenden sollten. Aber warum?
Sie wissen vielleicht, dass die Popularität von Screenreadern dramatisch zunimmt – bis 2023 werden voraussichtlich 275 Millionen Menschen sie verwenden Sie haben morgens beim Zähneputzen.
Wenn es um die Inhaltshierarchie Ihrer E-Mail geht, plädieren wir für die Verwendung semantischer Tags, d. h. eine sinnvolle und absichtliche Verwendung von <h1>, <h2> usw. im Vergleich zu generischen <p> und <span > Tags. Aber wenn es um semantische Tags geht, ist ein Knackpunkt für E-Mail-Entwickler die Aufzählungsliste oder ungeordnete Liste.
Screenreader haben Probleme beim Vorlesen von E-Mails mit Tabellen. Wenn ein Screenreader eine Tabelle im Code Ihrer E-Mail identifiziert, wird sie laut vorgelesen. Es wird Ihnen buchstäblich über die Position und den Inhalt jeder einzelnen Zeile und Spalte informieren. Dies kann für Abonnenten, die Ihre E-Mails abhören, etwas viel sein, und es macht es ihnen sicherlich schwer, den beabsichtigten Inhalt zu ermitteln. Schauen wir uns diese Aufzählungsliste an:
Mit Tabellen codiert, würde es ungefähr so klingen:
Das ist… nicht großartig , oder? Wenn es um Aufzählungslisten geht, lösen viele Entwickler das visuelle Problem, indem sie falsche Aufzählungslisten in Tabellen codieren. Aber wenn man die Tabellen wusste wie das klang, würden Sie auch weiterhin Code Ihre Listen auf diese Weise?
Im Gegensatz zu Tabellen sind die Tags <ul>, <ol> und <li> für einen Screenreader viel einfacher zu verstehen. Wenn ein Screenreader diese Tags in einer laut vorgelesenen E-Mail sieht, wird er Ihren Abonnenten Folgendes vorlesen:
Um eine Liste zu beginnen, wird Ihnen angezeigt, wie viele Elemente sich in der Liste befinden
Es wird die Art von Aufzählungszeichen beschrieben, die verwendet wird, um jedes Listenelement zu bezeichnen, aus den folgenden:
Ungeordnete Listen: " bullet " für type = "disc" , " white bullet " für type = "circle", " black square " für type = "square"
Geordnete Listen: Das zugehörige alphanumerische Zeichen oder die römische Zahl (Beispiel: „ a “, „ 2 “, „ IV “)
Um eine Liste zu beenden, wird " out of list " angezeigt.
Hier ist beispielsweise eine barrierefreie Liste mit Aufzählungszeichen, die von einem Screenreader gelesen wird:
Das klingt viel besser, als eine ganze Reihe von Zeilen und Spalten zu hören, oder? Es ist viel einfacher, Inhalte in Listen zu verstehen, wenn sie so laut vorgelesen werden, wie Sie die Liste in Ihrem Kopf lesen würden, als würden Sie die E-Mail selbst betrachten.
Sind Sie bereit, Ihre Aufzählungslisten zugänglich zu machen?
Sind Sie motiviert, die Aufzählungsliste Ihrer E-Mail zugänglich zu machen, und möchten Sie sicherstellen, dass sie auf allen E-Mail-Clients und -Geräten gut gerendert wird? Mit einem Tool wie Litmus Email Previews können Sie sicherstellen, dass Ihre Aufzählungsliste kugelsicher ist. Darüber hinaus helfen Ihnen unsere neuen Barrierefreiheitsprüfungen in der Litmus-Checkliste, sofort zu sehen, ob Ihre E-Mails den wichtigsten Best Practices für Barrierefreiheit entsprechen, und erhalten umsetzbare Ratschläge, wie Sie Ihre E-Mails integrativer gestalten können.
