E-Mail-Design: der große Leitfaden für Ihre Traum-E-Mail

Der erste Schritt ist immer der schwerste. Ja, auch beim E-Mail-Design.

Wer eine E-Mail von Grund auf gestaltet, steht schnell vor unzähligen Fragen. Wie breit und wie hoch sollte eine E-Mail-Vorlage idealerweise sein? Wie groß darf ein Newsletter werden? Und was ist mit Schriften und Farben?

Damit Sie beim E-Mail-Design nicht vom Kurs abkommen, brauchen Sie eine gute Orientierung – genau deshalb haben wir diesen Leitfaden geschrieben. Warum gerade wir? Wir haben 390+ perfekte E-Mail-Vorlagen gebaut und noch mehr individuelle E-Mails für unsere Kunden. Begleiten Sie uns durch den gesamten Prozess einer perfekten E-Mail – von den Abmessungen bis zum Footer – und sehen Sie, wie Sie sie in Blocks, unserem No-Code-E-Mail-Editor, erstellen.

Teil 1. Fangen wir von vorne an

Das Wichtigste zuerst: Wir müssen klären, welche Maße Ihre E-Mail-Vorlage haben sollte. Die richtige Höhe und Breite sind entscheidend, damit Inhalte korrekt angezeigt werden und Ihre Botschaft beim Publikum ankommt. Und weil die Maße von E-Mail-Vorlagen (samt Inhalt) meist in Pixeln (px) angegeben werden, halten wir es in diesem Leitfaden genauso.

Wie breit sollte meine E-Mail sein?

Lange Zeit lag die übliche Breite einer E-Mail bei 600px auf dem Desktop sowie bei 320px im Hochformat und 480px im Querformat auf Mobilgeräten. Mit der Zeit wurden die Bildschirmauflösungen jedoch höher. Heute liegt die ideale Breite für die Desktop-Version Ihrer E-Mail laut diesem Artikel von Selzy bei 640px, die mobile Breite bleibt gleich.

Natürlich darf Ihre E-Mail breiter als 640px sein, versuchen Sie aber, die Grenze von 800px nicht zu überschreiten. Denn jeder E-Mail-Client hat eigene Einstellungen und Einschränkungen, und in diesen Rahmen müssen Sie passen, wenn alle Empfänger die beste Version Ihrer Nachricht sehen sollen. Und falls Ihre E-Mail diese Grenze sprengt, testen Sie sie in jedem E-Mail-Client, damit sie nicht verrutscht oder kaputtgeht.

Beachten Sie noch etwas: Wenn Sie die mobile Version Ihrer E-Mail 480px breit machen, müssen Nutzer ihr Smartphone drehen, um die E-Mail richtig zu sehen. Wie bei der Desktop-Breite können Sie auch hier über 320px gehen – testen Sie das Ergebnis dann aber gründlich.

Wie lang sollte meine E-Mail sein?

Bei der Höhe setzt Ihnen nur Ihre Fantasie Grenzen (und die Dateigröße). Die ideale Länge liegt bei 1500px, Sie können die E-Mail aber auch länger machen, sogar bis zu 3000px! Bedenken Sie jedoch: Je länger Ihre E-Mail, desto eher denken Nutzer „zu lang, lese ich nicht“ und schließen sie einfach.

Und wenn Sie viele Inhalte unterbringen müssen, sollten Sie sie gut strukturieren: Verwenden Sie Aufzählungen, kürzen Sie Absätze, setzen Sie Zwischenüberschriften. Außerdem können Sie manche Informationen in Bilder packen, GIFs einsetzen oder sogar ein Video anhängen!

Wie groß darf mein Newsletter sein?

Ihre E-Mail sollte nicht mehr als 102 KB wiegen. Behalten Sie das immer im Blick und überladen Sie Ihre E-Mail nicht mit Inhalten (und damit meinen wir nicht nur Bilder oder Videos).

Die Dateigröße einer E-Mail bemisst sich am Gewicht des HTML-Codes. Je mehr Codezeilen, desto größer die Datei. Deshalb sollten Sie den Umfang der Inhalte im Auge behalten – sozusagen zählt jeder Block.

Und was passiert, wenn Sie die Grenze von 102 KB überschreiten? Ganz einfach: Manche E-Mail-Clients (zum Beispiel Gmail) kürzen Ihre E-Mail. Wird nur der Footer abgeschnitten, lässt sich das manchmal verschmerzen. Wird Ihre E-Mail aber mittendrin gekürzt, sieht die Sache ganz anders aus. Achten Sie darauf.

