E-Mail-Template Größe: Breite und Höhe des Elements

Dies ist ein sehr komplexes Thema, das man nicht in einigen wenigen Abschnitten behandeln kann.

Die Standard-E-Mail-Vorlagenbreite betrug 600 Pixel für Desktops, 320px für vertikale und 480px für horizontale Ansicht auf mobilen Geräten. Die Höhe war unbegrenzt und hing von der Länge der Inhalte ab. Vor ein paar Jahren war die 600px Standardbreite Pflicht und es gab keine Alternativen. Aber die Standards haben sich geändert.

Sprechen wir nun über die zulässige Breite von E-Mails, die beste Breite aller E-Mail-Elemente und die Anpassung dieser Elemente an mehrere E-Mail-Clients, Bildschirme und Geräte.

Welches ist die beste Breite für E-Mail-Newsletter?

Es gibt einen Artikel auf dem Litmus-Blog, der behauptet, dass 600px E-Mail-Breite ein Mythos ist. Wir stimmen dem völlig zu, da es jetzt mehr Möglichkeiten gibt als nur eine 600px Breite, dennoch bleibt sie die optimale Breite. Aber wie kam diese Breite auf? Warum sind es genau 600px?

Vor langer Zeit war die Bildschirmauflösung alles andere als perfekt. Und eine Reihe von Geräten waren viel schlechter als heute. Das war die Zeit, als die 600px Breite aufkam. Seitdem hat sich viel verändert, aber die Breite von 600px ist zur Grundlage des E-Mail-Layouts geworden.

600px Breite ist also mehr eine Tradition als eine Regel und gibt Ihnen 100% Sicherheit, dass alles richtig angezeigt wird. Nicht schlecht, nicht wahr?

Werfen Sie einen Blick auf diese fantastische HTML-E-Mail mit einer normalen Breite von 600px. Sie kann wirklich geräumig sein, mit vielen Spalten und nützlichen Informationen:

Wir haben gehört, dass es einige E-Mail-Clients geben soll, die E-Mails, die breiter als 650px sind, nicht korrekt darstellen.

Ich habe eine E-Mail erstellt, die Breite des Inhaltsteils betrug 860 Pixel. Sie funktionierte in allen wichtigen E-Mail-Clients gut, obwohl ihr Hintergrund in Outlook.com nicht angezeigt wurde.

Und das ist die E-Mail, die ich gerade erhalten habe:

(E-Mail von MailNinja, die Breite der E-Mail beträgt 740 Pixel. Gmail, macOS)

Es gibt auch den Irrglauben, dass Gmail keine Hintergrundfarbe anzeigt, wenn die Breite Ihrer E-Mail-Vorlage 640 Pixel überschreitet. Zahlreiche Tests mit unserem E-Mail-Testwerkzeug und mehrere E-Mails, die ich in meinem Gmail-Konto geöffnet habe, beweisen jedoch das Gegenteil - die E-Mails werden einwandfrei dargestellt und auch Hintergründe werden problemlos dargestellt.

(E-Mail von Forbes Daily Dozen. E-Mail-Breite 800px. Gmail, macOS)

Ein weiterer Mythos ist, dass man in Yahoo! Mail die E-Mails nur in einer maximalen Breite von 650px ansehen kann. Meine E-Mail mit einer Breite von 810 Pixel wurde jedoch in diesem E-Mail-Client in voller Größe angezeigt.

Wenn Sie sich für eine andere Breite als 600px entschieden haben, testen Sie Ihre E-Mail vor dem Versand mit unserem integrierten E-Mail-Testwerkzeug, das Ihnen genaue Bilder darüber liefert, wie Ihre E-Mail in verschiedenen E-Mail-Clients und -Geräten angezeigt wird.

Wir haben festgestellt, dass die durchschnittliche Breite von E-Mails bekannter amerikanischer Marken zwischen 640 und 700 Pixel variiert.

(E-Mail von Banana Republic. E-Mail-Breite 640px. Gmail, macOS)

Wie kann man also mit Stripo die Breite einer E-Mail-Vorlage festlegen?

Standardmäßig hat sie bereits 600 Pixel!!

Aber wenn Sie Ihre eigene Breite einrichten möchten, müssen Sie folgendes tun:

• Klicken Sie im Editor den Reiter Aussehen;
• und dann den Reiter Allgemeine Einstellungen;
• stellen Sie dann die erforderliche Breite ein.

