Share
Nach einigen unserer jüngsten Erkenntnisse über den Status von CSS in E-Mails war es höchste Zeit, die Dinge ein wenig zu rütteln. Also hier gehts - CSS3 in E-Mail lebt. Ok, es tut mir leid, wenn ich dich dazu gebracht habe, deinen Toast dort abzulegen. Ich weiß, dass Sie denken: "Aber ... es ist immer noch weitgehend experimentell ... Im Browser zum Booten!" Ja, die Unterstützung von CSS3 ist unter einer Menge E-Mail-Clients, die CSS2 nicht einmal richtig machen können, noch wankelmütiger. Das heißt aber nicht, dass es zu früh ist, etwas davon zu berühren.
In diesem Artikel gehe ich zwei Eigenschaften durch, die Sie in Ihren E-Mail-Vorlagen verwenden können, neben einigen praktischen Beispielen. Also, streichen Sie Ihren Toast ab und lassen Sie uns zur Sache gehen.
Wenn Sie seit einiger Zeit HTML-E-Mail-Vorlagen entwerfen, werden Sie wissen, dass es fast unmöglich ist, vorherzusagen, welche Art von CSS-spezifischen Quirks beim Testen Ihres Designs in den wichtigsten E-Mail-Clients angezeigt werden. Beispielsweise ist Google Mail dafür bekannt, CSS zu entfernen, das nicht Inline ist (und für eine Weile, das Cellpadding von Zellen und das Cellspacing nicht zu erkennen), während einige Clients einfach nur auf Stile verzichten.
Wenn Sie mit dem Entwurf von HTML-E-Mail-Vorlagen noch nicht vertraut sind, ist dies wahrscheinlich das Ahnungsloseste, das Sie lesen können. Aber keine Angst, es gibt viele Informationen, die Sie auf den neuesten Stand bringen. Geben Sie 24ways "Rock Solid HTML Emails" eine Skim und Sie werden sehen, dass es keinen Grund gibt, den Zefrank hochzuschlagen. Es ist überschaubar.
Sollte CSS3 angesichts der Tatsache, dass Designer bereits genug Probleme mit der Unterstützung von CSS2 in E-Mail-Clients haben, nicht zu groß sein? Lesen Sie weiter.
Ja und nein. Für den Ja-Fall gibt es einige beliebte E-Mail-Clients, die eine ziemlich robuste CSS3-Unterstützung haben (dazu später mehr). Die gute Nachricht ist, dass ein paar wenige CSS3-Eigenschaften, die in diesen Clients angezeigt werden, an anderer Stelle nachlassen, was bedeutet, dass es immer eine Fallback-Option gibt. Wenn Sie jedoch sicherstellen möchten, dass Ihre E-Mail-Vorlagen in fast allen E-Mail-Clients nahezu konsistent angezeigt werden, ist CSS3 nicht das Richtige für Sie.
Wenn Sie zu unserem CSS-Leitfaden in der E-Mail wechseln, werden Sie feststellen, dass es einige E-Mail-Clients gibt, die eine Reihe von CSS3-Eigenschaften teilweise oder vollständig unterstützen. Und meist haben sie eines gemeinsam: Webkit.
Wie Ihre E-Mail-Vorlage in Outlook aussieht, ist nicht so, wie sie auf Ihrem Blackberry aussehen wird oder wenn Sie Ihr Webmail in Firefox anzeigen.
Wenn Sie den Segen haben, immer auf einem Mac zu arbeiten, Ihre E-Mails auf Ihrem iPhone abzurufen und die Zeit auf Ihrem iPad zu verbringen, haben Sie eine ziemlich konsistente Sicht auf das Web. Leider hat der Rest von uns einen unterschiedlichen Grad an CSS-Unterstützung auf einer Reihe von Anbieterplattformen. Wie Ihre E-Mail-Vorlage in Outlook aussieht, ist nicht so, wie sie auf Ihrem Blackberry aussehen wird oder wenn Sie Ihr Webmail in Firefox anzeigen.
Daher ist es für Sie wahrscheinlich keine Überraschung, dass Apple-Geräte in ihren E-Mail-Apps und im Safari-Browser dieselbe Rendering-Engine verwenden (die Software, die den HTML- und CSS-Code anzeigt). Für Designer ist es weniger überraschend, dass es sich bei dieser Engine um Webkit handelt und die CSS3-Unterstützung vergleichsweise sehr gut ist.
Allerdings machen Webkit-E-Mail-Clients (Apple Mail, iPhone und iPad Mail) rund 20% der insgesamt verwendeten E-Mail-Clients aus. Was jedoch wirklich zählt, sind die E-Mail-Clients, die Ihre Abonnenten verwenden. Beispielsweise kann ein Mac-Softwareentwickler fast 100% seiner Kunden dazu bringen, seinen Newsletter auf Apple-Geräten abzurufen.
Schauen wir uns einige CSS3-Eigenschaften an, die sich jetzt in Ihrem Posteingang bewegen.
Willkommen bei der neuesten Ausgabe des monatlichen Widget-Klatschs von Widgets Inc..
Hinzufügen von Tropfen und inneren Schatten mit Text-Schatten ist eine zerstörungsfreie Möglichkeit, Ihren Text zu dekorieren. Es kann Sie nicht nur davor bewahren, ansonsten den gleichen Effekt mit einem Bild zu erzielen, sondern sieht auch in Kunden wo gut aus Text-Schatten wird nicht unterstützt.
Zeigen Sie es in einem Webbrowser an.
Die Verwendung abgerundeter Ecken für Ihr ansonsten kastenförmiges Layout oder quadratische Schaltflächen ist im Web bereits eine weit verbreitete Technik. Außerdem können Ihre E-Mail-Vorlagen in den oben genannten E-Mail-Clients ein weicheres, moderneres Aussehen erhalten. Wenn sie nicht unterstützt werden, können sie sicher in eckige Ecken zurückkehren.
Mit der Ankündigung das Grenzradius Da es in IE9 formal implementiert wird, können wir davon ausgehen, dass mehr davon verwendet wird.
Einige der extremeren Verwendungen von CSS3 in E-Mail-Vorlagen finden sich in Situationen, in denen die Empfänger nur sehr wenige E-Mail-Clients verwenden. Ein gutes Beispiel dafür ist der bereits erwähnte Mac-Entwickler. Panik, die Anbieter von "schockierend guter Mac-Software", sendet erstaunliche Rechnungen, nachdem Sie einen ihrer Titel gekauft haben, darunter: - Keuchen! - animierte, leuchtende Tasten:
Hier ist der Code, mit dem dieser Effekt erzielt wurde:
-webkit-animation-name: 'glow'; -webkit-animationsdauer: .7s; -webkit-animation-iterations-count: unendlich -webkit-animation-direction: alternate; -webkit-animation-timing-funktion: komfortabler einstieg;
Natürlich würde dies in einem anderen E-Mail-Client als Apple Mail nicht annähernd so gut aussehen, aber es ist sicherlich ein ordentliches Konzept!
Wie viel CSS3 können Sie in diesem anderen E-Mail-Design von Panic erkennen? Klicken Sie sich durch für eine größere Version:
Beachten Sie, wie das Design im Browser elegant skaliert wird. Und diese Luftpoststreifen? Sie sind Schrägstriche (/). Genius! Um herauszufinden, was in dieser Vorlage vorkam, lesen Sie diesen Artikel.
/ / / / / / / / /
Schauen Sie sich die Nutzungsberichte von CampaignMonitor für E-Mail-Clients an und wechseln Sie zum endgültigen CSS-Leitfaden in der E-Mail, um eine Vorstellung davon zu erhalten, welche CSS3-Eigenschaften für die wichtigsten E-Mail-Clients verfügbar sind. Und natürlich testen, testen, testen. Mit einer Prise CSS3, ein wenig Experimentieren und einer Menge Vorsicht können Sie Ihre E-Mail-Vorlage von der Masse abheben.
Wenn Sie über die Möglichkeit verfügen und Ihre E-Mail-Designs verkaufen möchten, sollten Sie jetzt die Kategorie "E-Mail-Vorlagen" in ThemeForest überprüfen!
Accentsconagua