Wie erstelle ich in Blocks eine E-Mail von Grund auf?

Mit Blocks bauen Sie eine schöne E-Mail, ohne eine einzige Zeile Code zu schreiben! Beginnen Sie mit einer leeren Vorlage, lassen Sie eine E-Mail per KI generieren oder wählen Sie eine Vorlage aus der Galerie. Ziehen Sie dann Inhaltsblöcke auf die Arbeitsfläche und passen Sie die Eigenschaften der Elemente und die E-Mail-Einstellungen im Bereich rechts an.

Teil 2. So bringen Sie Ihre E-Mail zum Strahlen

Die Grundstruktur unserer E-Mail steht, jetzt nehmen wir ihre Elemente genauer unter die Lupe. Sprechen wir über das E-Mail-Layout und wie Sie es richtig gestalten.

1. Preheader und Header (Höhe, Breite, Inhalt)

Der Preheader ist eine schmale Zeile über der E-Mail. Meist wird er auch hinter der Betreffzeile angezeigt. Preheader können die Betreffzeile ergänzen (etwa mit einem Hinweis auf kostenlosen Versand oder Extrarabatte) oder einen rein praktischen Zweck erfüllen (zum Beispiel mit dem Link „Im Browser ansehen“).

Bei der Formatierung des Preheaders sollten Sie ein paar Dinge beachten. Die Schrift im Preheader sollte kleiner sein als im E-Mail-Text (aber natürlich nicht winzig). Beträgt die Schriftgröße im E-Mail-Text beispielsweise 14px, wählen Sie für den Preheader etwa 10-12px. Als Höhe des Preheaders genügen 55-60px: Machen Sie ihn größer, sticht er viel zu sehr hervor.

Und denken Sie natürlich an die Textlänge Ihres Preheaders: Sie sollte zwischen 50 und 100 Zeichen liegen.

Jetzt zum Header der E-Mail. Er enthält meist Ihr Firmenlogo sowie Buttons, ein Menü oder andere Elemente. Hier ein paar Tipps zu seiner Größe.

Enthält der Header ein Logo in Standardgröße, ist eine Höhe von 70px ideal. Wenn Sie einen Button oder Text in den Header setzen (oder ein größeres Logo verwenden), können Sie die Höhe auf 100-150px erhöhen. Für einen Header mit Menü bietet sich eine Höhe von bis zu 200px an. Denken Sie aber immer daran: Ein hoher Header zieht zu viel Aufmerksamkeit auf sich.

Neben dem oberen und unteren Innenabstand können Sie Ihren Blöcken auch links und rechts Innenabstände geben. Anders als oben und unten sollten diese in der gesamten E-Mail gleich sein: Wenn Sie im E-Mail-Text seitliche Innenabstände von 40px verwenden, sollten es auch im Preheader und im Header 40px sein.

Beim Design des Headers sind nur Ihre Fantasie und der Gesamtstil der E-Mail die Grenze. Wichtig ist nur, dass alle Elemente auf dem Desktop und auf Mobilgeräten einheitlich bleiben.

2. Banner (Höhe, Breite, Dos and Don’ts)

Das E-Mail-Banner ist ein Bild im Format JPG, PNG oder SVG, das die meiste Aufmerksamkeit auf sich zieht – die perfekte Leinwand für Ihre Kreativität. Sie können mit der Größe des Banners, mit Schriftstilen (und ihrer Größe) und verschiedenen Farben spielen. Bleiben Sie dabei aber immer maßvoll: Ein mit Inhalten überladenes Banner wird eher zum Durcheinander als zum Blickfang.

Bildmaße in E-Mails:

Die Breite des Banners hängt meist von der Gesamtbreite der E-Mail ab. Ist Ihre E-Mail zum Beispiel auf dem Desktop 600px und auf Mobilgeräten 320px breit, können Sie das Banner genauso breit machen. Sie können ihm auch seitliche Innenabstände geben – denken Sie aber daran, dass diese in der ganzen E-Mail einheitlich sein müssen (sind es in allen anderen Blöcken 40px, gilt das auch für das Banner).

Für die Länge des Banners gibt es keine echte Grenze, solange sie vernünftig bleibt. Wir empfehlen allerdings eine Länge von 700px-1400px. Ein längeres Banner schadet Ihrer E-Mail wahrscheinlich mehr, als es nützt.

3. Text (Schriftart, Größe, Farben, Formatierung)

