Der ultimative Leitfaden zum E-Mail-Design: Best Practices für Schriftgrößen und Bildabmessungen

Warum E-Mail-Design wichtig ist: Bedeutung im E-Commerce und Marketing.

Schriftart und Typografie

Schriftgrößen:

Empfohlene Größen für mobile und Desktop-E-Mails

Für die Lesbarkeit mobiler E-Mails sollten Sie sich im Allgemeinen an die folgenden Schriftgrößen halten:

1. Hauptteil: 14-16px ist ein guter Bereich. Leicht lesbar ohne Zoomen.
2. Überschriften: 22-27px eignet sich gut für Header. Sie möchten, dass sie auffallen, aber nicht überwältigend sind.
3. Unterüberschriften: Ungefähr 18-22px. Sie sollten größer als der Haupttext, aber kleiner als die Hauptüberschriften sein.
4. CTA-Buttons: Der Text in den Schaltflächen sollte mindestens 14 Pixel groß sein, damit er leicht angetippt werden kann.
5. Kleingedrucktes: Behalten Sie mindestens 12 Pixel bei, damit es lesbar, aber eindeutig zweitrangig ist.

Lesbarkeit ist der Schlüssel, insbesondere im E-Commerce, wo Sie den Leser zum Handeln anleiten möchten. Testen Sie Ihre E-Mails immer auf mehreren Geräten, um sicherzustellen, dass sie gut aussehen!

Schriftarten

Serif vs. Sans-Serif.

Beim E-Mail-Design kann die Wahl zwischen Serifen- und Sans-Serif-Schriftarten einen echten Unterschied machen. Hier sind die Fakten:

Serifenschriften

• Beispiele: Times New Roman, Georgia
• Stimmung: Traditioneller, oft als formell oder wissenschaftlich angesehen.
• Beste für: Lange Inhalte, bei denen es auf die Lesbarkeit ankommt.
• Aber: Kann auf kleinen Bildschirmen unübersichtlich aussehen, daher bei mobilen E-Mails mit Vorsicht verwenden.

Serifenlose Schriftarten

• Beispiele: Arial, Helvetica, Verdana
• Stimmung: Modern, sauber und lässig.
• Beste für: Kurze, prägnante Inhalte und mobile Lesbarkeit.
• Warum: Auf kleinen Bildschirmen besser lesbar und vermittelt ein modernes Gefühl.

Tipps für das E-Mail-Design

1. Konsistenz: Behalten Sie eine oder zwei Schriftarten bei, um das Design kohärent zu halten.
2. Websichere Schriftarten: Verwenden Sie Schriftarten, die in allen E-Mail-Clients gut angezeigt werden.
3. Hierarchie: Verwenden Sie unterschiedliche Schriftarten oder Stile für Überschriften und Textkörper, um eine visuelle Hierarchie zu erstellen.
4. Prüfen: Testen Sie immer, wie Schriftarten auf verschiedenen Geräten und E-Mail-Clients dargestellt werden.

Da wir uns auf E-Commerce konzentrieren, könnten Sie Sans-Serif wegen seiner modernen Ausstrahlung und mobilen Lesbarkeit bevorzugen.

Wenn Sie jedoch Bildungsinhalte versenden, könnte eine Serifenschrift einen Hauch von Autorität verleihen. Wählen Sie basierend auf Ihrer Marke und Botschaft!

Zeilenabstand

Der optimale Abstand ist wichtig für die Lesbarkeit von E-Mails.

• Hauptteil: Streben Sie eine 1,4- bis 1,6-fache Schriftgröße an. Wenn Ihre Schriftgröße also 16 Pixel beträgt, beträgt der Zeilenabstand etwa 22 bis 26 Pixel.

Warum der Zeilenabstand wichtig ist

1. Lesbarkeit: Der richtige Zeilenabstand verhindert, dass sich der Text zu eng anfühlt, und erleichtert so die Lesbarkeit.
2. Skimmbarkeit: Ein guter Abstand hilft den Lesern, den Inhalt zu überfliegen, so wie die meisten Menschen E-Mails lesen.

Tipps zum Zeilenabstand