Welches ist die beste Höhe für E-Mail-Newsletter?

Natürlich ist die E-Mail-Höhe unbegrenzt. Sie können so viele Zeilen verwenden, wie Sie brauchen, um alle Ihre Inhalte anzuzeigen. Aber denken Sie daran: Je länger die E-Mail ist, desto geringer sind die Chancen, dass sie bis zum Ende gelesen wird.  

Die Gesamthöhe einer Webseite beträgt 960px, was normalerweise nicht ausreicht, um alle vorbereiteten Informationen unterzubringen, die Sie in Ihrem E-Mail teilen möchten. Es führt kein Weg am Scrollen vorbei. Die gängigste Länge von E-Mails variiert zwischen 1500px und 2000px. Das reicht in der Regel für den Inhalt und ist für den Nutzer leicht zu scrollen.

Es ist interessant, dass E-Mails mit touristischen Themen verglichen mit E-Mails aus anderen Branchen die längsten sind. E-Commerce-E-Mails sind auch lang, obwohl die Produktkarten in der Regel sehr kompakt sind, veröffentlichen die Vermarkter immer zu viele Produkte in einer E-Mail.

Hier ist ein Beispiel für eine E-Mail-Vorlage mit einer Höhe von 2550 Pixel:

Wie Sie sehen können, lassen sich 4 verschiedene Inhaltsblöcke mühelos zu einer leicht zu scrollenden E-Mail zusammenfügen.

Wichtig zu beachten:

Auf mobilen Geräten nimmt die Länge Ihrer E-Mail-Vorlagen aufgrund der Umordnung der Blöcke zu. 

Wenn Sie glauben, dass Ihre E-Mail auf mobilen Geräten zu lang ist, können Sie mit Stripo immer einige Elemente ausblenden.

Wie kann man also E-Mail-Elemente für mobile Geräte ausblenden?

• Klicken Sie auf das betreffende Element in der E-Mail-Vorlage, um die Einstellungen zu aktivieren;
• Scrollen Sie in der Seitenleiste nach unten, um dieses Steuerelement zu finden;

• Fertig. Die ausgewählten E-Mail-Elemente werden auf mobilen Geräten, die Medienabfragen unterstützen, nicht angezeigt. 

E-Mail-Vorschaugrößen

Viele E-Mail-Clients wie Outlook, Apple Mail, Thunderbird haben ein Vorschaufenster, das eine begrenzte Größe hat - 600px breit und 300-500 Pixel hoch. Sie zeigen nicht den verkleinerten Text der gesamten E-Mail an, sondern erfassen das obere Feld einer E-Mail mit einer geeigneten Vorschaufenstergröße.  

Stellen Sie sicher, dass die ersten 300px-500px wertvolle Informationen enthalten, die die Benutzer dazu bringen, eine E-Mail zu öffnen und zu lesen. Ein guter erster Eindruck ist besser als tausend Likes.

Die Nutzer dieser E-Mail-Clients machen nicht mehr als die Hälfte Ihrer Kontaktliste aus, so dass es nicht notwendig ist, die Größe Ihrer E-Mail-Vorlage zu ändern.  

So sieht der Vorschaubereich im mail.com E-Mail-Client aus:

Preheader-Größe

Der Preheader ist ein Zeilen-/E-Mail-Element, das sich oberhalb der Vorlage befindet. Es handelt sich um eine kurze Einführungsnachricht, die zusammen mit einer Option zum Anzeigen der E-Mail im Browser oder als Web-Version erscheint, wenn es mit der E-Mail Darstellungsprobleme gibt. Einige Marken platzieren darin sehr wichtige Informationen, wie z.B. die Benachrichtigung über den kostenlosen Versand.

(E-Mail von Adidas)

Da dieses Feld eher technisch als kontextuell ist, sollte man es nicht zu groß machen oder zusätzliche Elemente platzieren.

Die Größe des Preheader-Feldes variiert zwischen 50px und 65 px Höhe. Die Breite erbt die in der E-Mail-Vorlage definierte Größe.

Wenn Sie dieses E-Mail-Element erstellen, müssen Sie einen Link zur „Web-Version“ Ihrer E-Mail hinzufügen.

Wie bekomme ich also den Link zu einer Web-Version meiner E-Mail mit Stripo?

• Sobald Ihre E-Mail erstellt ist, gehen Sie in den Vorschaumodus;

