Czy ktoś otrzymał e-maile w formacie HTML podczas pracy z Twitter Bootstrap?

Używam premailer-rails3klejnotu, który wciąga style w wiadomości e-mail w formacie HTML i staram się, aby działał z bootstrapem na Twitterze.

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

Wygląda na to, że niektóre style są poprawnie wyświetlane, ale nie wszystkie. Zastanawiam się, czy ktoś ma fajny działający przykład umieszczania css Twittera Bootstrap (zmodyfikowanego lub nie) w wiadomości e-mail w formacie HTML.

Dzięki!

Jeśli masz na myśli „Czy mogę użyć stylistycznej prezentacji Bootstrap w e-mailu?” wtedy możesz, chociaż nie znam jeszcze nikogo, kto to zrobił. Musisz jednak przekodować wszystko w tabelach.

Jeśli zależy Ci na funkcjonalności, zależy to od tego, gdzie wyświetlane są Twoje e-maile. Jeśli znaczna część Twoich użytkowników korzysta z Outlooka, Gmaila, Yahoo lub Hotmaila (a te zazwyczaj stanowią około 75% klientów poczty e-mail), wtedy wiele zalet Bootstrap nie jest możliwe. Mac Mail, iOS Mail i Gmail na Androida znacznie lepiej radzą sobie z renderowaniem CSS, więc jeśli kierujesz reklamy głównie na urządzenia mobilne, nie jest tak źle.

• JavaScript - całkowicie niedostępny. Jeśli spróbujesz, prawdopodobnie przejdziesz prosto do piekła e-mailowego (czyli folderu ze spamem). Oznacza to, że LESS jest również poza zakresem, chociaż oczywiście możesz użyć wynikowych stylów CSS, jeśli chcesz.
• Wbudowany CSS jest znacznie bezpieczniejszy w użyciu niż jakikolwiek inny typ CSS (osadzony jest możliwy, link oznacza zdecydowanie nie). Zapytania o media są możliwe, więc możesz mieć projekt responsywny. Istnieje jednak długa lista atrybutów CSS, które nie działają - zasadniczo model pudełkowy jest w dużej mierze nieobsługiwany w klientach poczty e-mail. Musisz uporządkować wszystko za pomocą tabel.
• font-face- możesz używać tylko zewnętrznych obrazów. Wszystkie inne zasoby zewnętrzne (pliki CSS, czcionki) są wykluczone.
• glify i sprite'y - z powodu dziwnej implementacji obrazów tła (VML) w programie Outlook 2007 nie można używać powtarzania tła ani pozycji.
• pseudo-selektory nie są możliwe - na przykład :hover, :activepaństwa nie mogą być urządzone oddzielnie

Tam są ładunki z odpowiedzi na to i wiele innych linków w internecie w ogóle.

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

Przepraszam za przywrócenie tego starego wątku, ale chciałem tylko poinformować wszystkich, że istnieje bardzo bliski Bootstrap, taki jak framework CSS, stworzony specjalnie do stylizacji wiadomości e-mail, tutaj jest link: http://zurb.com/ink/

Mam nadzieję, że to komuś pomoże.

Edycja Ninja: od tego czasu została zmieniona na, Foundation for Emailsa nowy link to: https://foundation.zurb.com/emails.html

Cicha, ale zabójcza edycja: Nowy link https://get.foundation/emails.html

Oto kilka rzeczy, których nie możesz zrobić za pomocą poczty e-mail:

• Dołącz sekcję ze stylami . Apple Mail.app to obsługuje, ale Gmail i Hotmail nie, więc nie można. Hotmail będzie obsługiwał sekcję stylu w treści, ale Gmail nadal nie.
• Link do zewnętrznego arkusza stylów.Niewielu klientów poczty e-mail to obsługuje, najlepiej po prostu o tym zapomnieć.
• Background-image / Background-position. Gmail jest również winowajcą tego.
• Wyczyść swoje pływaki . Gmail ponownie.
• Margines . Tak, poważnie, Hotmail ignoruje marginesy. Zasadniczo żadne pozycjonowanie CSS w ogóle nie działa.
• Czcionka cokolwiek . Istnieje prawdopodobieństwo, że Eudora zignoruje wszystko, co próbujesz zadeklarować za pomocą czcionek.

