Responsive E-Mail

Flüssig, Adaptiv, Responsive

Es gibt 3 Wege um Responsive E-Mails umzusetzen:

  • Flüssig
    • Keine Breakpoints, dynamische Elemente
    • Alle Elemente passen sich jeglichen Display-Grössen durchgehend dynamisch basierend auf Prozentwerten an. Die Elemente (nicht Schrift) der E-Mail vergrössern/verkleinern sich entsprechend (Prozent Werte).
  • Adaptiv
    • Zwei oder mehr Breakpoints, fixe Elemente
    • Je nach Display-Grösse werden Element-Styles angepasst. Innerhalb der Breakpoints ist das Layout aber fix und passt sich nicht an (Pixel Werte), wenn das Display z.B. zwischen zwei Breakpoints liegt.
  • Responsive
    • Zwei oder mehr Breakpoints, dynamische Elemente
    • Je nach Display-Grosse werden Element-Styles angepasst. Innerhalb der Breakpoints passen sich die Elemente (nicht Schrift) dynamisch dem aktuellen Display an (Prozent Werte).

Weitere Informationen:

Meta Tags

Damit der E-Mail Inhalt gerätespezifisch skaliert wird, müssen im <head> zwei <meta> Tags angelegt werden, die das Skalierverhalten der E-Mail definieren.

<!-- Windows phone -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- All other clients -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Media Queries

Layouts mit Breakpoints setzten Media Queries ein. Leider ist der Support der E-Mail Programme in diesem Bereich noch sehr Lückenhaft. Es sollte also in erster Linie darauf geachtet werden, dass das Design auch ohne Media Queries funktioniert (also flüssig oder fix ist). Der Einsatz von Media Queries kann dann die Erfahrung für Benutzer mit einem unterstützenden Programm verbessern.

Media Queries können nur im <head> als <style> angelegt werden und sind nicht über einen Inline den entsprechenden Elementen anzuhängen. Entsprechend ignorieren alle E-Mail Programme, die den <head> einer E-Mail ignorieren, auch Media Queries (z.B. Gmail)

Breakpoints

Falls breakpoints verwendet werden, wir empfohlen ab min. 414px einen Breakpoint einzufügen (iPhone 6 Plus).

Bilder

Nur JPG und GIF verwenden. PNG wir noch nicht überall unterstützt.

Retina Bilder werden von Outlook nicht skaliert. Jedem Bildelement sollten deshalb noch die Grössenattribute für die Desktopgrösse mitgegeben werden (ACHTUNG: Gmail prüfen!).

<img alt="Image" src="http://www.host.com/image.jpg" width="700" height="370">

Je nach Umfeld kann es durch die Angabe von festen Pixelwerten aber zu Problemen in Gmail kommen. Ev. ist dann der Einsatz von Conditional Comments nötig, welches einen Wrapper ausgiebt, um das Originalbild zu verstecken.

<!--[if mso]>
<img alt="Outlook image with size" src="http://www.domain.com/image.jpg" width="700" height="370" />

<div class="hidden">
<![endif]-->

<img alt="Non Outlook image without size" src="http://www.domain.com/image.jpg" />

<!--[if mso]>
</div>
<![endif]-->

Bilder ohne Höhe und Breit zu definieren kann wiederum im Apple Mail 6 Probleme verursachen. Als dritte Alternative kann desshalb das Höhe Attribut doppelt definiert werden. Invalide HTML Syntax, Outlook liest aber erfolgreich den zweiten Wert, während alle anderen Clients den ersten (height=““) zu verwenden scheinen, welcher height=„auto“ entspricht.

<img alt="Image" src="http://www.host.com/image.jpg" width="700" height="" height="370">

Positionierung

Anstelle der CSS-Eigenschaften float oder align sollte das img-Attribut align verwendet werden:

<img alt="Image" src="http://www.host.com/image.jpg" width="700" height="370" align="right">

CSS

Selektoren