• Klicken Sie in einem neuen Fenster auf die Schaltfläche „Kopieren“;

• Fertig - der Link wurde in der Zwischenablage gespeichert.

Wichtig zu beachten:

Wir sprechen jetzt über den Preheader als E-Mail-Element. Daneben gibt es aber auch noch den Preheader-Text, den Sie übrigens mit Stripo einstellen können. Der Preheader-Text wird nur im Vorschaumodus angezeigt. 

Das Preheader-Element wird auch in der E-Mail angezeigt.

Headergröße

Die gängigste Höhe für einen Header, der kein Menü oder ein massives Logo enthält, ist 70px. Für diejenigen, die eine Menüleiste haben, kann der Header 150px - 200px hoch sein. Eine Headerhöhe über 300px ist nicht gut zu lesen.

Es gibt Hunderte und Tausende von Stilen, die für das Design von E-Mail-Headern verwendet werden, aber Sie sollten denjenigen wählen, der benutzer- und mobilfreundlich zugleich ist. Wählen Sie außerdem das Stil- und Farbschema, das Ihre Markenidentität hervorhebt und nicht in den Posteingangsfächern der Benutzer zerbricht.

Hier sind einige Beispiele für ein gutes E-Mail-Header-Design:

 

Wichtig zu beachten:

Normalerweise enthält ein E-Mail-Menü 3-5 Reiter. Wenn Sie weitere hinzufügen, verbergen Sie bitte die zusätzlichen für mobile Geräte. 

Für weitere Informationen darüber, wie man einen E-Mail-Header mit Stripo erstellt, lesen Sie bitte unseren Blogbeitrag.

Bannergröße

Ein Banner ist ein Bereich, in dem Sie Ihre Kreativität entfalten können und nicht an Größen gebunden sein sollten. Je weniger Inhalt Sie dort einbringen, desto bessere Ergebnisse erzielen Sie. Je klarer der Call-To-Action ist, den Sie dort platzieren, desto mehr Conversions erhalten Sie.

Sie sollten keinen Platz zwischen den Textzeilen sparen; Sie können aber mit den Schriftgrößen experimentieren. Die am meisten verbreiteten Banner haben ein Bild als Hintergrund und befinden sich direkt unter dem Header.

Die gebräuchlichsten Größen für Banner sind 600px x 300px und 600px x 400px. Viele E-Mail-Designer experimentieren mit Bannergrößen, denn obwohl die Breite durch die Größe der E-Mail-Vorlage begrenzt ist, kann die Länge unterschiedlich sein.

Wichtig zu beachten:

Mit Stripo können Sie Ihre Bannerform wählen. Man nennt es - Ausrichtung. Sie kann vertikal sein, wenn die Höhe länger als die Breite ist, quadratisch und horizontal, wenn die Breite länger als die Höhe ist. 

Wenn Sie „beliebig“ wählen, müssen Sie keine speziellen Parameter einstellen, da die Breite ihre Größe von der Größe der E-Mail-Vorlage erbt und die Höhe von der gewählten Ausrichtung abhängt.

Horizontal ist die gängigste Art der Ausrichtung für Banner. 

Hier sind einige Beispiele für kreative und informative Banner:

Hier ist eine animierte Version:

Buttongröße

Es gibt keine Standard-E-Mail-Breite für Buttons. Die allgemeine Anforderung ist, dass ein Button sich von allen anderen E-Mail-Elementen unterscheiden, aber gleichzeitig organisch zum E-Mail-Design passen soll.

Um Ihren Button auffällig und klickbar zu machen, sollten Sie an seinem Design und an seiner Größe arbeiten.

Wenn der CTA-Text kurz ist, kommt hier der Leerraum zur Rettung, um Ihre Taste breiter zu machen. In Stripo wird es als „Internes Padding“ bezeichnet.

Keine Sorge. Aufgrund unseres einzigartigen Button-Layouts, ist der Leerraum klickbar :)
Die Leser müssen nicht auf den Text der Schaltfläche klicken. Sie können klicken, wo immer sie wollen.

Es ist auch sehr wichtig, auf Ihr mobiles Publikum einzugehen und die Buttons so groß wie möglich zu gestalten, damit die Leser den Button mit einem Daumen anklicken können und nicht alle anderen Elemente anklicken, wenn sie Ihre E-Mails auf mobilen Geräten lesen.

