Est-ce que quelqu'un a reçu des e-mails HTML en travaillant avec Twitter Bootstrap?
j'utilise le premailer-rails3 gem qui tire styles inline pour les e-mails html, et j'essaie de le faire fonctionner avec bootstrap Twitter.
https://github.com/fphilipe/premailer-rails3
il semble que certains styles viennent correctement, mais pas tous. Je me demande si quelqu'un a un bel exemple de travail d'obtenir leur Bootstrap CSS Twitter (modifié ou non) dans un email html.
Merci!
8 réponses
si vous voulez dire " puis-je utiliser la présentation stylistique de Bootstrap dans un e-mail?"alors vous pouvez, même si Je ne connais personne qui l'ait fait. Vous aurez besoin de tout recoder dans les tableaux.
si vous êtes après la fonctionnalité, cela dépend de l'endroit où vos e-mails sont consultés. Si une proportion significative de vos utilisateurs sont sur Outlook, Gmail, Yahoo ou Hotmail (et ceux-ci s'élèvent généralement à environ 75% des clients email) alors beaucoup de bonté de Bootstrap n'est pas possible. Mac Mail, iOS Mail et Gmail sur Android sont beaucoup mieux pour rendre CSS, donc si vous ciblez principalement les appareils mobiles, ce n'est pas si mal.
- JavaScript complètement hors limites. Si vous essayez, vous irez probablement directement à l'enfer d'email (A. K. A. dossier spam). Cela signifie que moins est également hors limite, bien que vous puissiez évidemment utiliser les styles css résultants si vous le souhaitez.
- Inline CSS est beaucoup plus sûr à utiliser que tout autre type de CSS (embedded est possible, lié est un non catégorique). Les requêtes des médias sont possibles, de sorte que vous pouvez avoir une sorte de design réactif. Toutefois, il existe une longue liste d'attributs CSS qui ne fonctionnent pas - essentiellement, le modèle de boîte est largement non pris en charge dans les clients de courrier électronique. Tu dois tout structurer avec des tables.
-
font-face- vous ne pouvez utiliser que des images externes. Toutes les autres ressources externes (fichiers CSS, polices) sont exclues. - glyphes et sprites - en raison de L'implémentation étrange de background-images (VML) D'Outlook 2007, vous ne pouvez pas utiliser background-repeat ou position. Les pseudo-sélecteurs
- ne sont pas possibles-par exemple
:hover,:activeles États ne peuvent pas être présentés séparément
Il y sont "1519220920 de" charges de réponses sur DONC, et beaucoup d'autres liens sur la internet au sens large.
Je m'excuse d'avoir réinitialisé ce vieux fil, mais je voulais juste faire savoir à tout le monde qu'il y a un Bootstrap très proche comme CSS framework spécifiquement créé pour le style email, voici le lien: http://zurb.com/ink /
J'espère que ça aidera quelqu'un.
Ninja edit: Il a depuis été rebaptisé Foundation for Emails et le nouveau lien est: https://foundation.zurb.com/emails.html
voici quelques choses que vous ne pouvez pas faire avec l'email:
- Inclure un article avec des styles . Apple Mail.app le supporte, mais Gmail et Hotmail ne le font pas, donc c'est un non-non. Hotmail soutien une section style dans le corps mais Gmail ne le fait toujours pas.
- lien vers une feuille de style externe. peu de clients email soutiennent cela, mieux pour juste l'oublier.
- arrière-plan-image / arrière-plan-position. Gmail est aussi le coupable.
- dégagez vos flotteurs . Gmail une fois de plus.
- marge . Ouais, sérieusement, Hotmail ignore les marges. En gros, tout positionnement CSS ne fonctionne pas du tout.
- Font-rien . Il y a des Chances Qu'Eudora ignore tout ce que vous essayez de déclarer avec police.
Source: http://css-tricks.com/using-css-in-html-emails-the-real-story /
Mailchimp a des modèles de messagerie que vous pouvez utiliser - ici
quelques ressources supplémentaires qui devraient vous aider
vous pouvez utiliser ce https://github.com/advancedrei/BootstrapForEmail pour B-strapping votre email.
j'ai passé du temps récemment à chercher dans la construction de gabarits de courriel html, la meilleure solution que j'ai trouvée était d'utiliser ce http://htmlemailboilerplate.com / . J'ai depuis construit 3 gabarits assez complexes et ils ont bien fonctionné dans les différents clients de courrier électronique.
Salut Brian Armstrong， visite ce lien .
ce blog vous explique comment intégrer Rails avec Bootstrap moins (en utilisant premailer-rails).
si vous utilisez bootstrap sass, vous pouvez faire la même chose:
commence par importer des fichiers Bootstrap sass dans le courriel.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';
et puis dans votre avis <head> section Ajouter
<%= stylesheet_link_tag "email" %>
la meilleure approche que j'ai trouvé est d'utiliser les importations Sass sur une base sélectionnée pour tirer dans votre bootstrap (ou tout autre) styles dans les e-mails que pourrait être nécessaire.
tout d'abord, créez un nouveau Fichier parent scss quelque chose comme email.scss pour votre style de courriel. Cela pourrait ressembler à ceci:
// 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";
ensuite, dans vos modèles de courriel, ne faites référence qu'à votre courriel compilé.fichier css, qui ne contient que les styles de bootstrap sélectionnés référencés et imbriquée correctement dans votre e-mail.scss.
par exemple, certains styles de bootstrap seront en conflit avec le style de table responsive de Zurb. Pour corriger cela, vous pouvez emboîter les styles de bootstrap dans une classe mère ou un autre sélecteur afin d'appeler les styles de table de bootstrap seulement quand nécessaire.
de cette façon, vous avez la flexibilité de tirer dans les classes que lorsque nécessaire. Vous verrez que j'utilise http://zurb.com/ qui est une grande bibliothèque de messagerie responsive à utiliser. Voir aussi http://zurb.com/ink/
enfin, utilisez un premailer comme https://github.com/fphilipe/premailer-rails3 mentionné ci-dessus pour traiter le style en css inline, compilant styles inline à seulement ce qui est utilisé dans ce modèle de courriel particulier. Par exemple, pour premailer, votre fichier ruby pourrait ressembler à quelque chose comme ça pour compiler un e-mail dans le style inline.
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
Espérons que cette aide! J'ai eu du mal à trouver un cadre flexible pour le modelage des courriels à travers Pardot, Salesforce et notre produit réponse automatique intégrée et e-mails quotidiens.
le truc ici est que vous ne voulez pas inclure le bootstrap entier. Le problème est que les clients de messagerie ignoreront les requêtes des médias et traiteront tous les styles d'impression qui ont beaucoup de !déclarations importantes.
au lieu de cela, vous devez inclure seulement les parties spécifiques de bootstrap que vous avez besoin. Mon e-mail.CSS.le fichier scss ressemble à ceci:
@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';