Anstelle von Klassen-Selektoren sollten immer Attribut-Selektoren verwendet werden, da Yahoo-Mail die Selektoren sonst als E-Mail spezifisch eindeutig parst (z.B. #small-screen wird zu #yiv1449593645). Da aber eh keine Styles im <head> abgelegt werden, kann diese Regel auch ignoriert werden.

// Bad
.my-class

// Good
table[class=my-class]

Tabellen-Attribute statt CSS

Beim definieren von Tabellen Eigenschaften <table>-Attribute anstelle von CSS verwenden.

<table width="100%" cellspacing="0" cellpading="0" border="0"></table>

Align statt Float

Zur Positionierung von Tabellen anstelle von CSS float das -Attribute align verwenden.

// Bad
<table style="float:left"></table>

// Good
<table align="left"></table>

Padding statt Margin

Aussenabstänge (margin) werden von den meisten E-Mail Programmen nicht unterstützt. Es sollte immer mit padding oder Abstand-Zellen gearbeitet werden.

Schriften

Die Schriftart und -farbe sollte zur Sicherheit alle Text enthaltenden Elementen zugewiesen werden. Einige E-Mail-Programme (Outlook, Lotus Notes) überschreiben sonst z.B. die Schriften in Tabellen und Überschriften.

body,
td,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #00FFFF;
}

Farbwerte

Farbwerte immer als 6-stelligen Hexadezimalwert angeben (#333333). Die Kurzversionen werden nicht überall unterstützt.

Anführungszeichen

Wegen des Inlinings sollten einfache Anführungszeichen verwendet werden (font-family: ‘Helvetica New’, …).

max-width

Outlook

Outlook unterstützt kein max-width. Mit Conditional Comments kann der Effekt trotzdem erzeugt werden.

<!--[if mso]>
<table><tr><td width="530">
<![endif]-->

<!-- Content -->

<!--[if mso]>
</td></tr></table>
<![endif]-->

Apple Mail 6

Mail 6 unterstützt die Eigenschaft max-width nur für Block Elemente. Der Inhalt sollte also noch zusätzlich in einem DIV verschachtelt werden. Da eine E-Mail-Programme wiederum DIV nicht unterstützen sollten auch die Umfassende Tabelle auf den gleichen Wert gesetzt werden.

<div style="max-width: 600px;">
   <table style="max-width: 600px;">...</table>
</div>

HTML

  • Es ist ok h1-h6 Tags zu verwenden.
  • Keine div-Elemente verwenden. Mit table arbeiten.

table

Allen table-Elementen sollten zusätzlich die Inline-Attribute angehängt werden.

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <!-- Stuff -->
</table>

img

Sollten als Block definiert werden, um auch bei gesperrten Bildern (Standard in E-Mail-Programmen) die volle Breite ein zu nehmen.

img {
    display: block; /* default is inline */
}

td/th

Leerzellen die für Layoutzwecke benötigt werden sollten immer mit einem geschützten Leerzeichen befüllt werden, da sie sonst unter umständen kollabieren.

<table>
    <tr>
        <td>&nbsp;</td>
    <tr>
</table>

Element Styles

Ein als display:block definiertes Element ignoriert in Outlook das Padding. Um das Problem zu umgehen muss ein border definiert werden. Da die Hintergrundfarbe sich nicht auf das Padding ausbreitet, muss der Button noch mit einem zusätzlichen Element mit der gleichen Hintergrundfarbe umschlossen werden.

table[class=button] td {
    background-color: #000000; /* Forces Outlook to cover button with background-color */
}

table[class=button] a {
    display: block;
    background-color: #000000;
    border: 1px solid #000000; /* Border forces Outlook to apply padding */
    padding: 20px;
    color: #FFF;
}

Inlining

Die meisten E-Mail-Programme ignorieren Style-Definitionen im Kopfbereich des HTMLs. Es ist deshalb zwingend erfoderlich die Styles inline jedem Element zu zuordnen. Um wärend der Entwicklung trotzdem übersichtlichen Code zu schreiben gibt es sogenannte Inliner, die ein HTML mit Style-Informationen im Kopf in ein Inline-HTML umwandeln.

Der Inliner von Mailchimp hat sich als verlässlicher herausgestellt, da er die Formatierung des Dokuments und alle geschützten Leerzeichen (nbsp) beibehält, was je nach Layout zwingend sein kann. Der Inline von Zurb besitzt dafür eine bessere Unterstützung für CSS Attribut Selektoren.

Weitere Quellen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.