Share
Das E-Mail-Design folgt den gleichen Überlegungen wie das Webdesign: Viele verschiedene Arten von Browsern, Betriebssystemen, Bildschirmgrößen und Geräten. Wo Webdesigner moderne CSS-Techniken und clientseitige Skriptsprachen einsetzen konnten, um diese Herausforderungen zu meistern, hatten E-Mail-Designer kein Glück.
Also, was macht ein E-Mail-Designer? Erstens und vor allem als E-Mail-Designer müssen wir den Begriff des pixelgenauen Designs vergessen. Anschließend müssen wir einige Designaspekte berücksichtigen, die E-Mail-Designs zum Leuchten bringen, unabhängig davon, wo die E-Mail gelesen wird.
Hinweis: Dieses Tutorial ist Teil einer ganzen Woche an E-Mail-Inhalten auf Tuts + Web Design. Weitere Informationen finden Sie im Mastering HTML E-Mail-Lernhandbuch!
E-Mails müssen leicht lesbar und verständlich sein, unabhängig davon, auf welchem Gerät sie gelesen werden, damit ihre Nachricht an den Teilnehmer übermittelt wird. Hier sind einige einfache Designaspekte zu beachten:
Das umgekehrte Pyramidenmodell (bei dem die aufmerksamkeitsstärksten Elemente zuerst platziert werden, gefolgt von unterstützenden Informationen usw.) eignet sich ideal für E-Mail-Designs:
Diese E-Mail von Nest verwendet das umgekehrte Pyramidenmodell perfekt, um den Benutzer auf die Call-to-Action-Schaltfläche aufmerksam zu machen:
Nest Cam IQ E-Mail-DesignDas Zick-Zack-Layout ist eine einfache Gitterstruktur, die sehr einfach in HTML-Tabellen übersetzt werden kann - die Grundlage aller E-Mail-Designs. Durch diese Art von Layout können Inhalte leicht verdaut werden, unabhängig von dem Gerät, auf dem die E-Mail gelesen wird. Auf einem Gerät mit einem großen Bildschirm, z. B. einem Desktop, wird die Zick-Zack-Struktur angezeigt. Auf kleineren Geräten wie Smartphones kann sich die Struktur auf ein einspaltiges Layout reduzieren:
Von Kurs Zapier verwendet das Z-MusterWährend dieser Layouttyp etwas schwieriger für die Anpassung an unterschiedliche Bildschirmgrößen ist, gibt es viele Methoden, die online dokumentiert werden, um diese Art von Layout zu codieren.
Schauen Sie sich diese E-Mail von Tinder an, die das Z-Muster-Layout verwendet, um die Benutzer auf einfache Weise durch die Einrichtung ihrer Profile zu führen, ohne den Abonnenten mit Informationen zu überfordern:
Tinder E-Mail-Design auf wirklich guten E-MailsAuch hier wird das Layout für kleinere Geräte in ein einspaltiges Design umgewandelt.
Leerzeichen sind oft die Nemesis von E-Mail-Designern. Aufgrund dieses begrenzten Platzes, insbesondere bei Smartphones, besteht größter Druck darauf, dass Leerzeichen geschlossen werden. E-Mails mit wenig Leerzeichen und zusammengefüllten Inhalten können für Abonnenten abschreckend, nicht lesbar und letztendlich nicht erfolgreich sein.
Leerraum umarmen. Durch die intelligente Nutzung von Leerzeichen können Ihre E-Mails leichter lesbar gemacht und Ihre Call-to-Action-Schaltflächen effektiv verwendet werden. Dadurch werden sie mehr hervorgehoben und erhalten mehr Klicks.
Durch die effektive Nutzung von Leerzeichen kann sogar die Lesbarkeit Ihrer E-Mails verbessert werden. Dies ist der Schlüssel für Abonnenten, die Ihre E-Mails auf winzigen mobilen Geräten lesen.
Diese E-Mail von Squarespace ist ein hervorragendes Beispiel dafür, wie Whitespace Ihr E-Mail-Design verbessern und dem Abonnenten die E-Mail-Nachricht deutlich machen kann:
Nun, wenn Keanu es kann… Benutzer müssen in der Lage sein, Ihre E-Mails zu lesen, egal ob sie auf einem mobilen Gerät einen kurzen Blick darauf werfen oder ihre E-Mails auf einem Desktop abrufen. Es ist wichtig, sicherzustellen, dass der Text in Ihrer E-Mail lesbar ist, unabhängig davon, auf welcher Bildschirmgröße Ihre E-Mail gelesen wird.
In der Zeit vor dem Smartphone war es üblich, dass der Nachrichtentext in E-Mails 12 Pixel betrug. Als die Leute anfingen, E-Mails auf Smartphones zu lesen, wurde viel gezwungen, zu zoomen, nur um den Inhalt zu lesen. Dadurch wurde das Design der E-Mail oft zerstört, was Abonnenten zu einem schrecklichen Posteingang veränderte.
Durch die Verwendung einer Mindestschriftgröße von 16 Pixeln für die E-Mail-Textkopie wird sichergestellt, dass die E-Mail lesbar ist, unabhängig von der Bildschirmgröße. Aber nicht nur die Schriftgröße ist wichtig. Die Zeilenhöhe ist auch eine wichtige Überlegung beim Design, um sicherzustellen, dass Ihre E-Mails einfach zu lesen sind. Eine Zeilenhöhe, die nicht weniger als das 1,5-fache der Schriftgröße beträgt, gewährleistet, dass Ihre E-Mail-Kopie für alle lesbar ist. Wenn die Schriftgröße für Ihre Hauptteilkopie also 16 Pixel beträgt, sollte die Zeilenhöhe 24 Pixel betragen. Sie können dieselben Berechnungen für Überschriften und andere Textelemente in Ihrer E-Mail verwenden.
Evernote mit sicherer 22px-Körperkopie und (fast 1,5) 30px ZeilenhöheDie Unterstützung selbst der grundlegendsten HTML- und CSS-Attribute ist in vielen beliebten E-Mail-Clients und -Geräten immer noch fleckig. Nehmen Sie zum Beispiel Hintergrundbilder.
Hintergrundbilder werden häufig von vielen E-Mail-Designern verwendet. Sie werden jedoch nicht von allen E-Mail-Clients unterstützt, insbesondere von Microsoft Outlook und GANGA (Google Mail Android mit einem Nicht-Google Mail-Konto)..
Es gibt ein großartiges Online-Tool von Campaign Monitor, das VML (Vector Markup Language) -Microsofts proprietäre Sprache verwendet, die für die HTML-Markierung in Outlook verwendet wird. Dadurch werden in diesen Versionen von Outlook Hintergrundbilder aktiviert, die keine Hintergrundbilder unterstützen. Sieg!
Wenn Sie sich jedoch nicht mit VML-Code herumschlagen und HTML und CSS beibehalten möchten, verwenden Sie einfach eine geeignete Hintergrundfarbe für den Fallback, wenn Hintergrundbilder nicht unterstützt werden. Vergessen Sie bei der Auswahl einer Fallback-Hintergrundfarbe nicht, die Farbe des Textes zu berücksichtigen, der sich möglicherweise auf dem Hintergrundbild befindet.
Die Verwendung einer Fallback-Hintergrundfarbe ist auch eine hervorragende Möglichkeit, um sicherzustellen, dass Ihre E-Mails immer noch verständlich sind, wenn jemand sie auf einem mobilen Gerät mit einer fehlerhaften Datenverbindung liest. Wenn Bilder nicht geladen werden, füllt die Fallback-Hintergrundfarbe den Bereich, in dem sich das Hintergrundbild befindet.
Eine als Pixel Art bekannte Technik bringt dies auf eine andere Ebene. Bekannt als eine Form des defensiven Designs kombiniert er Bilder und Hintergrundfarben, wodurch Mosaike entstehen, wenn Bilder nicht geladen werden.
Einschränkungen bei der Unterstützung von Webfonts und strenge Markenrichtlinien bedeuteten, dass E-Mail-Designer in der Vergangenheit Bilder mit Text erstellen mussten, um die vollständige Kontrolle über das Erscheinungsbild des Texts zu erhalten.
Damals, als E-Mails meistens auf Desktop-Geräten angezeigt wurden, war dies durchaus akzeptabel. Text in Bildern ist jedoch a enorm Problem für Leute, die E-Mails auf mobilen Geräten anzeigen. Wie das Bild skaliert, wird auch der Text skaliert. Es wird oft unleserlich, was für den Abonnenten eine schlechte Erfahrung darstellt.
Die Lösung? Verwenden Sie ein Hintergrundbild mit Live-Text darüber. Mithilfe von Live-Text können Sie die Größe des Textes auf verschiedenen Geräten mithilfe von Medienabfragen steuern, die in gängigen E-Mail-Clients wie Google Mail und Apple Mail weitgehend unterstützt werden.
Diese E-Mail von REI verwendet für ihre Hauptnachricht eine Kombination aus Hintergrundbildern und Text darüber und sie sieht auf Desktop- und mobilen Geräten hervorragend aus:
Von REIDas bescheidene animierte GIF wird von E-Mail-Designern immer noch häufig verwendet. GIFs sind ideal, um eine E-Mail etwas interessanter oder aufregender zu gestalten. Es gibt jedoch einen gefährlichen Trend zu zunehmend komplizierten animierten GIFs mit längeren Animationen - und das bedeutet größere Dateigrößen.
Das Herunterladen einer 4-MB-GIF-Datei von Ihrem Laptop zu Hause über Ihre kabelgebundene Internetverbindung ist möglicherweise ein Kinderspiel. Denken Sie jedoch an diejenigen, die versuchen, dieselbe GIF über ein Datennetz auf ein mobiles Gerät herunterzuladen. Das Herunterladen des Bildes kann so lange dauern, dass der Leser einfach müde wird, zu warten und Ihre E-Mail zu schließen oder zu löschen. Und das ist besonders schlimm, wenn sich die Hauptnachricht Ihrer E-Mail in dieser GIF befindet.
Idealerweise sollten Sie animierte GIF-Bildgrößen unter 1 MB halten. Das bedeutet, Animationen zu vereinfachen, den Farbbereich relativ klein zu halten und die Animationsdauer kurz zu halten. Sie müssen kein Photoshop-Assistent sein, um Ihre GIFs für E-Mails zu optimieren. Es gibt Online-Tools, die Ihnen dabei helfen können, wie dieser Online-GIF-Optimierer.
So verkleinern Sie die Größe Ihrer animierten GIF:
Diese E-Mail von Postable enthält ein lustiges animiertes GIF-Format und ist nur 303 kb groß:
Schauen Sie sich die aktuelle animierte Version anCall-to-Action-Buttons, kurz CTAs, sind ein Hauptbestandteil für E-Mails. Schließlich senden Sie eine E-Mail, um den Abonnenten über etwas zu informieren, und Sie möchten, dass der Abonnent mit den Informationen in Ihrer E-Mail etwas anfangen kann. Hier kommt der Call-To-Action-Button zum Einsatz.
Das Problem ist jetzt, dass die Leute nicht nur mit einem Maus- oder Trackpad von einem Desktop-Gerät aus auf Ihre E-Mails klicken. Aber sie verwenden auch Tablets mit Stift. Und Smartphones mit unterschiedlichen Bildschirmgrößen und mit ihrem Daumen oder Finger zum Tippen.
Call-to-Action-Schaltflächen müssen auf verschiedenen Bildschirmgrößen anklickbar sein, entweder mit der Maus, dem Stift, dem Daumen oder sogar mit dem Finger. Sagen Sie hallo zu kugelsicheren Knöpfen.
Kugelsichere Schaltflächen verwenden nur HTML und CSS, um eine zu 100% anklickbare Schaltfläche zu erstellen. Es gibt verschiedene Techniken, mit denen Sie eine kugelsichere Schaltfläche erstellen können. Und sogar einen Code-Generator, der Ihren Button für Sie erstellt. Die wichtigste Information für einen tollen kugelsicheren Knopf ist die Größe. Die von Apple Guidelines empfohlenen Schaltflächen sollten nicht kleiner als 44 x 44 Pixel sein, um sicherzustellen, dass sie von einem mobilen Gerät aus angetippt werden können. Dies ist der Standard, den E-Mail-Designer für kugelsichere Schaltflächen in ihren E-Mails verwenden.
Alle diese Überlegungen beim Design garantieren, dass Ihre E-Mails von einer größeren Zielgruppe gelesen, verstanden und bearbeitet werden. Alle Ziele, die jeder E-Mail-Vermarkter erreichen sollte.
Accentsconagua