So entwerfen Sie eine Responsive HTML-E-Mail
In den letzten Jahren hat die steigende mobile Nutzung eine Evolution oder vielleicht Revolution in der Art ausgelöst, wie wir Inhalte an Online-Nutzer liefern. Das ultimative Ziel ist ein flüssiges, mobiles und geräte-agnostisches Netz, und eine Schule des Denkens hat sich als das allgemein bevorzugte Mittel zu diesem Zweck herauskristallisiert: Responsive Design. Doch während der schnelle Zeitgeist Dampf angesammelt hat, haben E-Mail-Design und -Entwicklung Probleme, Schritt zu halten.
Dies liegt zum Teil daran, dass HTML-E-Mails für Entwickler ein notorisch heikles Medium darstellen. Die archaische E-Mail-Client-Technologie und das Fehlen von Standards haben viele der Regeln des modernen semantischen Codes unbrauchbar gemacht. Aber E-Mail ist immer noch ein wichtiger Marketingkanal, der zu wichtig ist, um übersehen zu werden: Über einen Zeitraum von sechs Monaten meldete Litmus im Jahr 2012 einen Anstieg der E-Mail-Zahl um 80% auf mobilen Geräten. Im selben Jahr gab Campaign Monitor bekannt, dass die Öffnungsrate für mobile E-Mails zum ersten Mal Desktop- und Webmail übertroffen hat.
Natürlich ist es wichtig, eine korrekte Analyse Ihrer Zielgruppe durchzuführen, bevor Sie sich für die Optimierung von Mobilgeräten entscheiden. Aber ein gut ausgeführter responsiver E-Mail-Entwurf kann eine ausgezeichnete Benutzererfahrung sowohl für Desktop- als auch für mobile Benutzer gewährleisten. Und mit der weit verbreiteten 4G-Technologie ist der Trend zum Mobilen unerbittlich, also warum nicht zukunftssicher?
Vierkantstift, rundes Loch
Wenn Sie jemals das Problem hatten, eine E-Mail mit fester Breite auf einem Mobilgerät zu öffnen, werden Sie verstehen, dass ein Responsive E-Mail-Design erforderlich ist. Screen-Bursts, mehrspaltige Layouts können ausgezoomt erscheinen, so dass die Schriftgröße bis zur Unlesbarkeit reduziert wird. Benutzer können heranzoomen, sind dann aber ständig und ärgerlich dazu gezwungen, horizontal von links nach rechts und wieder zurück zu rollen, um Inhalte zu lesen. Links erscheinen klein und verstopft, ohne Rücksicht auf dicke Finger auf Touchscreen-Displays. Und kontrastarme Designs auf kleinen, zur Energieeinsparung gedimmten Bildfenstern werden oft unlesbar. Natürlich ist die mobile Optimierung wichtig, aber was ist der beste Weg?
Best Practices für Mobilgeräte
Vor dem Schreiben einer einzelnen Codezeile kann die Berücksichtigung von Designmerkmalen das Benutzererlebnis für Mobilgeräte erheblich verbessern, obwohl dies ungeachtet der Bildschirmgröße ratsam ist.
- Klare, prägnante Inhalte: Mit kleinen Bildschirmen ist es heute wichtiger denn je, den Nutzer so effizient wie möglich zu motivieren.
- Einspaltiges Layout: Einfachheit ist der Schlüssel. Layouts, die nicht breiter als 640 Pixel sind, werden ordnungsgemäß reduziert. Eine einzelne Spalte stellt sicher, dass beim Vergrößern nicht mehr Inhalte aus dem Ansichtsfenster verloren gehen.
- Eine interessante Betreffzeile: Dies ist eine der effektivsten Waffen des E-Mail-Vermarkters in einem überfüllten Posteingang. Halten Sie es kurz und bissig.
- Großer Aufruf zum Handeln (CTA): Bestrafen Sie keine fetten Finger! Apples iOS Human Interface Guidelines empfehlen einen Zielbereich von mindestens 44 × 44 Punkten.
- Großzügige Schriftgrößen: Stellen Sie sicher, dass Ihre Nachricht einfach gelesen werden kann.
- Pre-Header: Ein weiterer wichtiger Bereich, wenn es um Sichtbarkeit im Posteingang geht. Vermeiden Sie es, einfach den Text "Ansicht im Browser" anzuzeigen.
- Linksbündiger Text: Es gibt eine Reihe von Gründen dafür, wichtige Elemente an der linken Seite des Inhaltsbereichs auszurichten. (Eye-Tracking-Forschung schlägt vor, dass westliche Benutzer den größten Teil ihrer Aufmerksamkeit auf die linke Seite von E-Mail-Inhalten konzentrieren. Dies ist nicht überraschend, da wir Text von links nach rechts lesen. Bestimmte Betriebssysteme, insbesondere Android, werden den Inhalt nicht skalieren Der Bildschirm stellt daher nur die linke Hälfte einer E-Mail dar. Aus ergonomischer Sicht wird es für die Mehrheit der Benutzer am einfachsten sein, mit Elementen in der unteren linken / mittleren Ecke ihres Handheld-Bildschirms zu interagieren.
- Vertikale Hierarchie: Geringere Bildschirmimmobilien machen mehr Glaubwürdigkeit als je zuvor auf die Idee der "Falte". Signifikante CTAs sollten so nah wie möglich an der Spitze platziert werden; Wenn sie nicht sofort gesehen werden, werden sie vielleicht nicht benutzt.
- Verwenden Sie Bilder sorgfältig: Gehen Sie nicht davon aus, dass Bilder gesehen werden. Die native E-Mail-App des iPhone zeigt Bilder standardmäßig an, viele Clients jedoch nicht.
Diese Tipps können die Benutzerfreundlichkeit für mobile Kunden verbessern, aber Sie können und sollten wahrscheinlich noch weiter optimieren. Dank wachsender CSS3-Unterstützung unter den mobilen E-Mail-Clients ist jetzt ein reaktionsschnelles E-Mail-Design möglich.
Anfangen
Wie ich bereits erwähnt habe, leiden HTML-E-Mails unter einem traurigen Mangel an Standards - für Uneingeweihte wird vieles von dem, was folgt, eine Zeitreise in die frühen Tage der Webentwicklung sein. Layouts müssen aufgrund der veralteten HTML-Rendering-Engines einiger E-Mail-Clients mit Tabellen arrangiert werden, und CSS muss inline angewendet werden. Einige E-Mail-Clients ignorieren alle Style-Deklarationen, die in den E-Mail-Clients vorgenommen werden
Abschnitt des Dokuments.Es gibt einige fantastische E-Mail-Tabellen, ich empfehle Sean Powell ausgezeichnet HTML E-Mail-Boilerplate Als Ausgangspunkt, aber um der Demonstration willen, fangen wir von vorne an.
Für diejenigen unter Ihnen, die dem Code folgen möchten, können Sie das tun Laden Sie hier eine Vorlage für diesen Artikel herunter.
Doctype
Hotmail und Google Mail fügen den XHTML 1.0 Strict Doctype automatisch ein. Es ist daher keine schlechte Idee, es zu verwenden, aber es ist wichtig, Ihre E-Mails gründlich mit und ohne Doctype zu testen, da viele E-Mail-Clients sie einfach komplett aus dem Programm nehmen.
E-Mail auf Acid hat umfangreiche Forschung zu E-Mail-Doctypes durchgeführt Hier.
Medien-Anfragen
Wir können jetzt ein Viewport-Meta-Tag einfügen, um sicherzustellen, dass unsere E-Mails korrekt auf Mobilgeräten angezeigt werden. Es empfiehlt sich auch, den Inhaltstyp und ein Title-Tag anzugeben. Diese werden von vielen E-Mail-Clients ignoriert, sind jedoch eine gute Idee, wenn Sie einen Link zu einer "Browser-Version" Ihrer E-Mail bereitstellen möchten.
Da der Inhaltstyp höchstwahrscheinlich ignoriert wird, empfiehlt es sich, alle Sonderzeichen in Ihrer E-Mail als HTML-Entitäten zu codieren.
Außerdem werden wir ein paar vernünftige Style-Resets einfügen, um sicherzustellen, dass unsere E-Mails so gerendert werden, wie wir es plattformübergreifend haben wollen.
Email subject or title Beachten Sie, dass das Viewport-Meta-Tag Folgendes aufweist: negative Auswirkungen auf Blackberry.
Jetzt können wir unsere Medienabfragen einfügen; Wie viele davon hängt von der Spezifität ab, die Sie für jedes Gerät bereitstellen möchten. In diesem Beispiel werden wir nur eines verwenden - unter der Annahme, dass die meisten Geräte mit einer Bildschirmgröße von nicht mehr als 600 Pixel modern, mobil und mit Touchscreen sind und von einem für Mobilgeräte optimierten Styling profitieren. Darüber hinaus gehen wir davon aus, dass mobile Benutzer auf größeren Geräten, die das Desktop-Layout erhalten, keine wesentlichen Usability-Probleme haben, wenn sie die oben beschriebenen universellen Best Practices für Mobilgeräte befolgen.
Wir verwenden Medienabfragen auf die gleiche Weise wie beim Erstellen einer Website. Wenn die Größe des Darstellungsbereichs innerhalb der in der Medienabfrage festgelegten Einschränkungen liegt, wenden Sie diesen Stil an.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Im obigen Beispiel erklären wir einigen Elementen eine Klasse von "verstecken" zur Anzeige: Keine auf Bildschirmen, die kleiner als 600 Pixel sind. Die! Wichtig-Eigenschaft stellt sicher, dass jeder Inline-Stil überschrieben wird. Dies ist das Grundprinzip des responsiven E-Mail-Designs: Überschreiben von Inline-Stil-Deklarationen, die im Hauptteil des HTML-Dokuments vorgenommen werden, mit! Wichtigen Stil-Deklarationen, die im
Abschnitt und Ausrichtung dieser Stilüberschreibungen auf bestimmte Bildschirmgrößen mit Medienabfragen. Eine eklatante Ausnahme ist die Google Mail-App, die alle Stildeklarationen in der Google Mail-App ignoriert Sektion. Eine gewissenhafte Linksausrichtung der Inhalte sollte jedoch eine zufriedenstellende Nutzererfahrung für Google Mail-Fans in Ihrer Mailingliste sicherstellen. Offensichtlich ist dies keine ideale Lösung, aber im Moment geht es beim Responsive-E-Mail-Design sowohl um Kompromisse als auch um Spitzentechniken.Es ist erwähnenswert, dass wir unsere HTML-Elemente mit CSS-Attributselektoren anvisieren, um ein Problem zu lösen Rendering-Eigenart von Yahoo! E-Mail.
Wir können also sehen, dass Medienabfragen ein nützliches Werkzeug sind, um Inhalte selektiv anzuzeigen, aber wir können sie auch verwenden, um andere Funktionen unseres Layouts zu manipulieren. Vielleicht am wichtigsten ist, dass wir die Spaltenbreite unserer E-Mails einschränken können - der Schlüssel zu einem großartigen mobilen Erlebnis.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Wir haben nun in unserer Medienabfrage festgestellt, dass alle Tabellen mit einer Klasse von "content_block" auf Geräten mit einer Bildschirmgröße von bis zu 600px auf 92% Breite skaliert werden sollten. Jetzt müssen wir nur noch ein Inline-Breitenattribut (600px) für jede Tabelle mit einer Klasse von content_block angeben, und wir haben einen Container mit fester Breite, der dann auf Bildschirmen mit einer bestimmten Größe proportional skaliert. Vorausgesetzt, dass die width-Attribute der untergeordneten Elemente dieses Containers alle als Prozentwerte angegeben sind, handelt es sich um eine grundlegende Responsive-E-Mail-Vorlage.
Seien Sie vorsichtig, wenn Sie die automatische Anpassung der Webkit-Textgröße am Body-Tag deaktivieren. Als Faustregel sollten Sie versuchen, die Schriftgrößen über mindestens 12px zu halten.
Tasten
Calls to Action (CTAs) sind in der Regel der wichtigste Teil einer Marketing-E-Mail. Sie sollten auffällig, gut platziert und vor allem nutzbar sein. Die Kriterien für einen großen CTA sind unterschiedlich, je nachdem, ob er mit einem Cursor oder einem Finger ausgewählt werden soll. Dies ist eine leistungsstarke Funktion von Responsive Email; um Benutzern auf kleineren Touchscreen-Geräten fingerfreundliche Schaltflächen zur Verfügung zu stellen, die nicht von Bildblockern betroffen sind.
Leider können solche Schaltflächen nicht universell angezeigt werden, da sie auf Padding-Eigenschaften basieren, die in einigen Desktop-E-Mail-Clients nicht unterstützt werden.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Die obigen Style-Deklarationen transformieren Tags mit einer Klasse von "Schaltflächen", wie der unten stehenden, in große, ansprechende, farbige Schaltflächen, die die Breite des Inhaltsbereichs umfassen, solange die Gerätebildschirmbreite nicht größer als 600 Pixel ist. Der CSS3-Support sollte kein Problem darstellen, da wir davon ausgehen können, dass die mobile Technologie, auf die wir abzielen, einigermaßen modern ist.