Alt-Texte in E-Mails sind alternative Texte, die in deinem E-Mail-Design an Stelle von Bild-Elementen angezeigt werden, wenn beim Empfänger der Mail keine Bilder angezeigt werden können oder dürfen. In dieser Anleitung zeigen wir dir die wichtigsten Dinge, die du beim Verwenden von Alt-Texten beachten solltest und erklären dir, wie du Alt-Texte in Mail Designer 365 einstellen kannst. Gute Alt-Texte in E-Mails orientieren sich an den W3C-Hinweisen für barrierefreie Bilder und ergänzen ein zugängliches E-Mail-Design.

• • Warum sollte ich Alt-Texte verwenden?
  • Alt-Texte in Mail Designer 365 konfigurieren
  • Mögliche Probleme mit Alt-Texten
  • Alt-Texte testen

Warum sollte ich Alt-Texte in E-Mails verwenden?

Alt-Texte für die Bilder in deinen E-Mail-Newslettern zu hinterlegen garantiert, dass deine Designs bei Empfängern, die keine Bilder angezeigt bekommen, trotzdem klar und verständlich wirken.

Außerdem ist der Alt-Text ein sehr wichtiges Element für Nutzer mit einer Sehbehinderung, die sich auf Screen-Reader-Software (wie z. B. VoiceOver von Apple) verlassen müssen, um deine E-Mail-Inhalte erfassen zu können.

Barrierefreiheit für Mails: Alt-Texte sind extrem hilfreich für sehbehinderte Empfänger, die eine Screen-Reader-Software nutzen.

Es gibt zudem auch viele E-Mail-Dienste (z. B. Outlook), die aus Sicherheitsgründen Bilder nicht automatisch anzeigen. In diesem Fall ist es sinnvoll, für wichtige Bilder einen Alt-Text zu hinterlegen, damit der Empfänger den Zusammenhang der Mail auch mit fehlenden Grafiken versteht.

Hier ist ein Beispiel einer E-Mail in Outlook, bei welcher keine Alt-Texte für die Bilder konfiguriert wurden:

Hier die eigentliche Mail bei korrekter Darstellung mit Bildern:

Bei dieser Mail würden Alt-Texte einen sehr großen Unterschied machen, da so die Empfänger, die keine Bilder sehen können, dennoch über die Aktion informiert wären. Das hätte sich vermutlich auch auf die Klicks und Conversion-Rates ausgewirkt.

Hier ist ein Beispiel einer E-Mail in Outlook, bei der die Bilder mit Alt-Texten ausgestattet sind:

Hier die Mail in korrekter Darstellung:

Dank dem Alt-Text im oberen Bildbereich können alle Empfänger den Sinn der Mail verstehen – auch dann, wenn keine Bilder angezeigt werden.

Alt-Texte in Mail Designer 365 konfigurieren

Mit Mail Designer 365 kannst du schnell und einfach passende Alt-Texte für die Bilder in deinem E-Mail-Design konfigurieren. Klicke dafür in den Bildbereich, um das Stil-Menü zu öffnen. Hier kannst du einen Text für den Bildbereich eingeben:

Mögliche Probleme

Apple WebKit und Alt-Texte
WebKit (Safari, Apple Mail) zeigt einen Alt-Text nur dann an, wenn er im dazugehörigen Bildbereich in eine Zeile passt:

Wenn der Text zu lang ist, wird er nicht angezeigt:

Alt-Texte für die mobile Version

Wenn du in Mail Designer 365 an einem Design arbeitest, in dem Bildbereiche in der Desktop- und Smartphone-Ansicht gekoppelt sind, wird der Alt-Text von der Desktop-Version auch für die Smartphone-Version verwendet.

Da die Bildblöcke in der Smartphone-Ansicht oft deutlich schmaler als in der Desktop-Ansicht sind, wirkt sich das auch auf die darstellbare Länge deines Alt-Textes aus: Er wird dann ggf. in der Desktop-Version angezeigt, ist aber für den Bildbereich in der Mobil-Version zu lang und wird deshalb auf Smartphones nicht dargestellt. Das bedeutet, dass der Alt-Text für gekoppelte Layoutblöcke noch kürzer sein muss.

Mögliche Lösungen

Dieses Problem ist sehr kompliziert und leider gibt es keine einheitliche Lösung, wenn es um die Textlänge geht. Die Gründe dafür sind zum einen, dass die Breite der Bildblöcke je nach Design und Layout deutlich variieren kann. Zum anderen hat jeder Buchstabe eine unterschiedliche Dickte (Breite), weshalb wir keine konkrete Aussage über die darstellbare Textlänge geben können.

