04 März 2019

Beste E-Mail Design Praktiken in 2019

Oksana Zhylka Guest Writer

Wenn Sie mit dem Design einer neuen E-Mail beginnen, suchen Sie immer nach neuen Trends und untersuchen Konkurrenzlösungen oder tauchen in kreative Ideen ein und versuchen diese in Ihr eigenes Beispiel einzuarbeiten, ohne das Sie sich realisieren, was Leute eigentlich tatsächlich empfangen wollen. Auch wenn Sie als der beste gelten wenn es auf E-Mail-Design-Tipps ankommt, haben Sie keine Garantie dafür das Ihre E-Mail tatsächlich so funktionieren wird wie Sie es erwartet haben.

Wie könne Sie sicher sein, dass Ihre Arbeit die besten Ergebnisse bringt? In diesem Artikel finden Sie die Antwort und Beispiele der besten E-Mail-Design-Praktiken in 2019.

Wie wählt man das richtige E-Mail-Template?

Eigentlich variiert die E-Mail-Struktur von Branche zu Branche sowie wie sie auch von Thema zu Thema variiert. Viele E-Mails haben eine zwei Spaltenstruktur, aber es heißt, dass es besser ist, eine einzelne Spaltenstruktur zu wählen, weil sie auf mobilen Geräten besser aussieht.

Dennoch, wenn Sie ein reaktionsfähiges E-Mail-Template mit einer zwei Spaltenstruktur verwenden, wird es für Handys in 1 Spalte E-Mail angepasst werden. Also, spielt es eigentlich keine Rolle, wie viele Spalten Sie verwenden, wenn Ihr Template reaktionsfähig ist. Laut Statistik, betrachten 67,2% der Nutzer ihren Posteingang mit mobilen Geräten, also ist es besser, Sie kümmern sich um Ihr mobiles Publikum.

Die wichtigste Voraussetzung beim Entwurf eines E-Mail-Templates ist es, positive Content Rezensionen zu bieten und nicht die Marken Konsistenz des Unternehmens oder Produktes kaputt zu machen. Wenn es eine willkommene Nachricht ist, versuchen Sie das E-Mail-Design ähnlich wie Ihr Web-Konzept, das Sie verwenden aussehen zu lassen. Die wichtigste Option, die es wert ist, die Aufmerksamkeit darauf zu konzentrieren, ist die Möglichkeit, das Template zu ändern, ohne den Content zu ändern. Der Stripo-Editor bietet diese Möglichkeit.

Wählen Sie das E-Mail-Template, welches zu diesen grundlegenden Bedürfnissen passt und fügen Sie einfach die fehlenden Blöcke mit der Drag-and-Drop-Funktion hinzu. Es ist egal ob Sie die richtige Menge Blöcke gewählt haben, weil es leicht ist sie zu löschen oder hinzuzufügen und es einfach ist, sie im Stripo Editor zu erstellen:

Die optimale Breite für die Erstellung von E-Mails für mobile Geräte ist 600 px und 320 px. Die Länge kann aufgrund der Contentlänge unterschiedlich sein, aber schicken Sie keine E-Mail, die niemand bis zum Ende lesen wird.

Wenn Sie sich entscheiden, eine hervorragende oder ungewöhnliche E-Mail zu erstellen, die Sie noch nie zuvor gesehen haben und niemand Ihrer Konkurrenten tut es bereits, sollten Sie Ihr eigenes benutzerdefiniertes E-Mail-Template erstellen. Die besten Praktiken für E-Mail-Design, welche wir für Sie gesammelt haben, werden Ihnen definitiv neue Ideen und Inspirationen bringen, also ziehen Sie sie in Betracht. Es ist besser, mehrere E-Mail-Templates für den gleichen Zweck zu erstellen und dann zu testen, welches die besseren Ergebnisse liefert.

Wie sollte der E-Mail Header aussehen?

Der E-Mail-Header enthält oft den Firmennamen und das Logo. Es ist eine gute Wahl, Ihre Firmenmarke zu identifizieren und Ihre E-Mail-Marketing-Kampagne erkennbarer zu machen.