Manchmal ist es schwierig, überhaupt einen Button zu finden oder seinen CTA zu lesen, weil er klein ist und seine Schrift kaum lesbar ist.

Wie kann man also die Schrift der Buttons groß machen und sie auf mobilen Geräten in voller Breite darstellen?

Um eine größere Schriftart für CTA-Tasten auf mobilen Geräten einzustellen, müssen Sie folgendes tun:

• Gehen Sie auf den Reiter „Aussehen“;
• Gehen Sie in den Bereich „Mobile Ansicht“;
• Legen Sie die erforderliche Textgröße für den Button fest;
• und aktivieren Sie die Umschalttaste „Full-width Buttons“.

16 Pixel ist die gängigste Größe für Buttontexte. 

Hier das Beispiel, wenn Kontrast zum Tragen kommt:

Hier ist ein weiteres weit verbreitetes Beispiel für einen Button für ein Banner:

Bildgröße

Aufgrund der Tatsache, dass die durchschnittliche E-Mail-Breite 600px - 640px für die gesamte E-Mail-Vorlage beträgt, erbt die Bildbreite ihre Größe - wenn wir über Banner sprechen. Es gibt Tonnen von Bildern mit dieser Breite in Bilddatenbanken oder auf Pinterest. Stripo bietet auch über 10.000 kostenlose Bilder in seiner Datenbank.   

Für die Produktkarten gibt es überhaupt keine Standards.

Daher ist die Höhe eine proportionale Anpassung an die angegebene Breite. Sobald Sie Ihr Bild hochgeladen haben, können Sie seine Breite ändern - und seine Höhe wird proportional geändert, d.h. das Verhältnis von Breite zu Höhe wird gespeichert.

In Stripo können Sie Bilder zuschneiden oder das Verhältnis mit unserem integrierten Fotoeditor Pixie einstellen. Um in den Bearbeitungsmodus zu gelangen, müssen Sie auf den Button „Bearbeiten“ neben dem Bild in der Seitenleiste klicken. 

Wichtig zu beachten:

Bitte vergessen Sie nicht, dass Sie Bilder komprimieren müssen, da Ihre E-Mail sonst zu schwer wird und es eine Weile dauert, bis die E-Mail auf den mobilen Bildschirmen der Empfänger geladen wird. Sie können dies mit Tiny.png oder jedem anderen Spezialwerkzeug dieser Art tun.

Größe der Inhaltsblöcke

Der Inhaltsblock besteht in der Regel aus Text, Bild-/Fotoausschnitt und Button.

Wir haben bereits über die Größen von Bildern und Buttons gesprochen. Was den Text betrifft, so gibt es keine Einschränkungen, da er immer die Breite der E-Mail-Zeilen oder Container/Blöcke erbt. Sie können Texte auf, unter oder über Bilder legen. Es liegt ganz bei Ihnen.

Hier ist ein Beispiel, bei dem dies perfekt umgesetzt wurde:

Eine Reihe von Inhaltsblöcken

Wir trauen uns zu sagen: „Weniger ist mehr“. Verwenden Sie Bilder, aber überladen Sie Ihre E-Mail nicht mit Fotos, die keine nützlichen Informationen enthalten und keinen Bezug zum Thema der E-Mail haben.

Versuchen Sie nicht, in diese eine E-Mail alle Produkte, die Sie auf Ihrer Website haben, als Neuzugänge oder Verkaufsangebote zu stopfen. Es ist besser, nur die besten Angebote zu veröffentlichen und im Hauptmenü und in einer Fußzeile einen Link zur Website zu setzen. Es gibt eine Regel, nicht mehr als 6-9 Angebotskarten in einer E-Mail zu erstellen, so wie es hier gemacht wurde:

Es ist besser, Ihre Inhaltsblöcke nicht länger als 900px zu machen. Das reicht aus, um 3 verschiedene informative Blöcke zu bilden. Jedes Mal, wenn Sie einen neuen Block hinzufügen, fragen Sie sich, ob diese Information geeignet und ein Muss ist.

Wenn Sie Ihren E-Mails jedoch gerne eine Reihe von Blöcken hinzufügen möchten – dann können Sie Bildkarussells, Akkordeons und Videos verwenden, die informativer sein können als Hunderte von Fotos.

Größe der Fußzeile

Tatsächlich fügen einige Unternehmen Menüs zu den Fußzeilen hinzu, so dass sie größer sind als klassische Varianten dieses Elements. Einige Unternehmen stellen die vollständige Adresse mit einer Postleitzahl und so weiter zur Verfügung, damit ihre Fußzeilen groß genug sind.

