Quelqu'un a-t-il réussi à faire fonctionner des courriels en HTML avec Twitter Bootstrap ?

Question

J'utilise le premailer-rails3 qui tire les styles en ligne pour les emails html, et j'essaie de le faire fonctionner avec Twitter bootstrap.

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

Il semblerait que certains styles s'affichent correctement, mais pas tous. Je me demande si quelqu'un a un bon exemple de fonctionnement pour faire passer son css Twitter Bootstrap (modifié ou non) dans un courriel html.

Merci !

Answer 1

Si vous voulez dire "Puis-je utiliser la présentation stylistique de Bootstrap dans un courriel ?", alors vous pouvez, bien que je ne connaisse personne qui l'ait encore fait. Vous devrez cependant tout recoder en tableaux.

Si vous recherchez la fonctionnalité, cela dépend de l'endroit où vos e-mails sont consultés. Si une proportion importante de vos utilisateurs utilisent Outlook, Gmail, Yahoo ou Hotmail (ce qui représente environ 75 % des clients de messagerie), une grande partie des avantages de Bootstrap ne sont pas possibles. Mac Mail, iOS Mail et Gmail sur Android sont bien meilleurs pour le rendu des CSS, donc si vous ciblez principalement les appareils mobiles, ce n'est pas si grave.

• JavaScript - complètement hors limites. Si vous tentez de le faire, vous risquez d'atterrir directement dans l'enfer des e-mails (c'est-à-dire dans le dossier des spams). Cela signifie que LESS est également hors limites, même si vous pouvez évidemment utiliser les styles CSS qui en résultent si vous le souhaitez.
• Le CSS en ligne est beaucoup plus sûr à utiliser que tout autre type de CSS (le CSS intégré est possible, le CSS lié est un non catégorique). Les requêtes média sont possibles, ce qui permet d'obtenir une certaine forme de conception réactive. Cependant, 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 par les clients de messagerie. Vous devez tout structurer à l'aide de tableaux.
• font-face - vous ne pouvez utiliser que des images externes. Toutes les autres ressources externes (fichiers CSS, polices de caractères) sont exclues.
• glyphes et sprites - à cause de l'implémentation bizarre d'Outlook 2007 des images d'arrière-plan (VML), vous ne pouvez pas utiliser background-repeat ou position.
• les pseudo-sélecteurs ne sont pas possibles - par ex. :hover , :active les états ne peuvent pas être stylisés séparément

Il y a sont charges de réponses sur SO, et beaucoup d'autres liens sur l'internet en général.

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

Answer 2

Je m'excuse d'avoir ressuscité ce vieux fil de discussion, mais je voulais juste faire savoir à tout le monde qu'il existe un cadre CSS très proche de Bootstrap, créé spécifiquement pour le style des e-mails, voici le lien : http://zurb.com/ink/

J'espère que cela aidera quelqu'un.

Montage ninja : Il a depuis été renommé en Foundation for Emails et le nouveau lien est : https://foundation.zurb.com/emails.html

Un montage silencieux mais mortel : Nouveau lien https://get.foundation/emails.html

Answer 3

Voici quelques-unes des choses que vous ne pouvez pas faire avec le courrier électronique :

• Inclure une section avec des styles . Apple Mail.app le prend en charge, mais Gmail et Hotmail ne le font pas, c'est donc une erreur. Hotmail prend en charge une section de style dans le corps du message, mais Gmail ne le fait toujours pas.
• Lien vers une feuille de style externe. Peu de clients de messagerie prennent en charge cette fonction, il est préférable de l'oublier.
• Background-image / Background-position. Gmail est également le coupable sur ce point.
• Dégagez vos flotteurs . Gmail à nouveau.
• Marge . Oui, sérieusement, Hotmail ignore les marges. En fait, tout positionnement CSS ne fonctionne pas.
• Font-anything . Il est fort probable qu'Eudora ignore tout ce que vous essayez de déclarer avec des polices.

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

Mailchimp propose des modèles d'e-mails que vous pouvez utiliser -. ici

Quelques ressources supplémentaires qui devraient vous aider

• Meilleures pratiques pour le style des e-mails HTML
• Stylisation du html dans le courrier électronique
• Stylisation des e-mails HTML pour Gmail

Answer 4

Vous pouvez utiliser ce https://github.com/advancedrei/BootstrapForEmail pour avoir bloqué votre email.

Answer 5

J'ai récemment passé du temps à chercher à créer des modèles d'e-mails en html, la meilleure solution que j'ai trouvée étant d'utiliser ceci http://htmlemailboilerplate.com/ . J'ai depuis construit 3 modèles assez complexes et ils ont bien fonctionné dans les différents clients de messagerie.