Beim Gestalten von E-Mail-Texten verliert man leicht den Überblick. Welche Schriftgröße ist für E-Mails die beste? Gibt es vielleicht eine professionelle Schrift und Größe, die man verwenden muss? Und welche der Dutzenden Optionen nehme ich für meine E-Mail?

Keine Sorge, so schwer ist das nicht. Wir helfen Ihnen, die passende Schriftart, Größe, Zeilenhöhe, Farbe und Formatierung für Ihre E-Mail zu finden.

Schriftart:

Es gibt zwei große Gruppen von Schriften: Serif und Sans Serif. Der Unterschied liegt in den kleinen Füßchen an den Buchstaben: Serifenschriften haben sie, serifenlose Schriften nicht.

Anfangs bot Blocks nur eine begrenzte Auswahl an Schriften. Nach einer Reihe von Updates unterstützen wir inzwischen aber auch Google Fonts! Das Startpaket enthält sichere Schriftarten, also Schriften, die auf allen Geräten und in allen E-Mail-Clients korrekt angezeigt werden. Hier sind sie:

Mit Google Fonts ist es dagegen etwas heikler: Manche E-Mail-Clients und Geräte zeigen sie nicht korrekt an. Sie können sie natürlich trotzdem verwenden – testen Sie Ihre E-Mails dann aber unbedingt vor dem Versand.

Wir empfehlen, in einer E-Mail höchstens zwei Schriftarten zu verwenden. So bleibt die E-Mail einheitlich und gut lesbar, und der Text wird klarer erkennbar (ein wichtiger Aspekt der Barrierefreiheit jeder E-Mail).

Apropos Lesbarkeit: Sehen Sie selbst, wie viel allein die Schriftart ausmacht:

Klar, die zweite Variante sieht viel schicker aus, ist aber deutlich schwerer zu lesen.

Schriftgröße und Zeilenhöhe:

Nachdem wir verschiedene Kombinationen für Überschriften, Zwischenüberschriften und Fließtext ausprobiert haben, sind wir zu folgenden Schriftgrößen gekommen:

• 22-24px für Überschriften;
• 18-20px für Zwischenüberschriften;
• 14-16px für den Fließtext.

Die ideale Zeilenhöhe liegt bei 150-200%. So bleibt Ihr Text gut lesbar und angenehm fürs Auge.

Und denken Sie daran: Die eine professionelle Schrift und Größe für E-Mails gibt es nicht. Alles hängt vom Kontext und Ihrer gestalterischen Entscheidung ab. Achten Sie aber natürlich immer auf die Lesbarkeit und machen Sie den Text weder zu groß noch zu klein.

Schriftfarbe:

Unser Rat ähnelt dem zu den Schriftarten: Verwenden Sie in der ganzen E-Mail höchstens zwei Schriftfarben. Setzen Sie auf kontrastreiche Farben, damit Ihr Text barrierefreier wird.

Textformatierung:

Es gibt 3 wichtige Möglichkeiten, Text zu formatieren und einzelne Stellen hervorzuheben: fett, kursiv oder unterstrichen. Sehen wir uns an, wofür Sie welche Variante nutzen:

• Fettdruck hebt meist die Wörter hervor, auf die der Leser achten soll (zum Beispiel ein Datum, eine Aktionsbedingung usw.).
• Kursiv setzt man Zitate sowie Titel von Büchern, Filmen usw.
• Und unterstrichen werden schließlich Links: So wird diese Formatierung üblicherweise verwendet.

Diese Regeln sind keineswegs Pflicht, haben sich aber eingebürgert: Fetten Text beachten Leser eher, und auf unterstrichenen Text klicken sie eher. Berücksichtigen Sie das auch in Ihren E-Mail-Texten.

4. Buttons (Breite und Höhe, Farbe, Schrift, Innenabstände)

Wie bei der Größe des Banners gibt es auch für Buttons keine festen Grenzen. Trotzdem gibt es einige allgemeine Regeln und Empfehlungen, mit denen Sie dieses Element am wirkungsvollsten einsetzen.

• Buttons müssen sich vom Hintergrund und den übrigen Inhalten Ihrer E-Mail abheben. Sie sollten ins Auge fallen und sofort bemerkt werden.
• In der mobilen Version Ihrer E-Mail müssen Buttons groß genug sein, damit Leser sie problemlos antippen können.
• Gestalten Sie Buttons in kontrastreichen Farben, damit sie gut zu erkennen sind.
• Nutzen Sie Weißraum und geben Sie dem CTA auf dem Button Innenabstände. So lässt er sich leichter lesen und anklicken.