Ich bevorzuge knappe Fußzeilen, die nur die Informationen enthalten, die zu 100% vorhanden sein sollten. Die klassische Fußzeile sollte Kontaktinformationen, die Abmeldelinks, Social Media-Icons und den Grund, warum Sie die Empfänger erreichen, enthalten. Das ist alles und somit sollte die Fußzeilen-Standardabmessung von 600px x 200px mehr als ausreichend sein, um all diese Informationen zu platzieren.

Lesen Sie mehr über das Design der E-Mail-Fußzeile im Artikel aus unserem Blog. Scheuen Sie sich nicht, ihn mit Ihren Freunden und Kollegen zu teilen, wenn er Ihnen gefällt!

Mobile Ansicht

Wir möchten Sie daran erinnern, dass Sie für alle Elemente der mobilen Ansicht spezielle Parameter einstellen können - sie unterscheiden sich von denen für den Desktop.

Um den Einstellungsmodus aufzurufen, klicken Sie bitte auf den Reiter „Darstellung“ in der Seitenleiste und dann auf den Abschnitt „Mobile Ansicht“.

Hier können Sie spezielle individuelle Parameter einstellen für:

• die Textgröße der Elemente für den Block „Menü“;
• Schriftgröße für Überschriften;
• Schriftgröße für Fußzeilen;
• Schriftgröße für Inhaltselemente;
• Schriftgrößen für die Überschriften 1 - 3;
• Ausrichtungen für Ihre Überschriften;
• Textgröße der Buttons;
• und stellen Sie ein, ob Ihre Buttons auf Mobiltelefonen in voller Größe angezeigt werden sollen oder nicht.

 (Desktop-Gerät)

 

(Mobiler Bildschirm, Button in voller Breite)

Gesamte E-Mail-Größe

Wenn Ihre E-Mail viel wiegt, haben Sie keine Garantie dafür, dass sie in voller Größe angezeigt wird, insbesondere in E-Mail-Programmen wie Gmail und Yahoo! Mail. Sowohl Gmail als auch Yahoo Mail wiegen die Größe des HTML-Codes!! Ihrer E-Mail und schneiden die E-Mail ab, wenn die Größe diese Werte überschreitet:

• die Größenbeschränkung für Gmail beträgt 102 kB;
• für Yahoo! Mail ist das Limit 100 kB.

Sie können Ihre E-Mail mit dem Mail-Tester wiegen. Das ist völlig kostenlos.

Die Größe der E-Mail hängt oft von dem von Ihnen verwendeten E-Mail-Editor ab. Normalerweise gibt es einen Zusatzcode, der automatisch hinzugefügt wird, wenn Sie eine E-Mail-Vorlage erstellen. Sie können diesen Code manuell löschen und dadurch die E-Mail-Größe stark reduzieren oder einfach einen Editor auswählen, der dies tut. Stripo ist einer davon und bietet reinen HTML-Code ohne Systemzeichen. Probieren Sie es aus, indem Sie eine beliebige Vorlage, die Sie benötigen oder haben möchten, erstellen.

Um es zusammenzufassen

Wir haben die Breite und Höhe einer E-Mail-Vorlage im Allgemeinen und jedes einzelnen Elements im Besonderen analysiert. 600px Breite ist nicht nur sicher und zuverlässig und wird über alle Geräte und E-Mail-Clients hinweg 100% korrekt dargestellt, sondern ist auch am vertrautesten für den Benutzer.

Die Höhe ist abhängig von der Inhaltslänge, sollte aber im besten Fall 2500px Höhe nicht überschreiten. Je mehr Bilder Sie hinzufügen, desto wichtiger ist es, einen Bildkompressor zu verwenden. Manchmal muss auch der HTML-Code der E-Mail optimiert werden.

Es gibt keine genauen Regeln, die Ihnen die Abmessungen der E-Mail-Elemente vorschreiben, so dass Sie mit Formen und Größen experimentieren können, machen Sie die Vorlage aber nicht zu ungewöhnlich und seltsam für die Benutzer. Bringen Sie Ihre Kreativität einfach durch die Bilder, die Sie auswählen und den Text, den Sie schreiben ein. Wir wünschen Ihnen viel Glück im E-Mail-Erstellungsprozess.