Hat jemand HTML-E-Mails mit Twitter Bootstrap erhalten?

Ich verwende das premailer-rails3Juwel, das Stile für HTML-E-Mails inline zieht, und ich versuche, es mit Twitter-Bootstrap zum Laufen zu bringen.

https://github.com/fphilipe/premailer-rails3

Es sieht so aus, als ob einige Stile korrekt eingehen, aber nicht alle. Ich frage mich, ob jemand ein gutes Beispiel dafür hat, wie er seine Twitter-Bootstrap-CSS (geändert oder nicht) in eine HTML-E-Mail einbindet.

Vielen Dank!

Wenn Sie meinen "Kann ich die stilistische Darstellung von Bootstrap in einer E-Mail verwenden?" dann kannst du, obwohl ich noch niemanden kenne, der es getan hat. Sie müssen jedoch alles in Tabellen neu codieren.

Wenn Sie nach Funktionalität suchen, hängt dies davon ab, wo Ihre E-Mails angezeigt werden. Wenn sich ein erheblicher Teil Ihrer Benutzer in Outlook, Google Mail, Yahoo oder Hotmail befindet (und dies macht normalerweise etwa 75% der E-Mail-Clients aus), ist ein Großteil der Güte von Bootstrap nicht möglich. Mac Mail, iOS Mail und Gmail unter Android können CSS viel besser rendern. Wenn Sie also hauptsächlich auf mobile Geräte abzielen, ist dies nicht ganz so schlimm.

• JavaScript - völlig tabu. Wenn Sie es versuchen, gehen Sie wahrscheinlich direkt zur E-Mail-Hölle (auch bekannt als Spam-Ordner). Dies bedeutet, dass WENIGER auch außerhalb der Grenzen liegt, obwohl Sie die resultierenden CSS-Stile natürlich verwenden können, wenn Sie möchten.
• Inline-CSS ist viel sicherer zu verwenden als jede andere Art von CSS (eingebettet ist möglich, verknüpft ist ein definitives Nein). Medienabfragen sind möglich, sodass Sie eine Art responsives Design haben können. Es gibt jedoch eine lange Liste von CSS-Attributen, die nicht funktionieren. Im Wesentlichen wird das Box-Modell in E-Mail-Clients weitgehend nicht unterstützt. Sie müssen alles mit Tabellen strukturieren.
• font-face- Sie können nur externe Bilder verwenden. Alle anderen externen Ressourcen (CSS-Dateien, Schriftarten) sind ausgeschlossen.
• Glyphen und Sprites - Aufgrund der seltsamen Implementierung von Hintergrundbildern (VML) in Outlook 2007 können Sie keine Hintergrundwiederholung oder Position verwenden.
• Pseudo-Selektoren sind nicht möglich - z. B. :hoverkönnen :activeZustände nicht separat gestaltet werden

Es gibt Lasten von Antworten auf SO, und viele anderen Links im Internet im Allgemeinen.

• http://www.email-standards.org/
• http://htmlemailboilerplate.com/
• http://www.campaignmonitor.com/css/

Ich entschuldige mich für die Wiederbelebung dieses alten Threads, aber ich wollte nur alle wissen lassen, dass es ein sehr enges Bootstrap-ähnliches CSS-Framework gibt, das speziell für das E-Mail-Styling erstellt wurde. Hier ist der Link: http://zurb.com/ink/

Hoffe es hilft jemandem.

Ninja edit: Es wurde inzwischen in umbenannt Foundation for Emailsund der neue Link lautet: https://foundation.zurb.com/emails.html

Hier sind einige Dinge, die Sie mit E-Mail nicht tun können:

• Fügen Sie einen Abschnitt mit Stilen hinzu . Apple Mail.app unterstützt dies, Google Mail und Hotmail jedoch nicht. Daher ist es ein Nein-Nein. Hotmail unterstützt einen Stilabschnitt im Textkörper, Google Mail jedoch immer noch nicht.
• Link zu einem externen Stylesheet. Nicht viele E-Mail-Clients unterstützen dies, am besten vergessen Sie es einfach.
• Hintergrundbild / Hintergrundposition. Google Mail ist auch der Schuldige in diesem Fall.
• Räumen Sie Ihre Schwimmer . Google Mail erneut.
• Margin . Ja, im Ernst, Hotmail ignoriert Ränder. Grundsätzlich funktioniert jede CSS-Positionierung überhaupt nicht.
• Schrift alles . Es besteht die Möglichkeit, dass Eudora alles ignoriert, was Sie mit Schriftarten deklarieren möchten.

Quelle: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp bietet E-Mail-Vorlagen, die Sie hier verwenden können

Noch ein paar Ressourcen, die Ihnen helfen sollen

• Best Practices für die Gestaltung von HTML-E-Mails
• Styling von HTML in E-Mail
• Styling von HTML-E-Mails für Google Mail

