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!
Odpowiedzi:
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.
font-face- możesz używać tylko zewnętrznych obrazów. Wszystkie inne zasoby zewnętrzne (pliki CSS, czcionki) są wykluczone.:hover, :activepaństwa nie mogą być urządzone oddzielnieTam są ładunki z odpowiedzi na to i wiele innych linków w internecie w ogóle.
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
font-sizezapewnia większą elastyczność przy bardzo niewielkich kosztach.
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.