Es ist eine gute Praktik, die Menüleiste oder eine E-Mail-Navigation nur in einem Header hinzuzufügen. Der Empfänger besucht Ihre offizielle Webseite vielleicht auch ohne die E-Mail zu lesen oder findet die interessanten Infos in einem einfachen Klick.

Verwenden Sie keine dekorativen Fonts im E-Mail-Header, da sie nicht ordnungsgemäß angezeigt werden. Verwenden Sie nur Standard-Fonts . Schreiben Sie nicht einen langen Satz und verwenden Sie kein Caps Lock beim Schreiben des E-Mails-Themas. Die einzige Ausnahme für den gebrauch von Caps Lock ist, wenn das Menü auf dem Header einen solchen Stil hat, damit es nicht nervig aussieht.

Hier ist die perfekte Designlösung mit einem Menü auf dem Header:

Was ist ein Pre-Header und warum ist er wichtig?

Preheader sind eine Textzeile, die eine kurze Beschreibung Ihres E-Mail-Themas liefert. Sie haben 70-100 Symbole, um sicherzustellen, dass der E-Mail-Empfänger die Mail öffnet und die gesamte E-Mail liest.

Es gibt zwei Arten von Preheadern: visuelle und versteckte. Sie können eine Sichtbarkeitsoption einstellen. Der unsichtbare Preheader konnte vor dem Öffnen der E-Mail gelesen werden, aber er wird nicht in der E-Mail selbst erscheinen.

Hier ist das Beispiel des sichtbaren Preheaders, der durch Textausrichtung gezeigt werden konnte:

Wenn Sie keinen Preheader schreiben sehen Ihre Online-Korrespondenz Empfänger, bevor sie auf öffnen klicken, vielleicht die Standard-Nachricht über die Probleme beim Lesen einer E-Mail und eine Option, um eine als Web-Version oder Alts (die kurze Beschreibung, welche das Bild illustriert) aus Social Media Buttons, Logo oder Icons zu sehen. Das ist nicht gut, denn es gibt kein Zauberwort, das den Benutzer dazu überredet, eine Online-Mail zu öffnen.

Viele E-Mail-Vermarkter duplizieren und packen den Abmelde Knopf oder Link gleich ganz zu Anfang mit rein, obwohl dieser immer in den Footer, oder wenn ihre Nachricht zu lang ist, erst danach hinein gehört und es wird vom Gmail-Client runter gestaffelt. Wenn Sie keinen Preheader erstellt haben, werden Ihre Benutzer das Wort Abmelden schon kurz nach dem Thema der Nachricht, das gehört sich nicht.

Viele Online-Shops verwenden einen Preheader, um die Nutzer auf Rabatte, Angebote und so weiter aufmerksam zu machen. Eigentlich ist ein Preheader eine zusätzliche Option, um Ihr E-Mail-Thema weiter zu stärken.

Welches Font wählen?

Verwenden Sie keine dekorativen oder Autoren-Fonts, da es keine Garantie dafür gibt, dass sie in den verschiedenen E-Mail-Clients und auf verschiedenen Geräten ordnungsgemäß wiedergegeben werden. Um ein nicht standardmäßiges Font zu verwenden, müssen Sie, sie erst aus der separaten Datei laden, was extra Code und extra Anstrengung bedeutet.

Meiner Meinung nach gibt es genügend Standard-Fonts und ist es wichtiger, den Zeilenabstand anzupassen.

Die besten HTML-E-Mail-Design-Praktiken besagen, dass Sie nur ein Font für den Hauptinhalt und ein anderes nur für Header und Subheader verwenden können. Diese Regel braucht man nicht absolut zu befolgen, aber es scheint logisch.

Wenn Sie die Fonts falsch anwenden, können Sie Ihre Online-Mail fast unleserlich machen. Seien Sie benutzerfreundlich und beweisen Ihre Kreativität mit den Inhalten, aber nicht der Formatierung.

Verringern Sie die Bildgröße

Die zwei beliebtesten Bildformate sind: PNG und JPEG. Vermarkter verwenden animierte GIF-Bild wegen ihrer Größe nicht so häufig. Normalerweise erregen GIF-Dateien viel mehr Aufmerksamkeit als andere Bilder, aber sie sind auch viel größer, also verwenden Sie nicht mehr als eine GIF-Datei pro E-Mail und mehr als 3 PNG- oder JPEG-Bilder.

