Gestaltungsmöglichkeiten
Die Basics der Ausgestaltung von E-Mail-Templates beziehen sich auf die Template-Grösse, das Layout, das Branding und ggf. auf Custom Code Templates.
Die optimale Grösse eines E-Mail-Templates variiert, doch gängige Formate liegen zwischen 600 und 800 px Breite. Die meisten E-Mail-Tool-Anbieter verwenden jedoch Einstellungen, die eine Breite von 600 Pixeln (px) bis 800 px aufweisen. Bewährt hat sich beispielsweise ein Format von 600 px in der Gesamtbreite und eine 300 px Spaltenbreite. Vorteilhaft ist hier vor allem, dass die Darstellung sowohl in den Desktop-Anwendungen der E-Mail-Clients, im Browser, als auch auf mobilen Endgeräten positiv ist. Durch die 300 px Spaltenbreite wird auf den allermeisten Endgeräten ein sauberer Bruch des Contents gewährleistet.
Selbst bei der Verwendung von mobilen Endgeräten, bei denen die Gesamtbreite um bis zu 50 Prozent skaliert wird, bleibt die Qualität vertretbar. Nicht zweckdienlich ist jedoch die Nutzung von 600 px zu 300 px Rastern bei neueren Smartphone-Generationen mit breiteren Displays, da bei den Bildschirmen dieser Geräte Breiten von über 300 px verwendet werden.
Anpassungen bei den Templates, damit auch Nutzer von diesen Modellen die optimale Darstellung der E-Mails erhalten, rechnen sich jedoch erst ab einem grösseren Verteiler. Für Firmen wie beispielsweise Adidas oder Nike, die über Verteiler mit mehreren Millionen E-Mail-Adressen verfügen, ist die Erstellung eines Templates für derartige Endgeräte durchaus lohnenswert. Bei Schweizer KMU in Zürich oder Zug mit kleineren Verteilern ist das Kosten-Nutzen-Verhältnis oft noch nicht gegeben.
Die optimale Template-Grösse für die eigenen E-Mails kann darüber hinaus über eine Analyse der genutzten E-Mail-Clients und durch mehrere Tests zu verschiedenen Darstellungsgrössen erwirkt werden.
Das Template-Layout ist zumeist abhängig von den zwei Faktoren „Aufgabe des Mailings» und die Grösse des Templates.
- Einspaltige Templates eignen sich für Einzelthemen wie Ankündigungen oder längere Artikel. Die einspaltige Gestaltung ermöglicht eine lineare Blickführung des Lesers, wodurch die Aufmerksamkeit erhöht und die Lesbarkeit erleichtert wird. Nachteilig ist jedoch, dass sich die E-Mail je nach Umfang des Inhaltes stark in die Länge ziehen kann und der Leser viel scrollen muss.
- Mehrspaltige Layouts werden vor allem für die Abbildung von Produkten oder mehreren Artikeln verwendet. Dadurch eignen sie sich im Rahmen von Newslettern insbesondere für Webseiten mit beträchtlichem Content, indem sie als Traffic-Quelle für diese Webseiten genutzt werden. Vor Verwendung von mehrspaltigen Layouts sollte umfangreich getestet werden, ob die E-Mails den eigenen Vorstellungen entsprechend dargestellt werden. Vor allem bei mobilen Endgeräten kann ein mehrspaltiges Layout problematisch werden. Bereits ein dreispaltiges Layout kann zu unerwünschten Auswirkungen auf die Ausrichtung von Grafiken führen. Bei Darstellungen auf Desktops müssen die Farben und Texte aufeinander abgestimmt werden, damit kein optisches Durcheinander entsteht.
Custom-Code-Templates bieten maximale Gestaltungsfreiheit, z. B. durch HTML und CSS, und optimieren die Darstellung auf verschiedenen Endgeräten. Vor allem dem kreativen Gestaltungspotenzial sind kaum Grenzen gesetzt. Dies spiegelt sich vor allem im hohen Preis wider, da sich Custom Code Templates vor allem mit der Einbindung von Grafikdetails in Inline-CSS (Cascading Style Sheets = „Sprache» für elektronische Dokumente) und der Optimierung der mobilen Darstellung auf diversen E-Mail-Clients befassen.
Das Branding der unternehmenseigenen E-Mails bildet ebenso wie die vorangegangenen Gestaltungsmöglichkeiten im E-Mail-Marketing einen wichtigen Pfeiler. Die versendeten E-Mails sollten das gleiche Branding aufweisen wie die eigene Webseite, das Facebook-Profil oder sonstige Werbeanzeigen. Der Wiedererkennungswert wird dadurch enorm gesteigert. Beispielsweise kann das Unternehmenslogo den Header der E-Mails zieren und die Unternehmensfarben geben die Farbgestaltung der E-Mails vor. Aber auch die Bild- und Textsprache sollte zu dem Corporate Design des Unternehmens passen, um durchweg ein einheitliches Erscheinungsbild zu kreieren.
Die erforderliche Abgrenzung zwischen Mobile- und Desktop-Templates
Die Darstellung von E-Mails unterscheidet sich stark zwischen Desktop und mobilen Endgeräten. Elemente wie Bilder, Buttons und Schriftgrössen müssen für beide Ansichten optimiert werden.
Der korrekte Bruch von Elementen sowie die Ausrichtung und Skalierung von Bildern ist nicht automatisch gegeben. Aus diesem Grund haben bereits einige E-Mail-Tool-Anbieter „What You See Is What You Get»-Editoren entwickelt. Dadurch wird die Möglichkeit eröffnet, verschiedene Templates für unterschiedliche Ansichten zu entwerfen.
Von besonderer Bedeutung ist hierbei vor allem die Schriftart, aber auch die Schriftgrösse. Für Templates, die auf einem Desktop verwendet werden, werden zumeist Schriftgrössen von 14 px bis 16 px verwendet, da hierbei eine gute Lesbarkeit gewährleistet wird. Für ein Smartphone wäre diese Ansicht zu gross, weshalb eine Anpassung erforderlich wird.
Schriften und Buttons auf Grafiken müssen angepasst werden, um Lesbarkeit und Funktionalität auf allen Geräten sicherzustellen. Erfolgen keine Anpassungen für mobile Geräte, kann eine Skalierung zu einer völligen Unlesbarkeit der Bildinhalte führen.
Was wir in der Praxis bei Schweizer Kunden sehen: Über 60 Prozent der Newsletter werden mittlerweile mobil geöffnet. Wer hier keine optimierte Darstellung bietet, verliert potenzielle Conversions.
Darüber hinaus kann es durchaus sinnvoll sein, bestimmte Elemente wie etwa eine Vielzahl von Bildern oder auch eine detaillierte Navigation für die mobile Ansicht durch Deaktivierung zu entzerren oder ganz zu entfernen. Andernfalls kann es dazu führen, dass die mobile Ansicht schnell überladen wirkt.
Das Template und der CTA
Das Ziel eines Mailings ist es, den Kunden zur Nutzung des Angebots zu bewegen. Der Call-to-Action (CTA) muss daher sofort erkennbar und zugänglich sein. Der CTA darf also nicht in dem übrigen Template-Design untergehen.
E-Mail-Templates sollten so gestaltet sein, dass die wichtigsten Inhalte in den ersten 20 % sichtbar sind, da Nutzer selten den gesamten Newsletter betrachten. Denn der Nutzer nimmt in den meisten Fällen lediglich die oberen 20 Prozent der E-Mail wahr. Aus diesem Grund ist es umso wichtiger, wie dieser relativ kleine Bereich gestaltet ist.
Es sollte gewährleistet werden, dass der Leser der E-Mail das ihm vorgestellte Angebot auch tatsächlich versteht. Darüber hinaus, dass der Nutzer durch eine sinnvolle Positionierung des CTA zu einer direkten Konvertierung angeregt wird, und dass das Interesse zum Verbleib in der E-Mail geweckt wird. Am sinnvollsten ist es, wenn der Nutzer direkt nach dem Öffnen der E-Mail auf den CTA stösst.
Natürlich gibt es auch Nutzer, die nicht direkt zu einer Konvertierung übergehen, sobald sie den CTA-Button erblicken. Diese Nutzer möchten im Vorwege mehr Informationen erhalten, bevor überhaupt eine Bereitschaft zur Konvertierung vorhanden ist. Aus diesem Grund sollte der CTA nicht ausschliesslich zu Beginn der E-Mail verfügbar sein, sondern auch noch an anderer Stelle im Newsletter. Möglichkeiten für zusätzliche Platzierungen von CTA sind etwa nach dem Lesen der Einleitung, nach der Sichtung der angebotenen Produkte bzw. Artikel oder auch am Ende der E-Mail.
Tools für das Template-Design
Testing ist essenziell für ein funktionierendes Template-Design, da E-Mail-Clients Inhalte unterschiedlich interpretieren. Da jeder E-Mail-Client die versendeten Templates unterschiedlich analysiert, interpretiert und wiedergibt, ist es umso sinnvoller, etwaige unerfreuliche Fehlerquellen vor Versenden über einen E-Mail-Verteiler erkennen zu können und dadurch zu vermeiden.
Für eine Überprüfung der optimalen Darstellung des eigenen Template-Designs auf diversen E-Mail-Clients kann der Service Litmus eingesetzt werden. Mithilfe dieses Service wird das HTML der erstellten Templates anhand virtueller E-Mail-Postfächer der bekanntesten E-Mail-Clients getestet. Dadurch erhält der Nutzer ein realistisches Bild vom Rendering der E-Mail.
Moderne Testing-Tools wie Litmus oder Email on Acid decken mittlerweile auch Dark Mode-Darstellungen ab, was 2026 zum Standard gehört. Denn immer mehr Nutzer aktivieren den dunklen Modus, was Template-Farben und Kontraste komplett verändern kann.
Häufige Fragen
Welche Template-Breite ist 2026 noch zeitgemäss?
600 bis 800 px bleiben der Standard. Wichtiger als die exakte Pixel-Zahl ist heute aber ein responsives Design, das sich automatisch an verschiedene Bildschirmgrössen anpasst.
Wie viele CTAs sollte ein Newsletter enthalten?
Weniger ist mehr. Ein klarer Haupt-CTA plus maximal 1-2 sekundäre Calls-to-Action. Zu viele Buttons verwirren und senken die Conversion-Rate.
Muss ich wirklich separate Templates für Mobile erstellen?
Nein, moderne E-Mail-Builder arbeiten mit responsiven Templates. Die passen sich automatisch an. Wichtig ist aber, die mobile Vorschau immer zu prüfen, bevor du versendest.
Welche Schriftgrösse funktioniert auf allen Geräten?
Mindestens 14-16 px für Fliesstext auf Desktop, mobil gerne 16-18 px. Kleinere Schriften werden auf Smartphones unleserlich und frustrieren deine Leser.
Dieser Beitrag wurde vom ONELINE-Team verfasst. Wir begleiten Schweizer Unternehmen seit über 10 Jahren in der digitalen Transformation, von E-Mail Marketing und SEO bis hin zu KI-Automation und Lead Generierung.
