E-Mail-Texte und Design für Onlineshops

Text und Design sollten dieselbe Aufgabe lösen

Eine E-Mail kann hochwertig aussehen und Leser trotzdem ratlos lassen. Text und Design beginnen mit einer konkreten Aufgabe: eine Neuheit verstehen, Produkte vergleichen, eine Frage klären oder eine Entscheidung wieder aufnehmen. Daraus ergibt sich, welche Information zuerst kommt, welches Bild hilft und wohin der Link führt.

Sammle vor der Produktion Angebot, Zielgruppe, Produkt oder Zielinhalt und einzuhaltende Bedingungen. Ergänze Beispiele für die Markensprache und echte Kundenfragen. Ein Wort wie „Premium“ erklärt nicht, was eine Person wahrnehmen oder verstehen soll.

Zum Umfang können Texte, Gestaltung, Umsetzung in der Plattform und Prüfung der fertigen E-Mail gehören. Halte das schriftlich fest: Eine freigegebene Komposition im Designtool beweist noch nicht, dass die Nachricht in den tatsächlichen Postfächern funktioniert.

Textbeispiel: Aus einem allgemeinen Versprechen wird eine klare Entscheidung

Stell dir eine Kampagne für einen fiktiven Shop mit Leinenhemden vor. Das Beispiel soll bei der Auswahl helfen und behauptet keine Eigenschaften eines realen Produkts. Bedingungen und Merkmale veröffentlichter Inhalte müssen mit dem Katalog abgeglichen werden.

Die Tabelle zeigt, wie E-Mail-Bestandteile unterschiedliche Aufgaben übernehmen können, ohne überall denselben Satz zu wiederholen.

Dieses Beispiel benötigt eine Seite, die einen Vergleich ermöglicht. Führt der Link zu einem Katalog ohne diese Informationen, bleibt das Versprechen unvollständig. Analysiere E-Commerce-E-Mail-Beispiele deshalb zusammen mit ihren Zielseiten und nicht nur anhand der Gestaltung.

Eine Hierarchie, die auch beim Überfliegen funktioniert

Leser sollten das Angebot erkennen, ohne eine Komposition entschlüsseln zu müssen. Ordne Überschrift, Erklärung, Bild und Handlung nach der Entscheidung, die erleichtert werden soll. Konkurrieren mehrere Elemente um Vorrang, prüfe, ob die E-Mail zu viele Aufgaben gleichzeitig lösen will.

Ein Foto kann Passform, Textur oder eine Nutzungssituation zeigen, die sich allein mit Worten schwer vermitteln lässt. Seine Funktion muss klar sein. Bilder ohne zusätzlichen Informationswert verlängern den Weg; grundsätzlich alle Bilder zu entfernen kann nützliche Entscheidungshilfen beseitigen.

Eine Handlungsaufforderung braucht Kontext. „Größentabelle ansehen“ beschreibt einen anderen nächsten Schritt als „Kollektion kaufen“. Beide können sinnvoll sein, doch die Hierarchie sollte deutlich machen, welchem Bedürfnis sie dienen. Nicht jeder Link benötigt dieselbe Größe und Aufmerksamkeit.

Prüfe auch den mobilen Ablauf. Eine Produktreihe kann zu einer langen Spalte werden; Text auf einem Bild kann beim Verkleinern unleserlich werden. Lege die Lesereihenfolge auf schmalen Bildschirmen fest, bevor die Desktopversion als abgeschlossen gilt.

Eine Markenvorlage für unterschiedliche Argumente

Eine hilfreiche Vorlage bündelt wiederverwendbare Regeln für Typografie, Abstände, Farben, Produktdarstellung, Buttons und Fußbereich. So bleibt eine Marke zwischen Kampagnen erkennbar, ohne dieselbe Komposition zu wiederholen. Das System sollte verschiedene Inhalte unterstützen und auch für andere Bearbeitende nutzbar bleiben.

Definiere stabile und variable Bereiche. Fußbereich und Absenderinformationen brauchen meist Konsistenz; Einstieg und Inhaltsmodule folgen dem jeweiligen Argument. E-Mail-Vorlagen bilden eine Grundlage, entscheiden aber nicht, was erzählt werden soll.