Sie können kostenlose Online-Kompressoren für GIF oder PNG & JPEG verwenden, um die Bildgröße zu reduzieren oder um eine passende Größe zu wählen, und infolgedessen wird die gesamte Größe der Nachricht reduziert. Die beste Praktik ist, einen E-Mail-Builder, der Bilder automatisch optimiert wie den Stripo E-mail Editor zu verwenden.

Eine weitere Option des Stripo-Editors ist, dass Sie kein Photoshop oder ein anderes Tool für die Bildbearbeitung brauchen. Sie können den eingebauten Foto-Editor verwenden und sich die Zeit die für Routine-Handlungen draufgeht sparen. Das sieht so aus:

Das nächste wichtige Problem ist, ständig Alts für Bilder hinzuzufügen. Die Mailing-Clients, die keine Bilder anzeigen, gibt es noch, also ist es besser einen anzubieten, um sicherzustellen, dass Ihre E-Mail so verstanden wird, wie Sie es wollen.

Es gibt eine tolle Praktik in einem E-Mail-Design, das die Verwendung von Ikonen statt von Bildern empfiehlt, um so die Nachrichtengröße zu reduzieren, aber dennoch den Textblock zu strukturieren.

Hier ist ein Beispiel, wo diese Praktik angenommen wird:

Sieht großartig aus, nicht wahr?

Personalisierung

Eine personalisierte E-Mail-Kampagne zu erstellen, ist eine altmodische Praktik, die im E-Mail-Marketing verwendet wird. Laut Statistiken werden E-Mails mit einem personalisiertem Thema 26% eher geöffnet als nicht-personalisierte E-Mails. Eine weitere statistische Tatsache ist, dass personalisierte Mails 6x höhere Transaktionsraten bieten als andere E-Mails und auch eine 14% höhere durch-Klick-Rate insgesamt haben.

Der einzige Rat zu E-Mail-Personalisierung ist, nur Informationen zu sammeln, die Sie verwenden werden. Verschwenden Sie keine Zeit damit Analysen zu sammeln die Sie niemals verwenden werden. Mit anderen Worten.

Wir empfehlen Ihnen, Informationen zu sammeln wie:

  • Name;
  • Alter;
  • Geschlecht;
  • Familienstand;
  • Familienstand und Land;
  • Interessen;
  • Verkaufsverlauf (nur für Online Läden);
  • Activitäten Geschichte;
  • etc.

All diese Daten helfen Ihnen eine Käufer Persona Ihrer E-Mail-Kunden zu erstellen. Es gibt zwei Möglichkeiten, diese Informationen herauszufinden, durch Umfragen und die Benutzeraktivität auf Ihrer Website zu verfolgen.

Personalisierung ist mehr als den Namen eines Kunden zu benutzen, es geht darum, die Informationen zu liefern, die den Erwartungen des Nutzers entsprechen.

Banner in Email Design Praktiken

Das Hauptziel von Bannern ist es, Aufmerksamkeit zu erregen und das Interesse am Lesen der Online-Mail zu beschleunigen. Eine der besten Praktiken des E-Mail-Template Designs ist es, Banner am Anfang Ihrer E-Mail nach dem Header zu verwenden.

Das klassische Banner ist ein Bild mit einigen Begrüßungsworten, die die Aufmerksamkeit des Benutzers packen. Es ist eine wirklich gute Praktik den Text mit wenigen Bannern zu verfeinern. Sie können einen Anruf zum Handeln-Button, einen Link zu einer Zielseite Ihrer offiziellen Webseite auf einem Banner tun, welcher in der Nachricht verwendet werden wird und Ihre Chancen auf E-Mail-Kundenkontakte verdoppelt.

Hier sind einige Beispiele für gutes Banner-Design also lassen Sie sich inspirieren:

Hier sieht man eine minimalistische Banner Lösung:

Buttons & Aufruf zum Handeln

Es gibt eine Regel für die Erstellung einer E-Mail mit einer Absicht, einem Thema und natürlich sollten Sie einen Aufruf zum Handeln verwenden. Buttons erregen mehr Aufmerksamkeit als Links. Wenn Sie dennoch Links verwenden, erstellen Sie sie mit Ankern und legen Sie sie am Anfang Ihrer E-Mail.

