E-Mail-Vorlagen im Responsive Design
13.02.2026
E-Mailings sind eines der wirkungsvollsten Instrumente im digitalen Marketing. Per E-Mailing können Sie Kunden direkt und persönlich ansprechen, die Kundenbindung stärken und - richtig eingesetzt - eine hohe Reichweite zu vergleichsweise niedrigen Kosten erzielen.
Wie überall im Marketing spielt die Gestaltung eine große Rolle. Aber im Gegensatz zum Print-Bereich, wo ein Flyer bei jedem Empfänger genau gleich ankommt, hängt die Darstellung einer E-Mail komplett vom Endgerät ab: wenn der Inhalt, der auf einem großen, breiten Bildschirms wunderbar aussieht, auf dem kleinen Handy einfach nur 1:1 verkleinert dargestellt wird, führt das zu einem komplett anderen Leseerlebnis und somit einer ganz anderen (als der erwünschten) Wirkung.
Genau das verhindert der Versand einer E-Mail im Responsive Design. Was genau Responsive Design ist und wie Sie es sinnvoll einsetzen, das erklären wir Ihnen hier.
Responsive Design - das verbirgt sich dahinter
Ein normales E-Mailing ist auf einen Desktop optimiert. Wird es auf einem Smartphone geöffnet, ist es einfach nur verkleinert: Schriften schrumpfen und sind kaum mehr lesbar, der Inhalt lässt sich ohne horizontales Scrollen nicht erfassen und Links sind kaum mehr zu klicken. Dies sorgt unweigerlich für Frust beim Empfänger.
Hier setzt Responsive Design an - ein Gestaltungskonzept im Webdesign. Es sorgt dafür, dass sich Layout, Schriftgrößen, Bilder und Buttons automatisch an die Bildschirmgröße des Empfängers anpassen. Inhalte bleiben lesbar und Navigationselemente gut bedienbar – unabhängig vom verwendeten Endgerät. Dies sorgt für eine gute Lesbarkeit Ihrer E-Mail - ganz unabhängig von der Größe des Endgeräts.
So sieht das in der Praxis aus
Eine im Responsive-Design programmierte E-Mail passt sich den Gegebenheiten des Endgerätes an: nicht nur Texte und Bilder werden gemäß Bildschirmgröße skaliert - der gesamte Aufbau passt sich der Bildschirmgröße an. Mehrspaltige Elemente werden auf dem Handy dann nicht mehrspaltig nebeneinander angezeigt: die Elemente gruppieren sich vielmehr untereinander. Dies vermeidet horizontales Scrollen und garantiert die perfekte Lesbarkeit der E-Mail - ganz gleich, auf welchem Endgerät sie gelesen wird.
Auch wenn oder besser gesagt "gerade weil" die Darstellung technisch angepasst wird: damit die Mail für den Leser auf kleinen Bildschirmen auch wirklich verständlich und sinnvoll angezeigt wird, gibt es bei der Gestaltung einiges zu beachten.
Wichtig zu beachten bei der Gestaltung
Aufbau
- Möglichst gleichbleibender Aufbau:
Platzieren Sie Bilder und Texte im gleichen Schema untereinander (z.B. immer links Bild und rechts Text). Wenn Sie den Aufbau abwechseln (Bild mal rechts / mal links) ist es möglich, dass auf dem Smartphone zwei Bilder direkt untereinander angezeigt werden, der Text erscheint einmal darüber, einmal darunter. - Wenige Elemente nebeneinander:
da die Elemente auf dem Smartphone untereinander dargestellt werden, können viele Elemente das E-Mailing sehr lang machen. Setzen Sie nur 2 bis maximal 3 Elementen nebeneinander. - Große Buttons:
Achten Sie auf große Buttons, welche leicht mit dem Finger angeklickt werden können und vermeiden Sie Verlinkungen im Text.
Text
- Weniger ist mehr:
denken Sie daran, dass viele E-Mails auf dem Smartphone gelesen werden - lange Texte erfordern viel Scrollen. Und auch das Lesen auf dem Smartphone ist dann wenig angenehm. Nehmen Sie Informationen an den Text-Anfang. Dann werden sie auch gelesen, wenn man nicht ganz nach unten scrollt. - Passende Schriftgrößen:
die Schriftgröße wird zwar proportional angepasst, Ausgangspunkt ist aber Ihre definierte Schriftgröße. Wählen Sie diese daher nicht zu klein, da sie sonst schlechter lesbar ist. - Personalisierungen beachten:
Beachten Sie die Laufweite Ihrer Personalisierungen, denn auf dem Smartphone ist diese geringer als auf dem Desktop. Bei viel Inhalt kann es zu unerwünschten Umbrüchen kommen.
Grafik
- Keine festen Bildbreiten: Damit die verwendeten Bilder sich anpassen können, dürfen Sie keine festen Bildbreiten angeben - sonst wird Ihr Bild auf dem Smartphone genauso groß dargestellt wie auf dem Desktop.
- Alternative Bildtexte: Geben Sie für Bilder Alternativtexte an. Besonders wichtig sind diese, wenn sich der Inhalt der Mail auf das Bild bezieht. Empfänger, welche die Bilder nicht nachladen können dennoch die Struktur Ihrer E-Mail erkennen.
- Nicht zu große Bilder: Auch wenn die Grafiken skaliert werden, verwenden Sie möglichst nicht zu große Bilder. Bei der mobilen Ansicht kann das Nachladen sonst viel Datenvolumen verbrauchen. Integrierter Text in großen Bildern ist beim Skalieren evtl. auch nicht mehr lesbar.
Besonderheiten bei Struktur und Bildern
Spontan hört es sich so an, als wäre Responsive Design die einfache Universallösung für alle E-Mailings - damit das E-Mailing aber die gewünschte Wirkung auch auf dem Smartphone erzielt, gilt es die Besonderheiten beim Aufbau zu beachten und das Verhalten bei bildunterdrückten Versionen mit zu berücksichtigen:
Struktur:
Ihre E-Mailings brauchen eine möglichst einheitliche Struktur: Arbeiten Sie mit zweispaltigen Elementen, sollten diese möglichst immer gleich aufgebaut sein (z.B. Text links, Bild rechts), damit auch bei der mobilen Anzeige (bei der Text und Bild dann untereinander erscheinen) der Leser eine logische Struktur und Text-Bild-Zusammenhang erkennen kann. Es kann sonst passieren, dass mehrere Bilder untereinander erscheinen und der erklärende Text komplett ober- oder unterhalb angezeigt wird, ohne sich für den Leser logisch zu erschließen.
Bildunterdrückte Version:
Beim E-Mail-Versand werden Bilder üblicherweise nicht mitgesandt, sondern in Form von Links mitgeliefert und nachgeladen. Vor dem Nachladen der Bilder sieht der Empfänger eine bildunterdrückte Version. Bei normalen Desktop-Versionen wählt man den Aufbau üblicherweise so, dass statt des Bildes in gleicher Größe ein (farbiges) Rechteck mit Text erscheint. So bleibt der Aufbau der E-Mail erhalten. Dies ist naturgemäß beim Versand im Responsive-Design nicht möglich: da man möchte, dass sich die Bilder automatisch anpassen, werden keine Größen angegeben. In einer Version ohne nachgeladenen Bilder, wird daher nur ein einzeiliger, ggf. farbig hinterlegter Alternativ-Text angezeigt.
Bildunterdrückte Version
HTML Version
Optimieren für Smartphone oder PC-Bildschirm?
Auch wenn die Vorlage sich beim Responsive Design technisch gesehen automatisch ans Endgerät anpasst: die Grundlagen für ein erfolgreiches E-Mailing je nach Endgerät legen Sie selbst, durch Aufbau, Textlänge, Bild- und Button-Elemente. Das erfordert manchmal ein Abwägen: auf dem großen Büro-Bildschirm wirken andere Inhalte als auf dem kleinen Smartphone-Display. Welcher Endgerättyp eher genutzt wird, kann von Zielgruppe zu Zielgruppe unterschiedlich sein.
Damit Sie beim Aufbau Ihrer E-Mailings die richtige Priorität setzen können, ist es gut, wenn Sie das Leseverhalten Ihrer Abonnenten kennen. Es liegt nahe, dass bspw. B2B-Mails an den Einkauf während der normalen Geschäftszeiten vermutlich eher auf dem Bürorechner gelesen werden, während viele Mails nach Feierabend im B2C-Bereich vermutlich auf dem Handy ankommen. Ihre Vermutungen lassen sich aber auch mit Fakten untermauern: Nach dem Versand finden Sie in Ihrem Kundenbereich bspw. eine Auswertung darüber, wie Ihre E-Mails geöffnet wurden - sofern die Öffnungsratenmessung aktiviert war. Dies kann zu neuen Erkenntnissen führen und Ihnen die Entscheidung erleichtern.
Fazit
Responsive Design ist optimal für Ihre E-Mailings, die so auf unterschiedlichen Endgeräten gelesen werden können. Damit sorgen Sie dafür, dass Ihre E-Mail sowohl auf dem PC, dem Tablet und auf dem Smartphone eine gute Figur macht. E-Mail-Vorlagen bei E-Mail-Dienstleitern sind in der Regel genau so angelegt - Sie müssen hier technisch gesehen nichts machen.
Wichtig ist aber, dass Sie bei Aufbau und Gestaltung Ihres E-Mails die Besonderheiten des Responsive-Designs beachten, damit Ihre E-Mail auf dem großen Bildschirm den gleichen Erfolg hat wie auf dem kleinen Handy-Display. Im Template-Editor von GTC, in dem Sie sich selbst ganz einfach Ihre Vorlagen zusammenstellen können, können Sie sich per Klick die Ansichten auf unterschiedlichen Bildschirmgrößen anzeigen lassen. Ohne diese Ansicht gilt ganz klar: testen, testen, testen, auf großen wie kleinen Bildschirmen. Damit Sie sicher sind, dass Ihre E-Mail bei jedem Empfänger gut ankommt!
Keine Zeit für für die Gestaltung? Wir erstellen gerne eine Vorlage gemäß Ihren Wünschen für Sie! Und das Schöne daran: in unserem Template-Editor können Sie diese bei einem weiteren Mailing jederzeit verwenden, anpassen und neu versenden. Interesse? Dann rufen Sie uns an unter Tel.: +49-(0)7 11-4 90 90-82 oder kontaktieren Sie uns.