5. Inhaltsblöcke (Anzahl der Elemente im Raster, Maße und Stil)

Es gibt viele Arten von Inhaltsblöcken: Artikel, Produktraster, Zitate usw. Im Kern sind sie alle Tabellen aus einer oder mehreren Spalten. Unser Tipp: Verwenden Sie für Produktraster höchstens 4 Spalten und für andere Inhaltsblöcke höchstens 2 Spalten.

Bedenken Sie außerdem, dass ein zu langer Block Empfänger vom Weiterlesen abhalten kann (und das wollen wir natürlich nicht). Bleiben Sie im vernünftigen Rahmen und halten Sie einen Inhaltsblock 200-300px hoch. Alle Inhaltsblöcke Ihrer E-Mail zusammen sollten etwa 1000-1200px hoch sein.

6. Footer (Breite, Höhe, Pflicht- und optionale Inhalte)

Footer erfüllen in E-Mails eher praktische Aufgaben. Die Größe des Footers hängt davon ab, wie viel darin steht. Ein typischer Footer enthält:

1. Die Postanschrift des Unternehmens.
2. Links zu sozialen Netzwerken.
3. Kontaktdaten des Unternehmens (Telefonnummer und/oder E-Mail-Adresse).
4. Einen Link zur App oder einen QR-Code.
5. Einen Hinweis, warum der Empfänger die E-Mail erhalten hat.
6. Einen Link zur Datenschutzerklärung.
7. Einen Link „Abmelden“.

Beachten Sie: Sowohl der CAN-SPAM Act als auch die DSGVO schreiben einen Abmeldelink für Empfänger in den USA bzw. in der EU vor. Selbst wenn Sie nicht direkt in diesen Ländern tätig sind, haben Sie möglicherweise amerikanische oder europäische Kunden in Ihrer Datenbank.

Deshalb gehört der Link „Abmelden“ sicherheitshalber immer in den Footer. Machen Sie ihn gut sichtbar und lassen Sie Abonnenten sich mit einem Klick abmelden. Und noch etwas: Kein ESP lässt Sie eine E-Mail ohne Link „Abmelden“ versenden. Selbst wenn Sie ihn vergessen, werden Sie daran erinnert, oder er wird automatisch eingefügt (wie bei Selzy).

Neben den genannten Elementen können Sie weitere Inhalte in den Footer aufnehmen (etwa Menüs, Infos zu aktuellen Aktionen und mehr).

Kommen wir schließlich zu den Maßen des Footers. Seine Breite sollte genau der Breite der E-Mail entsprechen, die Höhe hängt vom Inhalt ab. Trotzdem sollte Ihr Footer mindestens 200px hoch sein.

Teil 3. Letzter Schliff und Tests

Unsere E-Mail ist fertig! Jetzt fehlen nur noch ein paar letzte Schritte.

Prüfen Sie, ob die Abstände zwischen den Elementen gleich hoch sind. Sie sollten weder zu klein noch übertrieben groß sein: Ideal sind 30-40px. Achten Sie außerdem darauf, dass die Textgröße in allen Blöcken einheitlich ist, jedes Bild einen Alt-Text hat und alle Links richtig gesetzt sind.

Vergessen Sie nicht, den Links bei Bedarf UTM-Tags hinzuzufügen. UTM-Tags sind kurze Codezeilen, mit denen Sie die Leistung Ihrer Kampagnen verfolgen. Wenn Sie Ihre E-Mail von Hand programmieren, müssen Sie sie jedem Link einzeln hinzufügen – in Blocks versehen Sie dagegen alle Links mit wenigen Klicks mit UTM-Tags!

Prüfen Sie anschließend, wie Ihre E-Mail auf Mobilgeräten aussieht und funktioniert (schließlich lesen viele Menschen ihre E-Mails auf dem Smartphone). Und senden Sie zum Schluss eine Test-E-Mail, um zu prüfen, ob alles auf jedem Gerät und in jedem E-Mail-Client korrekt angezeigt wird.

Fazit

Wie Sie sehen, ist es gar nicht schwer, eine schöne E-Mail von Grund auf zu gestalten! Klar, manche Empfehlungen (etwa zu den Maßen der E-Mail-Vorlage) sind etwas strenger als andere (etwa die Wahl der besten Schriftgröße). Mit unserem ausführlichen Leitfaden bleiben Sie beim E-Mail-Design aber garantiert immer auf Kurs!