Wenn Sie wollen, das der Benutzer etwas kauft, sich auf Ihren regelmäßigen Newsletter abonniert und den neuen Beitrag innerhalb einer E-Mail liest, wird der Empfänger wahrscheinlich keine dieser Handlungen ausführen. Das ist wirklich nervig, wenn Sie den Aufruf zum Handeln duplizieren: „Kauf Sie dieses, kaufen Sie das, kaufen Sie jetzt!“. Das einzige, was der Benutzer tun wird ist, sich von diesem Abonnement verabschieden.

Verwenden Sie einen klaren Aufruf zum Handeln und platzieren Sie ihn dem Kontext entsprechend. Es wird seltsam sein, wenn Sie die Nachrichten über neue Features, die Sie vor kurzem in Ihrem Service implementiert haben mit einem Aufruf zum Handeln, um den neuen Blog abonnieren unterbrechen.

Hier ist ein Beispiel eines klaren Aufruf zum Handeln Designs in der E-Mail-Erstellungspraktik:

Also, alles ist, dank der kurzen Beschreibung und des sichtbaren Buttons mit einem kurzen und griffigen Aufruf zum Handeln, klar. Wenn Sie Ihren Anruf zum Handeln auf diese Weise entwerfen, werden Sie zweifelsohne siegreich sein!

Diese Variante hat ein cooles Design, aber das Hauptmerkmal des Aufrufs zum Handeln ist fast unsichtbar, das ist nicht gut:

Footer VS Signatur: Was wählen?

Sie fragen sich vielleicht was besser ist, eine Signatur oder einen Footer zu verwenden, während Sie das E-Mail-Template-Design erstellen. Sie denken vielleicht, dass Sie eine Signatur verwenden sollten, wenn Sie eine personalisierte E-Mail-Kampagne machen, aber das ist falsch. Der Footer erfüllt mehr Funktionen, als nur anzuzeigen wem diese Nachricht gesendet wurde.

Alle Promo-E-Mails, Newsletter und gezielte E-Mails sollten ständig eine Footer mit Social Media Sharing-Buttons, Kontaktinformationen und einer Abmelde Option haben. Es ist eine gute Praktik, das Menü mit Links zu hochwertigen Seiten anzuzeigen.

Aufgrund der Erfahrungen aus praktischen Experimenten, sind Benutzer dazu geneigt eher die Menüleiste im Footer, als im Header zu verwenden, weil sie sich erst eine Meinung über den Wert der Nachricht bilden können, nachdem sie sie gelesen haben.

Verwenden Sie Signaturen nur im privaten Gesprächen per E-Mail. Für alle anderen Situationen nutzen Sie Footer, hier ist ein Beispiel eines klassischen Footers, der vollständige Informationen zu dem Unternehmen, Kontaktinformationen und dem Navigationsmenü bietet von dem Sie sich inspirieren lassen können:

Ziemlich groß, nicht wahr? Wenn Sie Platz sparen wollen, geben Sie nicht die Firmenadresse an und erstellen Sie einen minimalistischen Footer wie folgt:

Hier das Beispiel, wo alle Regeln ignoriert wurden:

Ich finde eine Menge Text nach dem Footer zu schreiben, der das Ende der E-Mail markiert, ist eine der schlimmsten E-Mail-Design-Praktiken die es gibt.

Schlussfolgerung

Es gibt keinen Zweifel, das Sie nach dem Lesen dieses Artikels einen Plan haben, um Ihre alten E-Mail-Templates neu zu gestalten und neue zu erstellen. Wenn dieser Artikel Sie inspiriert hat, sind wir zufrieden und haben unser Ziel für diesen Beitrag erreicht.

Erstellen Sie mehr als eine Online-Nachricht zum selben Thema und richten Sie die A / B-Tests ein, um zu messen, welche E-Mails besser funktionieren. Denken Sie nicht nur über die Kreativität und den ursprünglichen Ansatz anch, sondern auch über E-Mail-Optimierung und Content-Relevanz. Ich hoffe, diese E-Mail-Design-Praktiken helfen Ihnen, so schnell wie möglich die besten Ergebnisse zu erreichen.