1. Konsistenz: Halten Sie den Zeilenabstand in der gesamten E-Mail konsistent, um ein zusammenhängendes Erscheinungsbild zu erzielen.
2. Überschriften und Zwischenüberschriften: Diese können etwas engere Abstände haben, da sie normalerweise größer und kräftiger sind.
3. Handy, Mobiltelefon: Testen Sie auf verschiedenen Geräten, um sicherzustellen, dass die Abstände auf der ganzen Linie gut aussehen.

Bei Ihren E-Commerce-E-Mail-Kampagnen kann der Zeilenabstand dazu beitragen, den Blick des Lesers auf CTAs und wichtige Informationen zu lenken. Also übersehen Sie es nicht!

Bilder & Medien

Empfohlene Größen für E-Mail-Bilder

1. Bilder in voller Breite: 600–800 Pixel breit. Dies entspricht den Standardbreiten der meisten E-Mail-Clients.
2. Inline- oder Float-Bilder: 200–300 Pixel breit. Dies sind Bilder, die neben Text stehen.
3. Heldenbilder: 800–1200 Pixel breit. Das sind die großen, aufmerksamkeitsstarken Bilder oben.
4. CTA-Buttons: Mindestens 44x44px zum einfachen Tippen auf Mobilgeräten.

Weitere Tipps

1. Seitenverhältnis: Halten Sie sich an gängige Seitenverhältnisse wie 16:9 oder 4:3, um eine gute Skalierung der Bilder zu gewährleisten.
2. Dateigröße: Halten Sie die Datei möglichst unter 100 KB, um das Laden zu beschleunigen.
3. High-DPI-Bildschirme: Erwägen Sie Retina-Displays und verwenden Sie Bilder mit höherer Auflösung, komprimieren Sie diese jedoch, um die Dateigröße gering zu halten.

Bildformate per E-Mail

• JPEG: Gut für komplexe Bilder mit vielen Farben.
• PNG: Am besten für einfache Bilder, Texte und Logos geeignet.
• GIF: Für einfache Animationen.

Da Sie sich auf E-Commerce konzentrieren, können gestochen scharfe und schnell ladende Bilder dafür sorgen, dass Ihre Produkte verlockend aussehen und den Benutzer fesseln. Testen Sie immer auf mehreren Geräten, um sicherzustellen, dass alles gut aussieht!

Alt-Text für Bilder in E-Mails

Barrierefreiheit

1. Sehbehindert: Screenreader verwenden Alternativtext, um Bilder zu beschreiben.
2. Einhaltung gesetzlicher Vorschriften: Hilft Ihnen, Barrierefreiheitsstandards wie ADA zu erfüllen.
3. Bildblockierung in E-Mail-Clients: Einige Clients blockieren Bilder standardmäßig. Alt-Text gibt Kontext.

SEO-Vorteile

1. Suchranking: Gute Alternativtext-Praktiken wirken sich zwar nicht direkt auf E-Mails aus, können aber bei der allgemeinen SEO-Strategie hilfreich sein.
2. Dies geschieht, wenn Sie eine öffentliche Archivseite für die ausgehenden Newsletter haben

Benutzererfahrung

1. Langsames Internet: Wenn Bilder nicht geladen werden, liefert Alt-Text den Kontext.
2. Klärung: Beschreibt das Bild, wenn es komplex ist oder wichtige Informationen enthält.

Empfohlene Vorgehensweise

1. Beschreibend: „Blaue Damen-Laufschuhe“ ist besser als nur „Schuhe“.
2. Prägnant: Halten Sie es kurz, aber informativ.
3. Schlüsselwörter: Verwenden Sie relevante Schlüsselwörter, aber vermeiden Sie Keyword-Stuffing.

Video wird in E-Mail eingebettet

Das Hinzufügen von Videos in E-Mails kann das Engagement steigern, bringt jedoch einige Einschränkungen mit sich. Folgendes könnten Sie abdecken:

Die Profis

1. Engagement: Videos können die Klickraten erhöhen.
2. Information: Einfachere Vermittlung komplexer Informationen oder Präsentation eines Produkts.

Die Nachteile

