Dies ist ein Begleitmaterial zu diesem Video, in dem wir eine responsive HTML-E-Mail von Grund auf codieren und gestalten –
http://youtu.be/XnWIperMy08----
Dieses Video behandelt einige Hauptpunkte:
# Codierungsstruktur
- Es spielt keine Rolle, machen Sie sich keine Sorgen um Verzeichnisse und Kram, Sie wollen das schnell und unkompliziert erledigen.
- Lassen Sie sich nicht täuschen, dass Sie Tabellen verwenden müssen. Das ist eine veraltete Praxis und nur nützlich, um mehrspaltige Layouts zu erstellen, die an sich keine gute Idee sind...
- Denken Sie daran, dass Ihre Kopf- und Körper-Tags wahrscheinlich vom E-Mail-Client entfernt werden. Das macht Style-Tags zu einem netten Zusatz, aber Sie können sich nicht darauf verlassen.
- Was @media-Abfragen ebenfalls unzuverlässig macht.
- Das bedeutet, dass eine gute responsive E-Mail von Natur aus flexibel ist und zu Beginn in einer einzigen Spalte angeordnet ist.
- Alle Ihre Styles müssen inline sein. Aber das bedeutet nicht, dass Sie sie so schreiben müssen.
- Verwenden Sie den CSS-Inliner von Mailchimp, um das CSS inline zu verschieben, nachdem Sie es mit welcher Methode auch immer erstellt haben, die Sie bevorzugen. Ich benutze SASS. Wie ein Profi.
# Mobile-First-Nachrichten
E-Mail-Designer und -Versender müssen wirklich verstehen und akzeptieren, dass ein großer Teil ihrer E-Mails auf einem mobilen Gerät geöffnet wird. Ich habe beschrieben, wie ich für eine flexible Breite in einer Spalte entwerfe. Aber das bedeutet auch, dass Sie Ihre Inhalte mobilfreundlich gestalten müssen.
- Eine klare Botschaft.
- Einen klaren Call-to-Action.