Źródło: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp ma szablony wiadomości e-mail, których możesz użyć - tutaj

Jeszcze kilka zasobów, które powinny Ci pomóc

• Najlepsze praktyki dotyczące stylizacji wiadomości e-mail w formacie HTML
• Stylizacja html w mailu
• Stylizowanie e-maili HTML dla Gmaila

Możesz użyć tego https://github.com/advancedrei/BootstrapForEmail do b-strapowania swojego e-maila.

Niedawno spędziłem trochę czasu na tworzeniu szablonów wiadomości e-mail w formacie html, najlepszym rozwiązaniem, jakie znalazłem, było użycie http://htmlemailboilerplate.com/ . Od tego czasu stworzyłem 3 dość złożone szablony, które sprawdziły się w różnych klientach poczty e-mail.

Cześć Brian Armstrong! Odwiedź ten link .

Na tym blogu dowiesz się, jak zintegrować Railsy z Bootstrap less (używając premailer-rails).

Jeśli używasz sass bootstrap, możesz zrobić to samo:

Zacznij od zaimportowania niektórych plików Bootstrap Sass do 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';

a następnie w <head>sekcji widoku dodaj <%= stylesheet_link_tag "email" %>

Najlepszym podejściem, jakie wymyśliłem, jest użycie importu Sass na wybranej podstawie, aby w razie potrzeby wprowadzić swój bootstrap (lub inne) style do wiadomości e-mail.

Najpierw utwórz nowy plik nadrzędny scss, podobny email.scssdo swojego stylu e-mail. Może to wyglądać tak:

    // 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";

Następnie w szablonach wiadomości e-mail odwołuj się tylko do skompilowanego pliku email.css, który zawiera tylko wybrane style ładowania początkowego, do których istnieją odniesienia i są prawidłowo zagnieżdżone w pliku email.scss.

Na przykład niektóre style ładowania początkowego będą kolidować z responsywnym stylem tabeli Zurb. Aby to naprawić, możesz zagnieździć style bootstrap w klasie nadrzędnej lub innym selektorze, aby wywoływać style tabeli bootstrap tylko wtedy, gdy są potrzebne.

W ten sposób masz swobodę przyciągania zajęć tylko wtedy, gdy jest to potrzebne. Zobaczysz, że używam, http://zurb.com/która jest świetną responsywną biblioteką e-mail. Zobacz teżhttp://zurb.com/ink/

Na koniec użyj programu Preailer, takiego jak https://github.com/fphilipe/premailer-rails3 wspomniany powyżej, aby przetworzyć styl na wbudowany css, kompilując style wbudowane tylko do tego, co jest używane w tym konkretnym szablonie wiadomości e-mail. Na przykład w przypadku premailera Twój plik ruby ​​może wyglądać mniej więcej tak, aby skompilować wiadomość e-mail w stylu wbudowanym.

    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

Mam nadzieję że to pomoże! Starałem się znaleźć elastyczną platformę tworzenia szablonów wiadomości e-mail w Pardot, Salesforce oraz wbudowanej automatycznej odpowiedzi i codziennych wiadomościach e-mail naszego produktu.

Sztuczka polega na tym, że nie chcesz uwzględniać całego bootstrapu. Problem polega na tym, że klienci poczty e-mail będą ignorować zapytania mediów i przetwarzać wszystkie style drukowania, które zawierają wiele! Ważnych oświadczeń.

Zamiast tego musisz uwzględnić tylko te określone części bootstrapu, których potrzebujesz. Mój plik email.css.scss wygląda następująco:

@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';

A co z pocztą e-mail Bootstrap? Wydaje się, że jest to naprawdę fajne i kompatybilne z bootstrapem 4.