1. Kompatibilität: Nicht alle E-Mail-Clients unterstützen eingebettete Videos.
2. Ladezeit: Umfangreiche Videos können das Laden von E-Mails verlangsamen.

Empfohlene Vorgehensweise

1. Fallback-Bild: Verwenden Sie ein Miniaturbild, das auf das Video verweist, falls die Einbettung nicht funktioniert.
2. CTA: Fügen Sie eine Play-Button-Überlagerung hinzu, um Klicks zu fördern.
3. Kurz und bündig: Halten Sie die Videos kurz, idealerweise unter 2 Minuten.
4. Automatisches Abspielen: Im Allgemeinen vermeiden; Lassen Sie Benutzer entscheiden, ob sie das Video abspielen möchten.

Wie man

1. HTML5: Für E-Mail-Clients, die dies unterstützen, können Sie HTML5-Tags zum Einbetten verwenden.
2. Dienste Dritter: Plattformen wie Vibetrace und Mailchimp verfügen oft über integrierte Optionen für Videos.

Alternativen zum Einbetten von Videos in E-Mails

1. GIFs: Kurze, sich wiederholende GIFs können ein videoähnliches Erlebnis vermitteln.
2. Verlinktes Miniaturbild: Ein statisches Bild, das auf ein an anderer Stelle gehostetes Video verweist.

Testen

1. Mehrere Kunden: Testen Sie, wie das Video in verschiedenen E-Mail-Clients angezeigt wird.
2. Handy, Mobiltelefon: Stellen Sie sicher, dass es für Mobilgeräte geeignet ist.

Layout und Struktur für E-Mail-Design

Ein- oder mehrspaltige Layouts: Vor-und Nachteile.

Einspaltiges Layout

Vorteile

1. Mobilfreundlich: Einfachere Verkleinerung auf kleineren Bildschirmen.
2. Fokussiert: Leitet den Leser linear und unkompliziert.
3. Einfachheit: Einfacher zu entwerfen und schneller zu laden.

Nachteile

1. Begrenzter Inhalt: Nicht ideal für komplexe Nachrichten mit mehreren Abschnitten.
2. Weniger dynamisch: Erregt möglicherweise nicht so effektiv Aufmerksamkeit wie mehrspaltige Layouts.

Mehrspaltiges Layout

Vorteile

1. Inhaltsreich: Ideal für die Präsentation verschiedener Produkte oder Themen.
2. Optik: Dynamischer und ansprechender.
3. Hierarchisch: Ermöglicht eine komplexere Informationsstruktur.

Nachteile

1. Komplexität: Schwieriger zu entwerfen und möglicherweise nicht auf allen Geräten gut darzustellen.
2. Überwältigend: Gefahr von Unordnung oder Informationsüberflutung.

Tipps für Ihren E-Commerce-Fokus

• Einzelne Spalte: Am besten für gezielte Kampagnen wie Produkteinführungen oder Sonderangebote geeignet.
• Mehrspaltig: Ideal für Newsletter oder die Präsentation einer Produktpalette.

Die Wahl zwischen ein- und mehrspaltig sollte sich an Ihrer Content-Strategie, der Komplexität Ihrer Botschaft und den Vorlieben Ihrer Zielgruppe orientieren. Testen Sie immer beide Layouts, um herauszufinden, was bei Ihrem E-Commerce-Publikum am besten ankommt!

Bedeutung von Leerzeichen im E-Mail-Design

Im Design kommt dem Weißraum eine besondere Bedeutung zu. Die Verwendung von Leerzeichen bietet viele Vorteile, für E-Mails sind jedoch die wichtigsten:

Lesbarkeit und Freiraum: Der Abstand zwischen Text und Elementen erleichtert die Verdaulichkeit des Inhalts.

Fokussierte Aufmerksamkeit: Leerzeichen können den Blick des Lesers auf wichtige Elemente wie CTAs lenken.

Professionalität und sauberes Aussehen: Ein übersichtliches Design wirkt professioneller und vertrauenswürdiger.

Benutzererfahrung und überschaubar: Hilft den Lesern, den Inhalt zu überfliegen, so wie die meisten Menschen E-Mails lesen.

