Design options
Die Basics des Template-Designs für E-Mails drehen sich um Template-Grösse, Layout, Branding und wenn nötig Custom Code Templates.
Wie gross soll ein E-Mail-Template eigentlich sein? Die Meinungen gehen auseinander. Die meisten E-Mail-Tool-Provider arbeiten mit Einstellungen zwischen 600 und 800 Pixeln Breite. Bewährt hat sich ein Format von 600 px Gesamtbreite mit 300 px Spaltenbreite. Der grosse Vorteil: Das funktioniert sowohl in Desktop-Anwendungen als auch im Browser und auf mobilen Geräten einwandfrei. Die 300 px Spaltenbreite garantiert einen sauberen Umbruch auf den meisten Endgeräten. Selbst wenn Mobile-Geräte die Gesamtbreite um 50 Prozent skalieren, bleibt die Qualität akzeptabel.
Bei neueren iPhone-Generationen, vor allem den Pro Max Modellen oder bei Android-Flaggschiffen wie Samsung Galaxy, sieht’s anders aus. Diese Screens nutzen Breiten von deutlich über 300 px. Lohnt sich eine Anpassung? Für kleinere Verteiler eher nicht. Für Unternehmen wie Adidas oder Nike mit mehreren Millionen E-Mail-Adressen in der Distribution List definitiv. Was wir in der Praxis sehen: Für die meisten Schweizer KMU ist das 600/300 px Raster völlig ausreichend. Die optimale Template-Grösse findet man durch Analyse der verwendeten E-Mail-Clients und mehrere Tests auf verschiedenen Display-Grössen.
Das Template-Layout hängt primär von zwei Faktoren ab: Mailing-Aufgabe und Template-Grösse.
- Einspaltige Templates eignen sich besonders für einzelne Themen wie Ankündigungen oder längere Artikel. Der User kann das Mailing linear durchlesen, was die Aufmerksamkeit erhöht. Nachteil: Je nach Content-Menge wird das E-Mail sehr lang und der Leser muss viel scrollen.
- Mehrspaltige Layouts nutzt man hauptsächlich für die Darstellung von Produkten oder mehreren Artikeln. Perfekt für Newsletter von Content-intensiven Websites, die als Traffic-Quelle dienen. Aber Vorsicht: Vor allem auf Mobile-Devices kann ein mehrspaltiges Layout problematisch werden. Selbst ein dreispaltiges Layout kann zu unerwünschten Effekten bei der Ausrichtung von Grafiken führen. Bei Desktop-Darstellungen müssen Farben und Texte aufeinander abgestimmt sein, um visuelle Verwirrung zu vermeiden.
Es gibt auch die Option, ein E-Mail-Template in HTML zu programmieren (Custom Code Templates). Das kreative Design-Potenzial ist praktisch unbegrenzt. Das spiegelt sich allerdings im Preis wider, denn Custom Code Templates befassen sich hauptsächlich mit der Integration grafischer Details in Inline CSS (Cascading Style Sheets) und der Optimierung der mobilen Darstellung auf verschiedenen E-Mail-Clients.
Das Branding der eigenen E-Mails ist genauso wichtig wie die Design-Optionen im E-Mail-Marketing. Die versendeten E-Mails sollten das gleiche Branding haben wie die eigene Website, der Social-Media-Auftritt oder andere Werbemittel. Das erhöht den Wiedererkennungswert enorm. Beispiel: Das Firmenlogo ziert den Header der E-Mails, die Unternehmensfarben bestimmen das Farbschema. Aber auch Bild- und Textsprache sollten zum Corporate Design passen, um einen konsistenten Auftritt zu schaffen.
Campaign Monitor und die Design School bieten Inspiration für Template-Design-Möglichkeiten. Weitere Anregungen findet man auf reallygoodemails.com.
Die notwendige Unterscheidung zwischen Mobile- und Desktop-Templates
Es macht einen Unterschied, ob E-Mails auf mobilen Geräten oder via Desktop abgerufen werden. In den meisten Fällen unterscheidet sich das Bild, das der User via Desktop erhält, wie bereits oben beschrieben, von dem Bild, das er via Smartphone bekommt. Der korrekte Umbruch von Elementen sowie die Ausrichtung und Skalierung von Bildern ist nicht automatisch gegeben. Aus diesem Grund haben einige E-Mail-Tool-Provider bereits “What You See Is What You Get”-Editoren entwickelt. Das eröffnet die Möglichkeit, unterschiedliche Templates für verschiedene Ansichten zu gestalten.
Besonders wichtig: die Schriftart und vor allem die Schriftgrösse. Für Templates, die auf einem Desktop verwendet werden, nutzt man üblicherweise Schriftgrössen von 14 px bis 16 px. Das gewährleistet gute Lesbarkeit. Für ein Smartphone wäre diese Ansicht zu gross, weshalb eine Anpassung notwendig ist.
Anpassung ist auch bei Schriftelementen auf grafischen Elementen oder Buttons unerlässlich, da sich die Ansichten zwischen grossen Bildschirmen und mobilen Geräten stark unterscheiden. Werden keine Anpassungen für Mobile Devices vorgenommen, kann die Skalierung zu völliger Unleserlichkeit des Bildinhalts führen.
Zusätzlich kann es Sinn machen, bestimmte Elemente wie eine grosse Anzahl von Bildern oder detaillierte Navigation für die mobile Ansicht zu korrigieren oder komplett zu entfernen, indem man sie deaktiviert. Sonst kann es passieren, dass die mobile Ansicht schnell überladen wirkt. Beispiele für erfolgreiche Mobile- und Desktop-Templates sind die Online-Shops REBELLE und NAU Clothing.
Das Template und der CTA
Das Ziel des Mailings ist sicherzustellen, dass der Kunde das ihm unterbreitete Angebot tatsächlich wahrnimmt. Eine der Voraussetzungen dafür: Der Kunde muss auf einen Blick sehen können, wie er das tun kann. Der CTA darf im Rest des Template-Designs nicht untergehen.
In den meisten Fällen werden E-Mail-Templates als Gesamtprodukt gestaltet, aber es wird ignoriert, dass der User den Newsletter nie in voller Grösse sehen kann. Meistens sieht der User nur die oberen 20 Prozent des E-Mails. Aus diesem Grund ist es umso wichtiger, wie dieser relativ kleine Bereich gestaltet wird. Es sollte sichergestellt werden, dass der Leser des E-Mails das ihm präsentierte Angebot tatsächlich versteht. Ausserdem sollte der User durch sinnvolle Positionierung des CTA direkt zur Conversion ermutigt werden, und Interesse sollte geweckt werden, im E-Mail zu bleiben. Am sinnvollsten ist es, wenn der User direkt nach dem Öffnen des E-Mails auf den CTA trifft. Ein Beispiel für eine erfolgreiche Positionierung des Templates ist der Newsletter des Unternehmens Home24.
Natürlich gibt es auch User, die nicht sofort zur Conversion übergehen, sobald sie den CTA-Button sehen. Diese User möchten vorab mehr Informationen erhalten, bevor sie überhaupt zur Conversion bereit sind. Aus diesem Grund sollte der CTA nicht ausschliesslich am Anfang des E-Mails verfügbar sein, sondern auch an anderen Stellen im Newsletter. Möglichkeiten für zusätzliche Platzierungen von CTAs sind beispielsweise nach dem Lesen der Einleitung, nach dem Betrachten der angebotenen Produkte oder Artikel oder auch am Ende des E-Mails.
Tools für das Template-Design
Wie bereits oben erwähnt, ist Testen ein wichtiges Instrument für ein optimales Template-Design. Da jeder E-Mail-Client die gesendeten Templates unterschiedlich analysiert, interpretiert und wiedergibt, ist es umso nützlicher, unangenehme Fehlerquellen vor dem Versand über eine E-Mail-Verteilerliste erkennen und somit vermeiden zu können. Der Service Litmus kann verwendet werden, um die optimale Darstellung des eigenen Template-Designs auf verschiedenen E-Mail-Clients zu überprüfen. Dieser Service wird verwendet, um das HTML der erstellten Templates mithilfe virtueller E-Mail-Postfächer der beliebtesten E-Mail-Clients zu testen. Das gibt dem User ein realistisches Bild der E-Mail-Darstellung. Diesen Service findet man unter https://litmus.com/email-testing.
Unsere Erfahrung zeigt: Wer Templates ohne ausreichende Tests ausrollt, erlebt oft böse Überraschungen. Besonders bei Kampagnen mit grösseren Budgets lohnt sich die Investition in professionelles Testing allemal.
Häufige Fragen
Welche Template-Grösse ist 2026 Standard?
600 px Gesamtbreite mit 300 px Spaltenbreite hat sich bewährt und funktioniert auf den meisten Geräten einwandfrei. Für spezielle Zielgruppen mit High-End-Smartphones kann eine Anpassung sinnvoll sein, aber für die meisten Schweizer KMU ist das Standard-Format völlig ausreichend.
Brauche ich separate Templates für Mobile und Desktop?
Nicht zwingend, aber empfehlenswert. Moderne “What You See Is What You Get”-Editoren ermöglichen es, unterschiedliche Templates für verschiedene Ansichten zu gestalten. Vor allem bei Schriftgrössen und komplexen Layouts macht das einen spürbaren Unterschied.
Wie wichtig ist konsistentes Branding in E-Mail-Templates?
Extrem wichtig. E-Mails sollten das gleiche Branding haben wie Website und Social-Media-Auftritte. Das erhöht den Wiedererkennungswert massiv und schafft Vertrauen beim Empfänger.
Wo platziere ich den CTA am besten?
Idealerweise direkt im sichtbaren Bereich nach dem Öffnen des E-Mails , also in den oberen 20 Prozent. Aber auch zusätzliche CTAs nach der Einleitung, bei Produkten oder am Ende des E-Mails machen Sinn, da nicht jeder User sofort konvertiert.
Dieser Beitrag wurde vom ONELINE-Team verfasst. Wir begleiten Unternehmen in Zürich, Zug und der ganzen Schweiz seit über 10 Jahren in der digitalen Transformation , von SEO und SEA bis hin zu KI-Automation und Lead-Generierung.