Eine wartbare Übergabe erhält editierbare Module und erklärt ihre Verwendung. Wird alles zu einem einzigen Bild, erfordern Preisänderungen, Übersetzungen oder neue Bedingungen eine erneute Bearbeitung der Grafik. Vereinbare auch, wo freigegebene Versionen liegen und wer die Markenressourcen pflegt.

Lesbarkeit, Kontrast und Bilder mit klarer Funktion

W3C unterscheidet informative, funktionale und dekorative Bilder: Alternativtext beschreibt Information oder Funktion; reine Dekoration kann einen leeren Alt-Text erhalten. Der Kontext bestimmt, was Personen ohne Bildwahrnehmung benötigen.

Als Gestaltungsreferenz nennt WCAG mindestens 4,5:1 Kontrast für normalen und 3:1 für großen Text. Die Messung erkennt schwache Kombinationen, bestätigt aber allein keine Barrierefreiheit der gesamten E-Mail.

Prüfe, ob Angebot und wesentliche Bedingungen verfügbar bleiben, wenn Bilder nicht laden. Halte wichtige Inhalte als editierbaren Text vor und teste die Lesereihenfolge. Enthält ein Bild sonst nirgends verfügbare Informationen, entscheide über eine gleichwertige Alternative.

Dunkelmodus und ersetzte Schriftarten können das Ergebnis ebenfalls verändern. Prüfe relevante E-Mail-Programme deiner Zielgruppe und dokumentiere Beobachtungen. Eine korrekte Darstellung in einem Programm beweist keine identische Darstellung in allen anderen.

Die umgesetzte E-Mail zusätzlich zum Entwurf prüfen

Prüfe beim Übertragen des Designs in die Plattform Links, Variablen, bedingte Blöcke und Bilder. Für Personalisierung muss feststehen, was bei fehlendem Namen oder Produktdetail passiert. Teste diese Fälle ausdrücklich: Das vollständigste Profil repräsentiert nicht sämtliche Empfänger.

Klaviyo ermöglicht Vorschauen und Test-E-Mails mit Profil- oder Ereignisdaten. Verwende passende Beispiele: Eine allgemeine Kampagne und eine bestellbezogene Nachricht benötigen nicht zwingend dieselben Informationen.

Klaviyo weist darauf hin, dass Gmail Nachrichten anhand der HTML-Größe abschneiden kann; Bilddateien zählen dabei nicht mit. Fotos zu komprimieren und Code zu reduzieren sind unterschiedliche Aufgaben.

Sammle keine versteckten Module oder doppelten Varianten an, ohne deren Aufwand zu prüfen. Kontrolliere das versendete Ergebnis und seine Ziele, besonders nach Tracking-Ergänzungen oder Bedingungsänderungen. Eine Vorschau verringert Unsicherheit, ersetzt aber nicht die Prüfung der empfangenen Nachricht.

Eine Freigabe, die Veröffentlichung und Lernen ermöglicht

Die Abschlussprüfung sollte Gestaltung, Inhalt und Funktion zusammenführen. Im Kampagnenmanagement muss klar sein, welche Version freigegeben wurde und was sich danach geändert hat. Eine scheinbar kleine Anpassung kann eine Bedingung verändern oder einen Link beschädigen.

Diese Kriterien helfen bei der Abnahme.

• Angebot, Produkte und Bedingungen entsprechen dem bestätigten Briefing.
• Betreff, Vorschautext und Nachricht ergänzen sich inhaltlich.
• Die mobile Lesereihenfolge ist klar; wesentliche Inhalte bleiben lesbar.
• Links beschreiben ihre Ziele und funktionieren mit endgültigen Parametern.
• Für fehlende Daten und Sprachvarianten gibt es geprüfte Ersatzinhalte.
• Editierbare Datei, Ressourcen und freigegebene Version sind eindeutig benannt.

Nutze nach dem Versand E-Mail-Kennzahlen und Kundenfragen für die nächste Änderung. Schreibe einen Umsatzunterschied nicht allein dem Design zu, wenn auch Zielgruppe, Angebot oder Saison wechselten. Bewahre Hypothese und Kontext, damit die kreative Arbeit auf Erkenntnissen aufbaut.

Quellen und weiterführende Informationen

• W3C · Textalternativen nach Bildfunktion
• W3C · Mindestkontrast für Text
• Klaviyo · Abgeschnittene E-Mails in Gmail
• Klaviyo · E-Mail-Vorschau und Testversand