Mobile Erfahrung und Tipp-freundlich: Zusätzlicher Platz erleichtert das Tippen auf Schaltflächen auf Mobilgeräten.

In Ihren E-Commerce-E-Mails können Leerzeichen dabei helfen, den Leser zu wichtigen Aktionen zu führen, z. B. zum Tätigen eines Kaufs oder zum Ausprobieren eines neuen Produkts. Es ist nicht nur leerer Raum; es ist ein funktionales Designelement!

Mobile Reaktionsfähigkeit

Stellen Sie sicher, dass es auf allen Geräten gut aussieht. Es besteht eine höhere Gewissheit mobile Geräte werden häufiger als der Desktop zum Lesen von E-Mails verwendet.

Sicherzustellen, dass Ihre E-Mail responsive ist und sich an mobile Bildschirme anpassen lässt, ist keine Option, sondern der Weg, mit der Gestaltung einer E-Mail zu beginnen.

Calls-to-Action (CTA) in E-Mails

• CTA-Platzierung: Wo man sie platziert, um eine maximale Wirkung zu erzielen.
• CTA-Button-Design: Größe, Farbe, Text.

Benutzererfahrung (UX)

Ladezeit

Bedeutung der E-Mail-Ladezeit (abhängig von Größe und Anzahl der Bilder)

1. Benutzererfahrung: Langsam geladene E-Mails können Benutzer frustrieren und zu einem geringeren Engagement führen.
2. Mobile Benutzer: Sie sind oft unterwegs und warten nicht auf langsame Inhalte.
3. Bilder optimieren: Halten Sie die Dateigröße klein, aber die Qualität hoch.
4. Code minimieren: Sauberes, einfaches HTML/CSS wird schneller geladen.
5. Kürzere E-Mails: Auch wenn es vielleicht einfacher ist, E-Mails viel hinzuzufügen, ist es tatsächlich besser, sie kürzer zu halten.
6. E-Mail-Ausschnitt: Bestimmte E-Mail-Clients (z. B. Gmail) schneiden E-Mails ab, wenn sie eine bestimmte Größe überschreiten.
7. Prüfen: Testen Sie immer die Ladezeiten auf verschiedenen Geräten, E-Mail-Clients und Auflösungen.

Navigation

E-Mail-Navigation

1. Inhaltserkennung: Bei längeren E-Mails wie Newslettern hilft die Navigation den Benutzern, das zu finden, was sie interessiert.
2. CTAs: Eine klare Navigation kann Benutzer zum Handeln anleiten.
3. Speisekarte: Bei sehr inhaltsreichen E-Mails kann ein kleines Menü oben hilfreich sein.
4. Hierarchie: Verwenden Sie Überschriften und Zwischenüberschriften, um den Inhalt aufzuteilen und den Leser anzuleiten.

Barrierefreiheit

Schriftartenauswahl in E-Mail

1. Schriftartenauswahl: Einfache, klare Schriftarten sind leichter zu lesen.
2. Schriftgröße: Halten Sie sich an eine lesbare Größe, im Allgemeinen 14–16 Pixel für den Fließtext.
3. Bildschirmleseprogramme: Testen Sie Ihre E-Mail mit einer Bildschirmlesesoftware, um sicherzustellen, dass sie zugänglich ist.
4. Verfügbarkeit von Schriftarten: Stellen Sie bei der Verwendung benutzerdefinierter Schriftarten (die nicht standardmäßig auf Geräten installiert sind) sicher, dass die Schriftartdateien korrekt geladen werden.

Farbkontrast

1. Lesbarkeit: Ein hoher Kontrast zwischen Text und Hintergrund verbessert die Lesbarkeit.
2. Barrierefreiheit: Hilft Menschen mit Sehbehinderungen oder Farbenblindheit.
3. Text vs. Hintergrund: Streben Sie nach dunklem Text auf hellem Hintergrund oder umgekehrt.
4. CTAs: Stellen Sie sicher, dass die Tasten hervorstechen, aber auch lesbar sind.
5. Werkzeuge: Verwenden Sie Kontrastprüfer, um Ihre Farbauswahl zu testen.