--- title: "E-Mail-Design: Best Practices für Onlineshops | Chargezen" description: "So gestaltest du Marketing-E-Mails für Smartphone, Dunkelmodus und alle Leser: Layout, Schriften, Bilder, Buttons, Kontrast und eine Checkliste vor dem Versand." url: "https://chargezen.com/de/blog/email-design-best-practices" lang: "de" updated: "2026-11-01" --- Canonical URL: https://chargezen.com/de/blog/email-design-best-practices # E-Mail-Design: Best Practices für Smartphone, Dunkelmodus und Barrierefreiheit Claire Mitchell Lifecycle Marketing Lead, Chargezen 1\. November 2026 · 4 Min. Lesezeit Gutes E-Mail-Design macht auf dem Smartphone eine einzige Aktion offensichtlich. Nutze eine Spalte, großen, gut lesbaren Text, einen großen Button, echten Text statt Wörtern in Bildern und genug Kontrast für helle und dunkle Ansicht. Teste die E-Mail dann in den Posteingängen, die deine Kunden nutzen. Eine E-Mail ist keine kleine Website. Posteingänge entfernen manchen Code, blockieren manche Bilder und ändern Farben, deshalb sind einfache Designs am sichersten. Schlicht muss nicht langweilig heißen. Ein starkes Foto, gute Worte und ein klarer Button können viel tragen. ## Wie sieht ein gutes Layout für Marketing-E-Mails aus? * **Eine Spalte** : Sie liest sich auf jedem Bildschirm gleich. Heb dir Blöcke nebeneinander für Produktraster auf, die auch untereinander funktionieren. * **Oben: Marke und Kernaussage** : Ein kleines Logo, dann die Überschrift. Verschwende den oberen Bildschirmbereich nicht an eine Navigationsleiste. * **Eine Hauptaktion** : Wenn sich ein Leser eine Sache merkt, welche ist das? Mach daraus den ersten und größten Button. * **Großzügiger Abstand** : Daumen brauchen Platz. Abstand zwischen den Abschnitten hilft beim Überfliegen. * **Eine nützliche Fußzeile** : Deine Adresse, der Abmeldelink und eine Möglichkeit, Einstellungen zu ändern oder dich zu kontaktieren. ## Wie gestaltest du fürs Smartphone? Geh davon aus, dass die E-Mail zuerst auf dem Smartphone gelesen wird. Prüfe vor dem Versand Folgendes: * Fließtext, der groß genug ist, um ihn ohne Zoomen zu lesen. Etwa 16 Pixel sind ein üblicher Ausgangspunkt. * Buttons, die groß genug zum Tippen sind, mit Platz drumherum. [Apples Design-Tipps](https://developer.apple.com/design/tips/) empfehlen für Apps Bedienelemente von mindestens 44 mal 44 Punkten, und das ist auch für E-Mails ein nützlicher Richtwert (geprüft am 1. November 2026). * Kurze Absätze. Ein Absatz, der auf dem Laptop gut aussieht, wird auf dem Smartphone zur Textwand. * Bilder, die sich an den Bildschirm anpassen, mit den wichtigen Wörtern außerhalb der Bilder. ## Wie gestaltest du für den Dunkelmodus? Manche Apps kehren Farben im Dunkelmodus um oder passen sie an, und zwar nicht alle auf dieselbe Weise, du kannst es also nicht ganz kontrollieren. Aber du kannst dafür sorgen, dass deine E-Mail es übersteht: * Speichere Logos als PNG mit transparentem Hintergrund und ergänze eine helle Kontur oder etwas Innenabstand, damit ein dunkles Logo auf dunklem Hintergrund nicht verschwindet. * Vermeide fest in Bilder eingebetteten Text auf weißem Hintergrund. Daraus wird ein greller Kasten. * Verlass dich für die Bedeutung nicht allein auf Farbe. * Teste in den Apps, die deine Kunden am meisten nutzen, in beiden Modi. ## Wie machst du E-Mails barrierefrei? | Das tun | Warum | | --- | --- | | Textkontrast bei 4,5:1 oder mehr halten (3:1 bei großem Text) | Das Minimum von WCAG-Stufe AA und für alle bei hellem Licht leichter lesbar | | Alt-Text für Bilder schreiben, die Bedeutung tragen | Screenreader lesen ihn vor, und er erscheint, wenn Bilder blockiert sind | | Echten Text statt Textbildern nutzen | Er lässt sich vergrößern, übersetzen und vorlesen | | Aussagekräftige Linktexte nutzen | „Stiefel ansehen“ hilft; „Hier klicken“ sagt einem Screenreader nicht, wohin es geht | | Echte Überschriften und eine logische Reihenfolge nutzen | Wer einen Screenreader nutzt, navigiert danach | | Schnell blinkende Animationen vermeiden | Sie können ablenken und Menschen mit bestimmten Erkrankungen schaden | Die Kontrastwerte stammen aus [WCAG 2.2, Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), geprüft am 1. November 2026. ## Wie gehst du mit Schriften und Bildern um? * **Schriften** : Webfonts laden nicht überall. Wähle eine Ersatzschrift, mit der du zufrieden bist, etwa Arial oder Georgia, und prüfe, wie sie aussieht. * **Bildgröße** : Komprimiere Bilder, damit die E-Mail auf dem Smartphone schnell öffnet. Sehr große Dateien sind über Mobilfunk langsam. * **Blockierte Bilder** : Manche sehen deine E-Mail ohne Bilder. Ergäbe sie dann noch Sinn? * **E-Mail-Länge** : Halte den Code schlank. Gmail schneidet sehr große Nachrichten ab, laut [Litmus](https://www.litmus.com/blog/how-to-keep-gmail-from-clipping-your-emails) bei etwa 102 KB Code (geprüft am 1. November 2026), was deine Fußzeile und deinen Abmeldelink verbergen kann. * **Animierte GIFs** : In Maßen in Ordnung. Achte darauf, dass das erste Bild allein funktioniert, denn manche Apps zeigen nur dieses. ## Wie sollte sich eine Produkt-E-Mail von einem Newsletter unterscheiden? | E-Mail | Layout | Hauptaktion | | --- | --- | --- | | Sale | Überschrift mit dem Angebot, dann ein kleines Produktraster | Zum Sale | | Neues Produkt | Ein großes Bild, ein paar Details, ein Button | Produkt ansehen | | Newsletter | Ein einheitlicher Kopf, eine Hauptgeschichte, kleinere Links | Geschichte lesen | | Warenkorb-Erinnerung | Das Produkt, der Preis, ein Button; wenig Ablenkung | Zurück zum Warenkorb | | Bestellupdate | Schlicht und sachlich; Bestelldaten zuerst | Bestellung verfolgen | ## Was solltest du vor dem Versand prüfen? * Sende dir einen Test aufs Smartphone, auf den Laptop und im Dunkelmodus. * Klicke auf jeden Link, auch Logo und Fußzeile. * Lies die E-Mail ohne Bilder. * Prüfe die Platzhalter mit einem echten Kunden und einem Kunden mit fehlenden Angaben. * Prüfe, ob der Abmeldelink funktioniert und ob deine Geschäftsadresse enthalten ist. * Leg [Vorschautext](https://chargezen.com/de/blog/email-preview-text) und Betreff fest. ## E-Mails in SmartyTap gestalten SmartyTaps [E-Mail-Editor](https://chargezen.com/de/smartytap/email-marketing) arbeitet mit Blöcken, gespeicherten Vorlagen, Versionen und Markenstilen, sodass deine nächste E-Mail mit deinem eigenen Design beginnt statt mit einer leeren Seite. Sieh dir eine E-Mail vor dem Senden mit Beispieldaten an. Marketing-E-Mails bieten das Abmelden mit einem Klick, und Links können [UTM-Tracking](https://chargezen.com/de/docs/smartytap/campaigns/utm-tracking) für deine Berichte mitführen. Auch E-Mails bereits gestarteter Kampagnen bleiben bearbeitbar: Was zugestellt wurde, bleibt zugestellt, und mit „Update scheduled sends“ wechselt alles, was noch wartet, zu deiner neuen Version. ## Häufige Fragen ### Wie breit sollte eine Marketing-E-Mail sein? Etwa 600 Pixel sind seit Langem die übliche Breite, und ein einspaltiges Layout lässt sich auf Smartphones gut verkleinern. Prüfe deine E-Mails auf echten Geräten. ### Welche Schriftgröße sollte ich in E-Mails nutzen? Etwa 16 Pixel für den Fließtext sind ein üblicher Ausgangspunkt, dazu größere Überschriften. Auf dem Smartphone sollte niemand hineinzoomen müssen. ### Wie sorge ich dafür, dass E-Mails im Dunkelmodus gut aussehen? Nutze transparente Logos mit heller Kontur, vermeide Text in Bildern mit weißem Hintergrund und teste in den Apps, die deine Kunden nutzen. Jede App geht anders mit dem Dunkelmodus um. ### Sollte eine E-Mail nur aus Bildern bestehen? Nein. E-Mails nur aus Bildern können kaputtgehen, wenn Bilder blockiert sind, lassen sich von Screenreadern nicht lesen und sind auf Smartphones schwerer zu lesen. Halte die wichtigen Wörter in echtem Text. Geschrieben von ## Claire Mitchell Lifecycle Marketing Lead, Chargezen Claire verantwortet das Lifecycle-Marketing bei Chargezen und schreibt über Kundeninteraktion und die wachsende Rolle von KI bei der Kundenbindung. Sie zeigt, wie Unternehmen E-Mail, SMS, Messaging-Plattformen und Verhaltensdaten nutzen, um entlang der gesamten Customer Journey relevantere Kundenerlebnisse zu bieten. Im Mittelpunkt ihrer Beiträge stehen Marketing-Automatisierung, intelligente Segmentierung, personalisierte Kampagnen und Strategien, mit denen Marken Wiederholungskäufe und den Kundenwert über die gesamte Kundenbeziehung steigern. [claire@chargezen.com](mailto:claire@chargezen.com) ## Ähnliche Artikel [ Marketing · 6 Min. Lesezeit ### KI im E-Commerce-Marketing: Wöchentliche Kampagnenberichte auf Autopilot Ein KI-Agent stellt jede Woche Meta- und Google-Ads-Ausgaben neben deine echten Bestellungen: was du anforderst und warum Lesezugriff der sichere Start ist. ](https://chargezen.com/de/blog/ai-for-ecommerce-marketing)[ Marketing · 4 Min. Lesezeit ### UGC vs. Influencer-Marketing: Was deine Marke braucht Mit UGC kaufst du nutzbare Inhalte, mit Influencer-Marketing Inhalte plus Publikum. Unterschiede bei Kosten, Rechten und Ergebnissen, und wann du beides nutzt. ](https://chargezen.com/de/blog/ugc-vs-influencer-marketing)[ Marketing · 4 Min. Lesezeit ### Benchmarks zur Interaktionsrate von Influencern nach Plattform und Stufe Was ist eine gute Interaktionsrate? Belegte Benchmarks 2026 für TikTok und Instagram nach Follower-Stufe, warum Quellen abweichen, wie du Creator selbst prüfst. ](https://chargezen.com/de/blog/influencer-engagement-rate-benchmarks) ## Bereit, deinen Abo-Umsatz zu steigern? Schließ dich führenden Marken an, die mit Chargezen Kündigungen senken, den Umsatz steigern und Abläufe automatisieren. [Loslegen](https://admin.chargezen.com/signup)