Obwohl ich zu 85 % sicher bin, dass Sie Can I Use… gesehen und verwendet haben, wette ich, dass die Wahrscheinlichkeit, dass Sie Can I Email… gesehen und verwendet haben, nur 13 % beträgt. Es hat die gleiche Ausstrahlung – detaillierte Support-Informationen für Webplattform-Funktionen –, nur dass es sich anstelle von Support-Informationen für Webbrowser um E-Mail-Clients handelt. Campaign Monitor pflegt ebenfalls seit langem eine Anleitung, aber ich gebe zu, dass mir der von Can I Use… vorgegebene Designstil gefällt.
HTML-E-Mail wird oft belächelt, weil man dafür auf solch antiquierte Weise coden muss (<table>-Tags en masse!), aber das ist vielleicht nicht ganz fair. Kevin Mandeville sprach darüber, wie er 2017 CSS Grid (kein Scherz) in einer E-Mail verwendet hat.
Unsere Apple Mail-Zielgruppe bei Litmus beträgt etwa 30 %, sodass ein guter Teil unserer Abonnentenbasis das Grid-Desktop-Layout sehen kann.
Wo CSS Grid nicht unterstützt wird (und für Geräte-/Fensterbreiten von weniger als 850 Pixeln) fielen wir auf ein einspaltiges Layout zurück.
Genau wie Websites, richtig? Sie müssen nicht überall gleich aussehen, solange die Erfahrung überall akzeptabel ist.
Ich selbst arbeite nicht annähernd so viel mit HTML-E-Mails wie mit für-Webbrowsern, aber ich mache einiges! Zum Beispiel ist der Newsletter für CSS-Tricks ein RSS-Feed, der eine MailChimp-Vorlage speist. Die E-Mail, die wir versenden, um neue Shows für ShopTalk anzukündigen, ist ähnlich. Beides sind ziemlich einfache MailChimp-Vorlagen, die mit etwas CSS angepasst sind.
Aber das direkteste CSS-Arbeiten, das ich mit HTML-E-Mails mache, sind die Vorlagen für CodePen-E-Mails. Wir haben alle möglichen davon, von komplett benutzerdefinierten Vorlagen bis hin zu speziellen Vorlagen für The Spark und Challenges und natürlich transaktionale E-Mails.
Das sind alles E-Mail-Vorlagen von Grund auf neu. Es ist sehr schön zu wissen, welche CSS-Funktionen ich verwenden kann. Ich war zum Beispiel überrascht, wie gut Flexbox in E-Mails unterstützt wird.
Es lohnt sich immer, über Fallbacks nachzudenken. Nichts hindert Sie daran, eine E-Mail zu erstellen, die komplett mit CSS Grid gestaltet ist. Einige E-Mail-Clients unterstützen es, andere nicht. Wenn es unterstützt wird, entsteht ein schickes Layout. Wenn es nicht unterstützt wird, erhalten Sie, vorausgesetzt, Sie lassen die Quellreihenfolge verständlich, einfach eine Spalte von Blöcken (was die meisten E-Mails sowieso sind) und sollte absolut funktionsfähig sein.
Progressive Enhancement ist in E-Mails fast einfacher, da es selten Funktionalität gibt, um die man sich kümmern müsste.
Schön!
Das ist großartig, aber ich denke, die E-Mail-Designer sollten sich wirklich zuerst um datenschutzfreundliche https://useplaintext.email kümmern, bevor sie die Mail mit all diesen Farbnuancen überfluten...