So gestalten Sie eine E-Mail, die die Leute tatsächlich auf ihren Handys lesen

/2018-09-05 08:51:46/
Anifa
/Programme/

E-Mail-Marketing ist eine der beliebtesten Möglichkeiten, um ein Publikum zu erreichen. Warten Sie, das sind wahrscheinlich keine neuen Informationen. Aber wussten Sie, wie viele dieser Ansichten auf einem mobilen Gerät angezeigt werden? Wenn Sie Ihre E-Mails also nicht für Telefone entwerfen, ist dies der richtige Tag.

Das Entwerfen einer mobilen E-Mail erfordert Planung und Überlegungen. Viele E-Mail-Software-Clients von Drittanbietern enthalten reaktionsschnelle Vorlagen in ihren Paketen, aber nicht jedes Tool konvertiert Ihre Nachricht automatisch in das Ideendesign. Sie müssen überlegen, wie Ihre E-Mail aussehen wird, und sicherstellen, dass die Nachricht fokussiert ist. Es könnte sogar der perfekte Ort sein, um mit einer Mobile-First-Design-Strategie zu beginnen.

Bleib bei einer Spalte

Dies ist möglicherweise die einfachste Entwurfsentscheidung, die Sie jemals getroffen haben: Wenn es um mobile E-Mails geht, halten Sie sich an ein einspaltiges Format. Diese Entscheidung allein erleichtert die Handhabung aller künftigen Überlegungen. Es löst auch eine Vielzahl von Problemen mit kleinen Bildschirmen.

Das einspaltige Format ist für Benutzer mit Zeitmangel einfach, schafft Organisation und Ablauf. Es ist auch der Designstandard für alles auf einem kleinen Bildschirm. (Denken Sie an jede App oder jedes Spiel, das Sie öffnen. Sie bieten alles in einem einzigen vertikal ausgerichteten Design.)

Das einspaltige Format kann Sie dazu zwingen, einige Ihrer Standarddesign-Teile zu optimieren. Mobile E-Mails benötigen einen vereinfachten Header und eine vereinfachte Navigation. Designelemente sollten relativ klein sein, damit der Anfang der E-Mail-Nachricht auf dem ersten Bildschirm sichtbar ist.

Machen Sie den Typ größer

Eines der größten Probleme bei mobilen E-Mails ist die Lesbarkeit. E-Mails sollten nicht schwer zu lesen sein. Die Lösung besteht darin, den Typ etwas größer zu machen.

Der Standard für den mobilen E-Mail-Typ liegt zwischen 14 und 16 Punkten für den Hauptkörpertyp und zwischen 22 und 24 Punkten für Überschriften. Und vergessen Sie nicht, die Silbentrennung zu deaktivieren, was beim Lesen kleiner Schriftblöcke ablenken kann. Dieser Standard wird so verbreitet, dass Apples iOS eine Mindestschriftgröße von 13 Punkten hat und automatisch weniger als das anpasst.

Dies könnte sich zunächst unangenehm anfühlen. Der Typ wird wahrscheinlich riesig aussehen, wenn Sie das Design durcharbeiten, aber er wird komfortabler und die Benutzer werden sich bei Ihnen für mehr Öffnungen und längere Interaktionszeiten bedanken.

Bitten Sie die Benutzer, etwas zu tun

Eine mobile E-Mail benötigt einen offensichtlichen Aufruf zum Handeln. Warum senden Sie die E-Mail? Gibt es einen vorgesehenen Bereich, in dem Benutzer diese Aktion ausführen können?

Die zweite Frage ist der Schlüssel für Designer. Es gibt nicht so viele Möglichkeiten, sekundäre Hinweise in mobilen E-Mails zu erstellen, z. B. Schwebezustände mit QuickInfos. Daher muss jedes Element so gestaltet werden, dass Benutzeraktionen offensichtlich sind. Dies kann alles umfassen, vom Aussehen der Schaltflächen bis zum Text - "Jetzt kaufen", "Hier klicken", "Weitere Informationen" -, das im Design angezeigt wird.

Denken Sie sorgfältig über Bilder nach

Es gibt einen bedeutenden Teil der Benutzer, die keine Bilder aus einem mobilen E-Mail-Newsletter sehen. Apples iOS-Geräte sind das einzige Segment, in dem Bilder automatisch in E-Mails gerendert werden. Das Einbeziehen von Bildern sollte daher eine bewusste Entscheidung sein.

Bevor Sie Bilder vollständig deaktivieren, sollten Sie ein wenig recherchieren. Untersuchen Sie Ihre Analysen, um festzustellen, von welchen Gerätetypen Benutzer Ihre Nachricht anzeigen. Bilder sind ein wichtiges Werkzeug und sollten aufgrund der Gerätespezifikationen nicht übersehen werden.

Beachten Sie bei der Verwendung von Bildern in mobilen E-Mail-Designprojekten Folgendes:

Größe. Das Bild sollte ohne Scrollen sichtbar sein.
Komposition. Der Inhalt des Bildes muss bei geringer Größe verständlich sein.
HTML. Fallen Sie nicht in die Falle, Text oder Schaltflächen in Bilder umzuwandeln. Text- und UI-Elemente sollten HTML sein und jedes Bild sollte unterstützenden HTML-Text enthalten.
Botschaft. Denken Sie daran, dass Ihre Nachricht verständlich sein muss, auch wenn ein Benutzer das Bild nicht sieht.
Geh nicht über Bord. Wenn Sie Bilder verwenden möchten, halten Sie sich an eines. Benutzer werden frustriert sein, wenn ein Großteil der Nachricht fehlt.

Teilen Sie den Bildschirm in Ihrem Design Framework

