Die Optimierung für die unterschiedlichen Geräte, bspw. die mobile Ansicht, ist nicht einfach. Zum Glück haben viele E-Mail Toolanbieter bereits einen „What You See Is What You Get“-Editor. Damit kannst du separate Templates für die Ansicht auf dem Desktop und anderen Devices erstellen. Ansonsten gibt es diese Möglichkeit auch bei Adobe Dreamweaver. Das Gute an den Editoren ist dass keine Code Kenntnisse unbedingt haben muss. Allerdings empfehle ich dir schon die Basis Befehle zu lernen um das Template und dessen Aufbau zu verstehen.
Bei der Schriftgröße ist diese meistens in der mobilen Ansicht zu groß. Eine entsprechende Anpassung der Headline- und Fließtext-Schriftgrößen ist zwingend erforderlich. Jahrelang wurden Grafiken verwendet auf denen der Text stand oder Grafiken von Buttons. Es gab dann immer Probleme bei der Skalierung auf den verschiedenen Geräten bei der Lesbarkeit. Dies ist heute anders. Wenn du Grafiken verwendest sollten diese keinen Text haben oder noch besser den Text extra haben. Dies hat den Vorteil dass nicht nur Grafiker Überschriften, Textinhalte oder Call-to-Action (CTA) Buttons bearbeiten und schnell anpassen können.
Wie du dein E-Mail-Design für Mobilgeräte und Desktop optimieren kannst
Video auf YouTube ansehen (7:10 Min.)Ein weiterer Punkt ist das Deaktivieren von Elementen, also diese in der mobilen Ansicht nicht anzuzeigen. Aufgrund des kleinen Bildschirm im Mobil Bereich wirkt ein Newsletter schnell überladen und unübersichtlich. Dies hat natürlich Auswirkungen auf das Leseverhalten dieser Gruppe. Ein gängiges Beispiel wäre die Navigation. Ursprünglich sind es vielleicht fünf oder mehr Menüinhalte im Header. Diese werden für den mobilen Newsletter auf drei Menüpunkte reduziert. Eine andere Möglichkeit ist Mobile first. Hier werden alle Inhalte basierend für den kleinen Bildschirm zuerst entwickelt und dann für den größeren Bildschirm. Häufig gibt dann die mobile Ansicht auch die Desktop Version vor. Dies bedeutet beispielsweise das beide Ansichten nur drei Menüpunkte.
Kennst du schon die E-Mail Design Trends? Campaign Monitor hat übrigens einen guten Guide für die mobile Ansicht verfasst.
Ergänzung Oktober 2026
Bevor ein Mailing rausgeht, hilft dir eine kurze Prüfliste für die mobile Ansicht.
- Einspaltig denken: Mehrspaltige Bereiche sollten auf dem Smartphone untereinander rutschen. Prüfe, ob die Reihenfolge dann noch Sinn ergibt.
- Tippen statt Klicken: Buttons müssen groß genug für den Daumen sein. Zwei Links direkt nebeneinander führen schnell zum falschen Klick.
- Schrift prüfen: Lies den Fließtext auf einem echten Gerät, ohne zu zoomen. Überschriften dürfen nicht über mehrere Zeilen zerfallen.
- Bilder skalieren: Bilder sollten sich der Bildschirmbreite anpassen und nicht seitlich herausragen.
- Dunkelmodus testen: Viele Nutzer lesen Mails im Dark Mode. Logos mit transparentem Hintergrund und dunkler Schrift verschwinden dort leicht.
- Auf echten Geräten testen: Ergänze die Vorschau im Tool um einen Testversand an dein eigenes Smartphone.
Ein häufiger Fehler ist Text, der als Bild eingebaut ist. Auf kleinen Bildschirmen wird er unleserlich, und bei blockierten Bildern fehlt er ganz.
Ein zweiter Fehler ist eine lange Strecke bis zum ersten Button. Auf dem Smartphone sieht der Leser zuerst nur einen kleinen Ausschnitt. Der wichtigste Call-to-Action gehört deshalb in den oberen Bereich.
Schau dir außerdem in deinem E-Mail Tool an, welche Geräte deine Empfänger nutzen. Danach richtest du die Priorität deiner Tests aus.
