Wie man E-Mails für einen Mobile-First-Ansatz gestaltet
Veröffentlicht: 2015-05-21Wir kämpfen den guten Kampf, das ist der nie endende Kampf des ständigen Stroms von E-Mails. Egal wohin wir gehen oder welches Gerät wir bei uns haben, E-Mails können uns überall finden. Die Chancen stehen gut, dass Sie zehn weitere E-Mails erhalten, nachdem Sie diesen Artikel gelesen haben. Und als Designer befinden wir uns auf beiden Seiten des Posteingangs: Wir erhalten ständig E-Mails, sind aber auch für die Gestaltung und Erstellung der eigentlichen E-Mail-Designs verantwortlich.
Ganz gleich, wen Sie mit Ihrer E-Mail ansprechen, das Ziel ist es, die beste Benutzererfahrung beim Versenden von E-Mails an Abonnenten, Kunden und Interessenten zu bieten. Und da die meisten E-Mails auf Mobilgeräten geöffnet werden, müssen wir E-Mails so gestalten, dass sie für jedes Gerät geeignet sind, auf dem sie geöffnet werden können.
Wir haben uns so an responsives Webdesign und erstklassige mobile Anwendungen gewöhnt, dass wir es oft als selbstverständlich ansehen, dass wir einfach jedes Gerät nehmen und ein maßgeschneidertes Erlebnis gestalten können. Bei E-Mail sind die Dinge nicht so einfach und trocken. Technisch hinkt es dem modernen Webdesign um Lichtjahre hinterher. Wir müssen mit HTML-Attributen, tabellenbasierten Layouts und Inline-Stilen entwerfen, die sich nicht garantiert in jedem E-Mail-Client gleich verhalten.
E-Mail für alle Geräte entwerfen, welche Möglichkeiten habe ich?
Bevor Sie Ihre CD-ROM-Sammlung entstauben, denken Sie daran, dass es Hoffnung gibt, trotz der Einschränkungen eine erfolgreiche „responsive“ E-Mail zu entwerfen. Das Erstellen einer wirklich reaktionsschnellen E-Mail ist sicherlich eine Option, aber es ist wichtig, alle drei dieser Ansätze zu berücksichtigen, wenn Sie ein erfolgreiches Mobile-First-Design erstellen:
- Skalierbares Design
- Fließendes Design
- Sich anpassendes Design
Um den Ansatz zu wählen, der Ihren Anforderungen am besten entspricht, ist es wichtig, die Unterschiede und Einschränkungen zwischen diesen drei Designformen zu verstehen. Eine Entscheidung zu treffen erfordert Kenntnisse über Ihre Zielgruppe und welche Geräte und E-Mail-Clients sie verwenden. Da nicht alle E-Mail-Clients die gleiche CSS-Unterstützung bieten, hilft dies bei der Bestimmung, welcher Ansatz Ihren Benutzern am besten dient.
Skalierbares Design
Skalierbare E-Mail-Layouts sind vielseitig, da sie auf allen Bildschirmgrößen lesbar und anklickbar sind. Dies ist eine großartige Option, wenn Ihre Zielgruppe dazu neigt, ihre E-Mails auf einer Vielzahl von Geräten zu öffnen: Handy, Tablet und Desktop.
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Email content goes here.</p> </table>
Diese Option ist normalerweise am einfachsten zu implementieren, da sie keine Medienabfragen verwendet und keine Tabellenbreiten angepasst werden müssen. Ein Vorteil ist, dass es beim Entwerfen dieser Art von E-Mail keine große Lernkurve gibt. In den meisten Fällen ist das Handy das am häufigsten verwendete Gerät zum Lesen von E-Mails, und das macht es einfach sicherzustellen, dass mobile Überlegungen zuerst angestellt werden. Größere Schaltflächen, leicht lesbarer Text und klare Handlungsaufforderungen geben Mobilgeräten erste Priorität, um den Anforderungen einer kleineren Bildschirmgröße gerecht zu werden.
Skalierbares E-Mail-Design kann insofern einschränkend sein, als es einspaltig sein muss, um auf allen Geräten gut zu funktionieren. Der Grund dafür ist, dass wenn das Design mehrere Spalten hätte, diese auf mobilen Geräten sehr klein werden würden, was die Lesbarkeit beeinträchtigen würde. Wenn Sie jedoch durch Ihren Posteingang scrollen, werden Sie viele einspaltige Layouts sehen, da sie sehr verbreitet sind.
Der Inhalt ist der Schlüssel zu jeder E-Mail, daher sollte die Textgröße eine Größe haben, die für Mobilgeräte und auch auf größeren Bildschirmen gut funktioniert. Bei den meisten E-Mail-Clients füllt die gesamte E-Mail den Bildschirm aus, sodass der Benutzer nicht vertikal scrollen muss. Es wird jedoch dennoch empfohlen, die wichtigsten Informationen und den Aufruf zum Handeln oben links in der E-Mail zu platzieren, nur für den Fall, dass die E-Mail den Bildschirm nicht wie beabsichtigt ausfüllt.
Fließendes Design
„Liquid“-Layouts kennen Sie vielleicht aus dem Webdesign. Designkomponenten haben prozentuale Breiten und passen sich an die Bildschirmauflösung des Benutzers an, wobei dieselben Breiten beibehalten werden. Fluid E-Mail-Design nutzt dieselbe Idee.
Diese E-Mail-Option schließt die Lücke zwischen einer skalierbaren und einer wirklich verantwortungsvollen Option. Es muss mehr im Voraus entworfen werden als bei der skalierbaren Option. Der Grund dafür ist, dass sich die Breite der Tabellen und Bilder durch die prozentuale Größenanpassung an die Bildschirmgröße anpasst, auf der die E-Mail angezeigt wird. Tabellen ändern das Layout nicht in unterschiedlichen Größen, aber der Inhalt fließt und füllt den Raum aus. Dies ist eine großartige Option für E-Mails mit viel Text, da es weniger Kontrolle darüber gibt, wie Text und Bilder miteinander in Beziehung stehen. Es ist immer noch eine gute Idee, das Layout einfach zu halten, vorzugsweise ein einzelnes Tabellenlayout, um die Lesbarkeit der E-Mail an erster Stelle zu halten.
Erinnern Sie sich, wie wir sagten, dass dies die Lücke zwischen fest und reaktionsschnell schließt? Der Grund dafür ist, dass die Größe für größere Bildschirme eingeschränkt werden muss. Wenn die E-Mail zu breit wird, werden die Textzeilen optisch viel zu lang und wir möchten sicherstellen, dass unsere Leser unsere E-Mail problemlos lesen können. Das Einschließen des Inhalts Ihrer E-Mail in eine Containertabelle mit fester Breite hilft bei der Darstellung auf größeren Bildschirmgrößen. Dann zielt eine hilfreiche Medienabfrage auf kleinere Bildschirmgrößen ab.
<table border="0" cellpadding="0" cellspacing="0" width="525" class="wrap"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Wrapping table will help on larger screens.</p> </table> </td> </tr> </table>
Beispiel einer Medienabfrage für Mobilgeräte:
@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}
Responsive E-Mail
Nehmen wir, was wir von skalierbaren und flüssigen E-Mails wissen, und fügen einige weitere Regeln hinzu. Mit Responsive haben Sie mit CSS-Medienabfragen mehr Kontrolle darüber, was an verschiedenen Haltepunkten angezeigt wird. Mit dieser Option können Layouts geändert und auch andere Elemente mit bedingten Stilen für bestimmte Haltepunkte angepasst werden.
Hier ist ein Beispiel für eine Medienabfrage für ein responsives Layout:
@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
Wie bei den anderen Optionen sind Sie nicht auf eine Spalte oder einfache Designs beschränkt. E-Mails können komplexer sein, mit weniger Einschränkungen hinsichtlich Layout und Anzahl der Bilder. Beispielsweise können E-Mail-Designs auf größeren Geräten mehrspaltig sein, auf Mobilgeräten jedoch einspaltig. Textgröße, Bilder und fast alles andere können für das beste Erlebnis optimiert werden.
Bevor wir komplexe Designs mit mehreren Medienabfragen erstellen, ist es wichtig, über einige der Kompromisse zu sprechen. Medienabfragen funktionieren nicht in allen E-Mail-Clients. Tatsächlich ist die Unterstützung ziemlich begrenzt. Laut der Litmus Media Query Support List werden sie derzeit von der Android Outlook.com-App, dem nativen Android 4.x-Client und iOS (iPhone/iPad) unterstützt. Diese können voll ausgeschöpft werden, wenn die Mehrheit Ihrer Zuschauer Handy- und Tablet-Benutzer sind.
Andere Designüberlegungen
Bevor Sie mit der Erstellung des Designs Ihrer E-Mail beginnen, ist es wichtig, sich die Analysen anzusehen, um festzustellen, welche E-Mail-Clients und Geräte Ihrer Benutzer sind. Es wird empfohlen, dies regelmäßig zu überprüfen und Ihren Designansatz bei Änderungen weiterzuentwickeln. Auch mit Einschränkungen entwickelt sich E-Mail weiter, daher ist es wichtig, mit dem Schritt zu halten, was derzeit unterstützt wird.
Hier sind ein paar tolle Quellen zum Weiterlesen:
- Mobilspezifisches CSS
- Zukunft der E-Mail
- iPhone- und Android-E-Mails
Die gute Nachricht ist, dass ein Mobile-First-Ansatz mit den derzeitigen Einschränkungen von E-Mails möglich ist. Auch wenn das Design nicht ganz „responsive“ ist, mit ein paar Prozentvorgaben und einigen Medienabfragen schaffen Sie ein E-Mail-Design, das auf jedem Endgerät überzeugt. In den meisten Fällen checkt die Mehrheit der Benutzer E-Mails auf Mobilgeräten, sodass ein Mobile-First-Ansatz zu einer starken Grundlage für Ihr E-Mail-Design wird.