In Bezug auf das Design mobiler E-Mails ist Einfachheit das A und O. Von der Sprache bis zum Design sollte alles einfach und leicht zu verstehen sein. Die Botschaft und die Handlungsaufforderungen sollten offensichtlich sein.

Stellen Sie sich vor, der kleine Bildschirm besteht aus drei Teilen: Header und Branding, Intro-Nachricht und Aktion. Im Idealfall sollte jeder von ihnen einen Platz auf dem ersten Bildschirm des E-Mail-Designs haben. (Obwohl nicht immer.)

Betrachten Sie Geräte und Skalierung

Das Schwierigste beim mobilen Design sind alle möglichen Bildschirmgrößen, auf denen eine E-Mail gerendert wird. Die Realität ist folgende: Es ist unmöglich zu tun.

Aber man kann in Gemeinsamkeiten denken. Apple iOS skaliert mobile E-Mails automatisch an die Bildschirmbreite. Wenn Sie also eine kleine Bildschirmgröße planen, sollten Sie weniger darüber nachdenken. (Andere Betriebssysteme tun dies noch nicht.)

Die Standardbreite für mobiles Design beträgt 640 Pixel. Die Höhen variieren tendenziell etwas mehr. Eine Liste der Geräte und Größen finden Sie in Ken's Tech Tips.

Berücksichtigen Sie Berührung und Ergonomie

Elemente, die in der mobilen E-Mail angeklickt oder getippt werden müssen, müssen ein offensichtliches Design haben. Dies beinhaltet häufig das Entwerfen dieser Elemente mit kräftigeren Farben und in größeren Größen, als Sie es vielleicht gewohnt sind.

Als Faustregel gilt, dass jedes Element, das für Benutzeraktionen ausgelegt ist, groß genug sein sollte, um leicht mit einem Finger berührt zu werden, und sich deutlich von Objekten in der Nähe mit viel Platz unterscheiden lässt. Elemente sollten auch leicht zu berühren sein, wobei Benutzer zu berücksichtigen sind, die nur eine Hand verwenden, um Objekte auf dem Bildschirm zu halten und zu berühren.

Der Standard für die "daumenfreundliche" Größe beträgt mindestens 46 Pixel im Quadrat.
Entscheiden Sie sich für Handlungsaufforderungen in voller Breite, damit Linkshänder oder Rechtshänder sie problemlos berühren können.

Lassen Sie viel Freiraum um anklickbare Elemente. Wenn Sie In-Text-Links verwenden, auf die geklickt werden muss, fügen Sie dem Link weitere Wörter hinzu, um das Berühren des Links zu vereinfachen und die Anzahl der Inline-Links zu begrenzen. Mehrere Links, die nahe beieinander liegen, erhöhen die Wahrscheinlichkeit, dass ein Benutzer den falschen berührt. Verwenden Sie Designelemente wie Farbe und Fettdruck für alle Links, damit Benutzer einen offensichtlichen visuellen Hinweis darauf haben, dass der Text etwas bewirkt.

Bonus: 5 Dinge, die Sie vermeiden sollten

Nachdem Sie eine Vorstellung davon haben, was mit einer mobilen E-Mail-Kampagne zu tun ist, sollten Sie einige Dinge vermeiden. Diese häufigen Fehler können eine ansonsten großartige mobile E-Mail zerstören.

Vergessen, Navigation hinzuzufügen. Fügen Sie eine supereinfache Navigation hinzu, mit der Benutzer zu Ihrer Website zurückkehren können. Denken Sie jedoch daran, diese für Mobilgeräte zu optimieren. Die Navigationsleiste Ihrer Website ist für ein mobiles Gerät wahrscheinlich falsch skaliert.
Erstellen einer „subtilen“ Farbpalette. Benutzer passen den Kontrast und die Farbe auf ihren Mobilgeräten stark an. Vermeiden Sie Farbpaletten mit weichen Farbtönen oder Farben ohne großen Kontrast. Es muss lesbar sein.
Kleiner Typ auf einem kleinen Gerät ist Killer. Die Leute werden scrollen. Machen Sie den Typ groß genug, um problemlos lesen zu können.
Schaltflächen, die klein oder durch Standard-UI-Symbole ausgeblendet sind. Denken Sie beispielsweise an das iPhone, bei dem der Versuch am unteren Bildschirmrand angezeigt wird. Wenn Sie Schaltflächen oder Elemente an dieser Stelle platzieren, werden diese ausgeblendet, wenn Benutzer versuchen, mit ihnen zu interagieren.
Unordnung ist eine mobile Katastrophe. Bestimmen Sie eine einzelne Nachricht für das Handy und bleiben Sie dabei. Benutzer haben nicht die Zeit oder Aufmerksamkeitsspanne, um viele Informationen aus einer E-Mail auf ihren Handys zu filtern.

Fazit

Das mobile E-Mail-Design kann einige der Dinge testen, die Sie über das Entwerfen für das Web denken. Es ist ein einzigartiger Aspekt mit unterschiedlichen Überlegungen. Viele der Dinge, die Sie berücksichtigen müssen, sind anders als bei anderen Projekten.

Meine Empfehlung lautet: Alle Ihre E-Mail-Newsletter oder Korrespondenz sollten für Mobilgeräte optimiert sein. Erstellen Sie jede Nachricht mit den obigen Tipps und denken Sie dann über kleinere Änderungen nach, die Sie für größere Formate vornehmen können. Dies funktioniert, weil Sie plattformübergreifend eine einzige und einheitliche Nachricht mit einer fokussierten Idee erstellen. Sie werden verstehen, was Sie mit der E-Mail erreichen möchten, bevor Sie zu weit kommen und wichtige Inhaltsentscheidungen zu Beginn des Prozesses treffen. Sie werden nicht das Gefühl haben, gezwungen zu sein, Inhalte für mobile Benutzer zu entfernen.