Sie können diese https://github.com/advancedrei/BootstrapForEmail zum B-Strapping Ihrer E-Mail verwenden.

Ich habe vor kurzem einige Zeit damit verbracht, HTML-E-Mail-Vorlagen zu erstellen . Die beste Lösung, die ich gefunden habe, war die Verwendung dieser http://htmlemailboilerplate.com/ . Ich habe seitdem 3 ziemlich komplexe Vorlagen erstellt und sie haben in den verschiedenen E-Mail-Clients gut funktioniert.

Hallo Brian Armstrong, besuchen Sie diesen Link .

Dieser Blog zeigt Ihnen , wie integrieren Rails mit Bootstrap weniger (mit premailer-Schienen).

Wenn Sie Bootstrap Sass verwenden, können Sie dasselbe tun:

Beginnen Sie mit dem Importieren einiger Bootstrap-Sass-Dateien in email.css.scss

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';

und dann in Ihrem Ansichtsbereich <head>hinzufügen <%= stylesheet_link_tag "email" %>

Der beste Ansatz, den ich mir ausgedacht habe, besteht darin, Sass-Importe auf einer ausgewählten Basis zu verwenden, um Ihre Bootstrap-Stile (oder andere) nach Bedarf in E-Mails zu integrieren.

Erstellen Sie zunächst eine neue übergeordnete scss-Datei, die email.scssIhrem E-Mail-Stil entspricht. Das könnte so aussehen:

    // Core variables and mixins
    @import "css/main/ezdia-variables";

    @import "css/bootstrap/mixins";
    @import "css/main/ezdia-mixins";

    // Import base classes
    @import "css/bootstrap/scaffolding";
    @import "css/bootstrap/type";
    @import "css/bootstrap/buttons";
    @import "css/bootstrap/alerts";

    // nest conflicting bootstrap styles
    .bootstrap-style {
        //use single quotes for nested imports
        @import 'css/bootstrap/normalize';
        @import 'css/bootstrap/tables';
    }

    @import "css/main/main";

    // Main email classes
    @import "css/email/zurb";
    @import "css/email/main";

Verweisen Sie dann in Ihren E-Mail-Vorlagen nur auf Ihre kompilierte Datei email.css, die nur die ausgewählten Bootstrap-Stile enthält, auf die in Ihrer email.scss verwiesen und die ordnungsgemäß verschachtelt sind.

Beispielsweise stehen bestimmte Bootstrap-Stile in Konflikt mit dem reaktionsschnellen Tabellenstil von Zurb. Um dies zu beheben, können Sie die Bootstrap-Stile in einer übergeordneten Klasse oder einem anderen Selektor verschachteln, um die Tabellenstile von Bootstrap nur bei Bedarf aufzurufen.

Auf diese Weise haben Sie die Flexibilität, Klassen nur bei Bedarf einzuziehen. Sie werden sehen, dass ich http://zurb.com/eine großartige reaktionsschnelle E-Mail-Bibliothek verwende. Siehe auchhttp://zurb.com/ink/

Verwenden Sie zum Schluss einen Premailer wie https://github.com/fphilipe/premailer-rails3oben erwähnt, um den Stil in Inline- CSS zu verarbeiten, und kompilieren Sie Inline-Stile nur zu dem, was in dieser bestimmten E-Mail-Vorlage verwendet wird. Für Premailer könnte Ihre Ruby-Datei beispielsweise so aussehen, dass eine E-Mail im Inline-Stil kompiliert wird.

    require 'rubygems' # optional for Ruby 1.9 or above.
    require 'premailer'

    premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)

    # Write the HTML output
    File.open("delivery_report.html", "w") do |fout|
      fout.puts premailer.to_inline_css
    end

    # Write the plain-text output
    File.open("output.txt", "w") do |fout|
      fout.puts premailer.to_plain_text
    end

    # Output any CSS warnings
    premailer.warnings.each do |w|
      puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
    end

Hoffe das hilft! Wir hatten Probleme, ein flexibles Framework für E-Mail-Vorlagen in Pardot, Salesforce und den integrierten automatischen Antwort- und täglichen E-Mails unseres Produkts zu finden.

Der Trick dabei ist, dass Sie nicht den gesamten Bootstrap einschließen möchten. Das Problem ist, dass E-Mail-Clients die Medienabfragen ignorieren und alle Druckstile verarbeiten, die viele wichtige Aussagen enthalten.

Stattdessen müssen Sie nur die spezifischen Teile des Bootstraps einschließen, die Sie benötigen. Meine email.css.scss-Datei sieht folgendermaßen aus:

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";

@import 'bootstrap/normalize';
@import 'bootstrap/tables';

Was ist mit Bootstrap Email? Dies scheint wirklich schön und kompatibel mit Bootstrap 4 zu sein.