Shapes in E-Mails - eine gute Praxis?

Question

Ich sende E-Mails an meine Kunden mit Gutschein-Informationen. Ich möchte einen Gutschein grafisch darstellen.

Ich kam auf eine Idee, Tabellen zu stylen (da Tabellen in E-Mail-Clients gut empfangen werden) - Code-Snippet für meine Lösung überprüfen.

Ich möchte nicht für Bilder gehen, da sie in den meisten E-Mail-Clients standardmäßig deaktiviert sind.

Meine Frage ist: Ist es gut per E-Mail-Clients und Programme empfangen oder sollte ich davon Abstand nehmen?

#badge-ribbon { 
 
    position: relative; 
 
    background: red; 
 
    height: 100px; width: 100px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
} 
 
#badge-ribbon:before, #badge-ribbon:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-bottom: 70px solid red; 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    top: 70px; 
 
    left: -10px; 
 
    -webkit-transform: rotate(-140deg); 
 
    -moz-transform: rotate(-140deg); 
 
    -ms-transform: rotate(-140deg); 
 
    -o-transform: rotate(-140deg); } 
 
#badge-ribbon:after { 
 
    left: auto; 
 
    right: -10px; 
 
    -webkit-transform: rotate(140deg); 
 
    -moz-transform: rotate(140deg); 
 
    -ms-transform: rotate(140deg); 
 
    -o-transform: rotate(140deg); 
 
}

\t <table id="badge-ribbon">

Answer 1

CSS in E-Mail zu liefern, ist über die CSS 1.8 Ebene, es selten spannender oder verwendbar ist als CSS im Jahr 1998 war. Am besten senden Sie eine einfache E-Mail mit einem HTML-Code-Overlay, das style Elemente und table Design-Strukturen verwendet. Bilder und große Farbblöcke sind die beste Methode, da CSS 3-Unterstützung ziemlich nicht existent ist und HTML-CSS-Unterstützung im Allgemeinen extrem lückenhaft und uneinheitlich ist, abhängig davon, wie das CSS dargestellt wird, manche Dinge funktionieren als style Elemente, aber CSS-Stylesheets werden normalerweise vom HTML-Code getrennt.

CSS3 wird im Allgemeinen nicht von E-Mail-Clients unterstützt.

Haben Sie eine einfache, saubere E-Mail mit leuchtend dicken Farbblock und/oder Bildern und einem klaren Link zu einer Webseite, die die gleiche Nachricht in schönen HTML5 und CSS3 zeigt.

Answer 2

Ich würde vermeiden diese Technik verwendet, und gehen Sie mit Bildern, da es eine Menge von dieser CSS eine gute Chance, nicht in Outlook-Clients arbeiten und Gmail eingebettet CSS Streifen aus vollständig. Ein Rückfall für Bilder nicht geladen wird, um den Alt-Tag mit einer Überschrift/Kopie

Campaign Monitor CSS support guide