Gut. Ich habe jetzt mehr als genug Daten, um einen umfassenden, gut recherchierten Blogbeitrag zu schreiben. Lass mich den Artikel verfassen.
Dein Mailchimp E-Mail Marketing Design Guide beginnt hier. Gutes Design ist nicht Dekoration. Es ist der Unterschied zwischen einer Kampagne, die konvertiert, und einer, die gelöscht wird, bevor man zweimal scrollt.
E-Mail Marketing Kampagnen haben eine durchschnittliche Rendite von 36:1, das bedeutet, Unternehmen verdienen 36 Euro für jeden Euro, den sie ausgeben. Aber diese Rendite hängt ganz davon ab, ob deine E-Mails geöffnet, gelesen und bearbeitet werden. Die Designentscheidungen, die du in Mailchimp triffst, bestimmen alle drei Faktoren.
Dieser Guide behandelt jede Ebene des Mailchimp E-Mail Marketing Design Guide: von Layout-Dimensionen und Typografie bis hin zu CTA-Schaltflächen, Bildverhältnissen, Mobile Optimization und Mailchimps KI-Design-Tools. Ob du von einem Template aus arbeitest oder custom HTML programmierst, diese Entscheidungen beeinflussen deine Metriken.
Wichtige Erkenntnisse
- Zwischen 50 und 60% der E-Mail-Öffnungen stammen 2024 von mobilen Geräten, was Mobile-First-Design zur grundlegenden Anforderung macht, nicht zu einem optionalen Upgrade.
- Mailchimp Templates sind so gestaltet, dass sie nicht breiter als 600px sind, um in die Anzeigemöglichkeiten der meisten E-Mail-Clients zu passen.
- Gutes E-Mail-Design ist eine Frage der visuellen Hierarchie: Leser sollten innerhalb von Sekunden wissen, was zu tun ist, mit einer primären Überschrift, klarem Abstand, lesbaren Schriftarten, offensichtlicher CTA-Platzierung und einem mobilen Layout.
- Die 60/40-Regel (60% Text, 40% Bilder) ist die am weitesten verbreitete Richtlinie für das Verhältnis von Bildern zu Text, da SpamAssassin, eines der am häufigsten verwendeten Spam-Erkennungssysteme, diese als allgemeine Schwelle anerkennt.
- Mit Mailchimps Brand Kit kannst du deine Logos, Schriftarten, Farben und Markenidentität speichern und aktualisieren, sodass KI-Tools schnell markenkonforme Grafiken und Layouts für deine E-Mails und Automation erstellen können.
1. Beginne jedes Design mit einem klaren Ziel
Bevor du ein Template öffnest und mit dem Gestalten beginnst, nimm dir einen Moment Zeit und definiere, was du erreichen möchtest. Leitest du Traffic zu einem Blogbeitrag? Ermutigst du Empfänger, deine neueste Kollektion zu kaufen? Bewirbst du eine Veranstaltung? Dein Ziel sollte jede Designentscheidung beeinflussen, von der E-Mail-Kopfzeile bis zur abschließenden Handlungsaufforderung. Wenn dein Design mit einem einzigen, fokussierten Ziel ausgerichtet ist, wird deine E-Mail Marketing Botschaft klarer und überzeugender.
Hier machen die meisten Mailchimp Kampagnen einen Fehler. Alles in einer E-Mail sagen zu wollen ist normalerweise der schnellste Weg, um Klicks zu reduzieren.
Bevor du etwas aufbaust, beantworte diese drei Fragen:
- Welche einzelne Aktion möchte ich, dass der Leser ausführt?
- Wer erhält diese E-Mail genau?
- Wie sieht Erfolg für diesen Versand aus?
Alle deine weiteren Designentscheidungen, einschließlich Layout, Bilder und Textlänge, sollten diese Antworten unterstützen. Nichts anderes.
2. Layout-Grundlagen: Breite, Struktur und Spaltenwahl
Dein HTML E-Mail Layout sollte zwischen 600 und 800 Pixel breit sein, da viele E-Mail-Clients ein Vorschaufenster haben, das nicht sehr breit ist. In der Praxis sind Mailchimp Templates so gestaltet, dass sie nicht breiter als 600px sind, um in die Anzeigemöglichkeiten der meisten E-Mail-Clients zu passen. Dies ist die sicherste Standardeinstellung für maximale Rendering-Kompatibilität.
Das von dir gewählte Layout ist die Grundlage für deine gesamte E-Mail. Ein einspaltig Layout funktioniert gut für die Anzeige auf mobilen Geräten und hält das Design einfach, während ein mehrspaltig Design mehrere Produkte oder Funktionen gleichzeitig präsentieren kann.
So wählst du zwischen ihnen:
- Einspaltig: Am besten für Newsletter, Ankündigungen, Onboarding-E-Mails und alle Inhalte, bei denen die Lesefolge wichtig ist. Wird auf allen Bildschirmgrößen ordnungsgemäß angezeigt.
- Mehrspaltig: Funktioniert gut für Produktgitter, Funktionsvergleiche oder kuratierte Content-Roundups. Erfordert Tests auf Mobilgeräten, da mehrspaltig Designs typischerweise auf kleinen Bildschirmen von Mobilgeräten brechen.
Informationshierarchie ist sehr wichtig. Veranstaltungsdetails und kritische Inhalte sollten immer oben und in prominenter Größe platziert sein. Falls vorhanden, sollte der Call-to-Action klar definiert und auf den ersten Blick erkennbar sein.
Einfachheit zählt. Gestalte eine E-Mail nicht wie eine Website. Im Allgemeinen gilt: Je kürzer deine E-Mail ist, desto besser wird sie performen.
3. Typografie: Schriftarten, Größe und Lesbarkeit
Typografie ist eine der am meisten übersehenen Hebel im E-Mail-Design. Schlechte Schriftartwahl reduziert die Lesbarkeit und beeinträchtigt den professionellen Eindruck, den deine Marke vermitteln muss.
Typografie ist wichtig. Schriftgröße und Schriftfamilie machen einen großen Unterschied in der Lesbarkeit. Es ist wichtig, dein Hook oben in der E-Mail zu haben, da mobile E-Mail-Clients möglicherweise nicht die gesamte Nachricht laden.
Für mobiles Lesertexte wird eine Mindestschriftgröße von 16px empfohlen. Apple empfiehlt 17 bis 22px; Google empfiehlt 18 bis 22px. Mailchimps eigenes Referenzhandbuch fand, dass 16px Georgia lesbar und effektiv ist.
Praktische Typografie-Regeln für Mailchimp E-Mails:
- Verwende websichere Schriftarten (Arial, Georgia, Helvetica, Verdana) für den Body-Text, um das Rendering auf allen E-Mail-Clients zu garantieren.
- Beschränke dich auf maximal zwei Schriftfamilien: eine für Überschriften, eine für Body-Text.
- Setze die Zeilenhöhe auf das 1,4 bis 1,6fache der Schriftgröße für angenehmes Lesen.
- Bettet niemals kritischen Text in Bilder ein. Wenn Bilder blockiert werden, verschwindet dieser Text vollständig.
Verwende websichere Schriftarten mit klarer Größe und Gewichtung, um deine CTA-Schaltfläche leicht lesbar und auffällig zu machen.
4. Bilder: So verwendest du sie, ohne die Zustellbarkeit zu beeinträchtigen
Bilder machen E-Mails ansprechender, müssen aber absichtsvoll eingesetzt werden.
Bilder sind eine großartige Möglichkeit, Inhalte ansprechender, attraktiver und professioneller zu gestalten. Verwende Bilder jedoch, um deine Botschaft zu verstärken, nicht um sie abzulenken.
Die 60/40-Regel in der Praxis
Für Marketing- oder Promotional-E-Mails wird ein Verhältnis von 60% Text zu 40% Bild empfohlen. Dies bietet ein Gleichgewicht zwischen visueller Attraktivität und Zustellbarkeit, indem überzeugender Copy starke Produktvisuals unterstützt. Für Newsletter wird ein Verhältnis von 70% Text zu 30% Bild empfohlen, bei dem der primäre Wert aus geschriebenem Inhalt kommt, während Bilder dienen, um zu verbessern und den Text zu unterbrechen.
Tests gegen 23 der beliebtesten Spam-Filter zeigten, dass wenn eine E-Mail 500 Zeichen oder mehr enthält, das Verhältnis von Inhalt zu Bild die Zustellbarkeit nicht beeinträchtigt. Trotzdem ist es immer noch klug, ein gesundes Gleichgewicht zu bewahren, besonders für B2B-Zielgruppen und Outlook-Benutzer.
Schlüssel-Bildregeln für Mailchimp:
- Füge immer beschreibenden Alt-Text hinzu. Das Fehlen von beschreibendem Alt-Text macht deine E-Mail unzugänglich, wenn Bilder blockiert werden oder für Benutzer, die auf Bildschirmleser angewiesen sind.
- Halte Bilder unter 200KB. Große Bilder dauern länger zum Laden und verbrauchen wertvolle Daten.
- Vermeide reine Bilder-E-Mails. Eine E-Mail, die vollständig aus Bildern besteht, bleibt ein großes Warnsignal für die Zustellbarkeit, hauptsächlich wegen Bedenken zum Umgehen textbasierter Filter, sowie wegen Zugangsbarrieren und schlechter Benutzerfreundlichkeit.
- Die meisten E-Mail-Clients zeigen Bilder jetzt standardmäßig an. Litmus hat automatische Bild-Downloads umfangreich getestet und festgestellt, dass alle mobilen E-Mail-Clients Bilder standardmäßig zulassen.
5. CTA-Schaltflächen: Designentscheidungen, die Klicks fördern
Deine Call-to-Action-Schaltfläche ist das wichtigste funktionale Element in jeder Mailchimp E-Mail. Alles andere im Design existiert, um den Leser zu diesem Klick zu bringen.
Ohne eine wirksame Handlungsaufforderung wissen Kunden nicht, was sie tun sollen, nachdem sie deine E-Mail geöffnet haben. E-Mail-Schaltflächen können Abonnenten ermutigen, Maßnahmen zu ergreifen und sie zurück zu deiner Website zu bringen, wo sie konvertieren können.
Gestalte CTAs, die hervorstechen und Klicks fördern. Verwende kontrastierende Farben und überzeugende Aktionswörter, die klar kommunizieren, was passiert, wenn Abonnenten klicken. Halte CTAs einfach und aktionsorientiert, indem du dich auf eine primäre Aktion pro E-Mail konzentrierst, um dein Publikum nicht zu verwirren und deine Botschaft nicht zu verwässern.
Für mobil ist die Schaltflächengröße wichtiger als die meisten Marketer denken. Call-to-Action-Bereiche zum Berühren, wie Schaltflächen, sollten mindestens 46px im Quadrat sein. Apple empfiehlt 44px im Quadrat; Google empfiehlt 48px im Quadrat.
Zusätzliche CTA-Design-Prinzipien:
- HTML-Schaltflächen laden schneller und werden in allen Clients angezeigt, auch wenn Bilder ausgeschaltet sind, was deine E-Mail effektiver macht, weil Benutzer deine CTA sehen und wissen, was sie tun sollen.
- Deine CTA sollte nur wenige Wörter lang sein, um Kunden genau zu sagen, was sie tun sollen.
- Platziere deine primäre CTA oberhalb der Falte, wenn möglich. Deine Call-to-Action-Schaltfläche sollte sichtbar sein, ohne zu scrollen.
- Auf mobil solltest du erwägen, dass wichtige CTAs wie Schaltflächen die volle Breite der E-Mail umfassen und sowohl Rechts- als auch Linkshänder erreichen.
Für mehr über das Schreiben von Betreffzeilen, die Menschen zur CTA bringen, lese unseren Guide zu E-Mail Betreffzeilen Best Practices, die Öffnungsraten um 27% steigern.
6. Mobile-First-Design in Mailchimp
Mobile Clients machen 41,6% der E-Mail-Öffnungen aus, gefolgt von Webmail-Öffnungen mit 40,6% und Desktop-Öffnungen mit 16,2%. Desktop-First zu designen und dann für mobil anzupassen ist ein rückwärts gewandter Ansatz, der dir Engagement kostet.
Die Bedeutung von mobilfreundlichem E-Mail-Design ist für erfolgreiche E-Mail Marketing Kampagnen von größter Bedeutung. Da die Mehrheit der E-Mails jetzt auf Mobilgeräten geöffnet wird, ist es nicht nur eine Empfehlung, sondern eine Notwendigkeit, dass deine E-Mails auf Mobilgeräten gut aussehen.
Unternehmen sehen eine 15% Steigerung der mobilen Klicks, wenn sie ein mobil-reaktives E-Mail-Design erstellen.
Mobile Design Checkliste für Mailchimp Kampagnen:
- Verwende einspaltig Layouts als deine Standardstruktur.
- Stelle Mindestschriftgrößen auf 16px für Body-Text ein.
- Verwende vollbreite CTA-Schaltflächen auf mobil, damit sie mit jeder Hand tippbar sind.
- Halte Betreffzeilen unter 40 Zeichen. Desktops zeigen 60 Zeichen einer E-Mail-Betreffzeile. Abonnenten mit Smartphones sehen zwischen 25 und 30 Zeichen, also stelle die wichtigsten Informationen zuerst.
- Eine überzeugende Vorschau in einer E-Mail gibt Lesern einen zusätzlichen Grund zu klicken und führt sie sanft in die Einleitung des Inhalts. Das Hinzufügen einer Vorschau erhöht die Öffnungsraten um 13,72%.
Mit Mailchimp kannst du deine E-Mails ganz einfach vorschauen, um sicherzustellen, dass sie auf verschiedenen Web- und mobilen E-Mail-Clients gut aussehen, indem du das integrierte Inbox Preview Tool vor dem Versand nutzt.
7. Mailchimps Brand Kit und KI-Design-Tools verwenden
Mailchimp hat KI in seinen Design-Workflow so integriert, dass es genuinely wertvoll für Teams ohne dedizierte Designer ist.
Mailchimps Brand Kit lässt dich deine Logos, Schriftarten, Farben und Markenidentität speichern und aktualisieren. Es nutzt KI und die Assets in deinem Brand Kit, um schnell stylische, markengerechte Grafiken und Layouts für deine E-Mails, Social Posts, Automations und mehr zu generieren.
Die Backend KI dahinter ist substanziell. Ein Benutzer gibt einfach seine Website-URL in Mailchimps Content Studio ein, und die KI erkennt, analysiert und klassifiziert automatisch alle entdeckbaren Markenelemente. Der Service erfasst Logos, Markenfarben, Hintergrund- und Textfarbkombinationen, Schriftarten und Schriftstile, Markenbilder und einen kompletten Website-Style-Guide einschließlich Button-Stile, Navigations-Muster und Hintergrund-Behandlungen.
Für Copy- und Design-Feedback analysiert der Content Optimizer, angetrieben durch Technologie ähnlich ChatGPT, deine Copy und dein Design und bietet Vorschläge zur Verbesserung von Lesbarkeit, Ton und Call-to-Actions.
Inter damit, was KI gut handhabt: Creative Assistant kann eine Webinar-Einladungs-E-Mail in etwa 4 Minuten erstellen, im Vergleich zu 25 Minuten beim Erstellen von Grund auf. Das von KI generierte Layout ist normalerweise zu 80% fertig, wobei nur das Header-Bild und die CTA-Schaltflächen-Farbe angepasst werden müssen. Es hat Schwierigkeiten mit komplexen mehrspaltig Layouts, E-Commerce-E-Mails mit dynamischen Produktgittern und allem, das custom HTML oder CSS erfordert.
Um eine konsistente Marke in den Posteingängen deines Publikums zu bewahren, ist es wichtig, ein E-Mail-Template zu haben, das du für deine Kampagnen verwendest. Ein starkes Brand Kit kombiniert mit einer kleinen Menge wiederverwendbarer Templates beseitigt die Inkonsistenz, die entsteht, wenn man jede Kampagne von Grund auf aufbaut.
Für einen tieferen Blick auf Personalisierung über Design hinaus, siehe unseren Guide zu 7 E-Mail Personalisierungstechniken, die Conversions um 47% steigern.
8. Testen, Vorschauen und mit Zuversicht versenden
Designarbeit ist nicht fertig, wenn du auf Speichern klickst. Die Kampagnen, die du in Mailchimp gestaltest, sehen immer ein bisschen anders aus, wenn sie in den Posteingängen von Empfängern angesehen werden. Verschiedene E-Mail-Clients und Geräte zeigen HTML E-Mails gemäß ihren individuellen Rendering-Engines an.
Bevor du eine E-Mail versendest, teste deinen Inhalt, damit du keine E-Mails mit fehlenden Daten oder defekten Links versendest. Mailchimps Vorschau- und Test-Tools helfen sicherzustellen, dass deine Bilder ordnungsgemäß geladen werden und dass alle Hyperlinks und Schaltflächen funktionieren. Sende ein paar Test-E-Mails an dich selbst, um sicherzustellen, dass alles so aussieht, wie du es möchtest.
Vor dem Versand Checkliste:
- Vorschau auf Desktop und mobil mit Mailchimps Inbox Preview.
- Versende eine Test-E-Mail an dich selbst und mindestens ein anderes Gerät.
- Überprüfe alle Links, besonders CTA-Schaltflächen.
- Überprüfe, dass Bilder korrekt angezeigt werden und Alt-Text vorhanden ist.
- Bestätige, dass deine Betreffzeile und dein Vorschau-Text in beiden Clients richtig aussehen.
- Überprüfe, dass du alle Großbuchstaben, zu viele Ausrufezeichen und ausgefallene Wörter oder Phrasen vermieden hast, nach denen Spam-Filter suchen.
Für List Segmentation, die sicherstellt, dass die richtigen Leute diese gut gestalteten E-Mails von Anfang an sehen, lese unseren Guide zu E-Mail List Segmentation Strategien, die ROI um 760% steigern. 
Häufig Gestellte Fragen
Welche ist die empfohlene E-Mail-Breite für Mailchimp Templates?
Mailchimp Templates sind so gestaltet, dass sie nicht breiter als 600px sind, um in die Anzeigemöglichkeiten der meisten E-Mail-Clients zu passen. Während du ein Template breiter ziehen kannst, ist dies der Standard, der zuverlässig über Gmail, Outlook, Apple Mail und mobile Clients hinweg rendert.
Sollte ich einspaltig oder mehrspaltig Layouts in Mailchimp verwenden?
Es hängt von deinem Content-Typ ab. Ein einspaltig Layout funktioniert gut für die Anzeige auf mobilen Geräten und hält das Design einfach, während ein mehrspaltig Design mehrere Produkte oder Funktionen gleichzeitig präsentieren kann. Für die meisten Use Cases ist einspaltig die sicherere Standardwahl, weil es vorhersehbar auf jeder Bildschirmgröße rendert.
Welche Schriftgröße sollte ich in Mailchimp E-Mails für mobil verwenden?
Eine Mindestschriftgröße von 16px wird für mobil empfohlen. Apple empfiehlt 17 bis 22px und Google empfiehlt 18 bis 22px. Alles kleiner als 16px erfordert, dass Benutzer zwei-Finger-Zoom verwenden, was das Engagement erheblich reduziert.
Wie bewahre ich Markenkonsistenz über Mailchimp E-Mail Kampagnen hinweg?
Speichere deine Logos, Schriftarten, Farben und Markenidentität in Mailchimps Brand Kit. Die Platform wird KI und diese Assets nutzen, um schnell stylische, markengerechte Grafiken und Layouts für deine E-Mails, Social Posts und Automations zu generieren. Kombiniere das mit einer kleinen Menge wiederverwendbarer Campaign Templates und dein Design Output bleibt konsistent, ohne jedes Mal von Grund auf zu beginnen.