Idealerweise müsste Apple die nötigen Änderungen vornehmen, um dieses Problem zu fixen. Bis dahin ist aber die beste Lösung, Alt-Texte immer möglichst kurz und knapp zu halten und sie zudem über den Testversand zu testen.

Deine Alt-Texte testen

So kannst du sicherstellen, dass die Alt-Texte in deiner Mail passen:

• Gehe zu Mail > Einstellungen > Anzeigen und deaktiviere "Entfernte Inhalte in Nachrichten laden".
• Verwende den Testmail-Dienst in Mail Designer 365, um eine Testversion deiner Mail an deine E-Mail-Adresse zu schicken.
• Öffne die E-Mail in der Mail App und überprüfe, ob in allen Bildbereichen der von dir gesetzte Alt-Text angezeigt wird. Auf deinem iPhone kannst du das gleiche machen, um auch die mobile Version zu prüfen.

GIF in Mail einfügen

Wenn du ein GIF in eine Mail einfügen möchtest, kannst du in Mail Designer 365 eine vorhandene animierte Grafik oder eine eigene GIF-Datei verwenden. Eine kurze Animation kann eine Funktion erklären, Aufmerksamkeit auf ein Angebot lenken oder Bewegung in einen kleinen Designbereich bringen. Sie sollte den Inhalt unterstützen und nicht vom wichtigsten Ziel der E-Mail ablenken.

Passende Animation auswählen

Wähle eine Animation, deren Aussage bereits im ersten Bild verständlich ist. Manche E-Mail-Programme zeigen animierte GIFs nur eingeschränkt oder bleiben beim ersten Einzelbild stehen. Platziere deshalb keine unverzichtbare Information ausschließlich in späteren Animationsphasen.

Halte Bewegung, Dauer und Wiederholung ruhig. Sehr schnelle oder dauerhaft dominante Animationen können die Lesbarkeit beeinträchtigen. Verwende möglichst nur ein deutlich animiertes Element pro sichtbarem Abschnitt.

Eigenes GIF für den Newsletter vorbereiten

Exportiere das GIF in den benötigten Abmessungen, damit es im Newsletter nicht unnötig skaliert werden muss. Reduziere Dateigröße, Bildanzahl und Farbumfang so weit, wie es die gewünschte Qualität erlaubt. Große Dateien verlängern die Ladezeit und können dazu führen, dass Empfängerinnen und Empfänger die Animation erst spät oder gar nicht sehen.

Prüfe den ersten Frame besonders sorgfältig. Er sollte Motiv, Kernaussage oder Call-to-Action bereits sinnvoll darstellen. Ergänze außerdem einen kurzen Alternativtext, der Zweck oder Inhalt der Animation beschreibt.

GIF in Mail Designer 365 platzieren

Ziehe eine integrierte animierte Grafik aus dem Inhalte-Fenster in einen Bildbereich. Eine eigene GIF-Datei kannst du ebenfalls direkt in einen passenden Bildbereich ziehen. Kontrolliere anschließend Größe, Ausrichtung und Abstand zu Text oder Buttons. Die Animation darf keine wichtigen Inhalte überdecken.

Animation verlinken

Wenn das GIF zu einer Zielseite führen soll, hinterlege den Link für den gesamten Bildbereich. Bildmotiv, begleitender Text und Zielseite sollten dieselbe Erwartung erfüllen. Ergänze bei einer wichtigen Aktion zusätzlich einen klar beschrifteten Textlink oder Button, damit die Handlung auch bei blockierten Bildern verständlich bleibt.

Darstellung und Barrierefreiheit testen

Öffne die Desktop- und Mobilvorschau und versende eine Test-E-Mail. Prüfe, ob das GIF korrekt startet, ob der erste Frame sinnvoll bleibt und ob der Link funktioniert. Teste in den E-Mail-Programmen, die für deine Zielgruppe relevant sind. Achte darauf, dass schnelle Wechsel oder starke Kontraste nicht unangenehm wirken.

Animationen sollten nicht flackern. Vermeide rasche Helligkeitswechsel und stelle sicher, dass Text lange genug sichtbar bleibt. Der Newsletter muss auch ohne Bewegung vollständig verständlich sein.

Checkliste für animierte GIFs

• Der erste Frame enthält eine verständliche Aussage.
• Dateigröße und Abmessungen sind angemessen.
• Alternativtext und gegebenenfalls ein zusätzlicher Textlink sind vorhanden.
• Animation und Link wurden mobil getestet.
• Die Bewegung lenkt nicht vom primären CTA ab.

Weitere Hinweise zu Bildlinks und Bildbereichen findest du im Mail Designer 365 Handbuch.

Um Objekte zu duplizieren, wähle „Bearbeiten > Duplizieren“ in der Menüliste.