Mobiloptimierte E-Mail
22.4.2026
Immer mehr E-Mails werden heutzutage auf dem Smartphone gelesen – manche Studien sprechen von über 50%. Auch wenn dieser Prozentsatz zielgruppenspezifisch sicher Unterschiede aufweist: das Handy ist heute allgegenwärtig. Umso wichtiger, dass Ihre E-Mail auch auf dem kleinen Display eine gute Figur macht. Denn tut sie es nicht, wird sie schnell gelöscht.
Technisch gesehen lässt sich die die Anpassung zwischen Desktop- und Smartphone-Mail über das „responsive Design“ für E-Mails lösen. Bei dieser Form des Designs passt sich die Anzeige der E-Mail bei den meisten Mail-Programmen automatisch an das Endgerät an:
- Mehrspaltige Elemente werden untereinander dargestellt - nicht nebeneinander. Zunächst die erste Spalte mit ihren Inhalten, dann die zweite etc…
- Bilder werden verkleinert
- Das Textfeld wird verkleinert
- Text wird automatisch umgebrochen.
Die Vorlagen im GTC Template-Editor sind selbstverständlich alle im Responsive-Design angelegt und passen sich somit alle automatisch an.
Zusätzlich gibt es Punkte bei der Gestaltung an sich zu beachten:
- Gut lesbare, große Schrift:
Um längere Texte auch auf kleinen Displays leicht lesen zu können, empfiehlt sich eine Schriftart, die leicht zu erfassen ist mit einer Schriftgröße von mindestens 14 px. - Einspaltiges Design:
Ein einspaltiges Element ist auf dem Handy am besten lesbar. Wenn Sie viele „Smartphone“-Leser ansprechen, sollten Sie Ihr Design einspaltig anlegen. Auch wenn mehrspaltige Elemente im Responsive Design untereinander angezeigt werden: diese Darstellung verlängert die Mail bei der Darstellung auf dem kleinen Display erheblich. - Bilder – weniger ist mehr:
Bilder verlängern die Ladezeiten, was gerade unterwegs relevant sein kann. Bauen Sie nur so viele Bilder ein, wie notwendig und passen Sie die Bildgröße dem von Ihnen gewählten Bildelement (einspaltig 600 px Breite) an. Unnötig große Dateien führen zu längeren Ladezeiten und belasten ggf. das Datenvolumen des Lesers. - Kurze Betreffzeilen und Texte:
Das Smartphone Display bietet erheblich weniger Platz als ein PC-Bildschirm. Dadurch werden Betreffzeilen ggf. nicht komplett angezeigt, und ein langer Text ist ohne Scrollen nicht zu lesen. Nutzen Sie den begrenzten Platz optimal aus: durch kurze Betreffzeilen (max. 30-40 Zeichen) und kurze prägnante Texte. - Mit Kontrasten arbeiten:
E-Mails auf dem Handy werden auch bei schlechten Lichtverhältnissen, z.B. bei Sonne gelesen. Wählen Sie daher dunkle Schrift auf hellem Hintergrund und verzichten Sie auf alles, was schwer zu lesen oder zu erkennen ist. - Klickfreundliche Buttons:
Buttons sollten auch auf dem kleinen Smartphone gut zu erkennen und mit nur einem Finger einfach zu klicken sein. Legen Sie die Buttons ausreichend groß an, mit einer Schriftgröße von mind. 18 px.
Tipp: wenn Sie sie mittig platzieren, können Sie sowohl von rechts als auch von links gut geklickt werden. - „Dark mode“ beachten:
Viele nutzen den Dunkelmodus bei der Handyanzeige: der Hintergrund wird dann dunkel und die Schrift hell dargestellt. Berücksichtigen Sie dies beim Anlegen der Bilder. Freigestellte Bilder sollten auch auf dunklem Hintergrund gut erkennbar sein - bei ganz dunklen Bildern oder Grafiken kann das ein Problem sein. Manche Grafiken haben einen weißen Hintergrund – was in normalen Tests auf weißem Hintergrund nicht auffällt – bei einem dunklen Hintergrund aber eventuell zu unschöner Darstellung führen kann.
Tipp: Testen Sie vorher auf einem Handy mit entsprechender Einstellung, ob Ihre E-Mail auch da gut lesbar ist.
In unserem Template-Editor können Sie sich Ihr Design direkt bei der Erstellung auf unterschiedlichen Display-Größen anzeigen lassen: direkt im Template-Editor über das „Bildschirm-Symbol“ in der Kopfzeile.
