Quelqu'un a-t-il reçu des e-mails HTML fonctionnant avec Twitter Bootstrap?


92

J'utilise le premailer-rails3gem qui extrait les styles en ligne pour les e-mails html, et j'essaie de le faire fonctionner avec le bootstrap de Twitter.

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

Il semble que certains styles entrent correctement, mais pas tous. Je me demande si quelqu'un a un bel exemple de travail pour obtenir son css Twitter Bootstrap (modifié ou non) dans un e-mail html.

Merci!


16
Les clients de messagerie sont très difficiles à styliser. Avec tout le CSS complexe de bootstrap, je ne pense pas que cela fonctionnera. Vous feriez mieux de supprimer ce que vous pouvez et d'utiliser des tableaux et des styles en ligne pour obtenir le style que vous souhaitez ou fermer.
Andres Ilich

J'ai le même problème. Je pense que ce que je vais finir par faire, c'est créer l'e-mail, prendre une capture d'écran de l'apparence du CSS sans texte, puis dans le HTML en utilisant l'image de la capture d'écran avec le texte. C'est une mauvaise solution, mais elle devrait faire le travail.
gsingh2011

2
Je dois cosigner ce qui précède. Les e-mails sont vraiment spécifiques (au cas où vous ne seriez pas familier) Essayez de télécharger quelques modèles d'e-mails gratuits et modifiez le code. Essayez ces liens freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/
frontsideup

2
-1 pour envoyer autre chose que des e-mails en texte brut.
Cody Gray

2
Tout à fait d'accord avec toi Brian. Je travaille sur des e-mails HTML depuis quelques jours, et c'est inutilement et extrêmement douloureux. Je suis intéressé par le démarrage d'un équivalent de style Bootstrap pour les e-mails HTML; seriez-vous intéressé à aider?
NoizWaves

Réponses:


83

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

Si vous recherchez la fonctionnalité, cela dépend de l'endroit où vos e-mails sont consultés. Si une proportion significative de vos utilisateurs utilise Outlook, Gmail, Yahoo ou Hotmail (et cela représente généralement environ 75% des clients de messagerie), alors les bienfaits de Bootstrap ne sont pas possibles. Mac Mail, iOS Mail et Gmail sur Android sont bien meilleurs pour le rendu 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 des e-mails (alias dossier spam). Cela signifie que LESS est également hors limites, bien que vous puissiez évidemment utiliser les styles CSS résultants si vous le souhaitez.
  • Le CSS en ligne est beaucoup plus sûr à utiliser que tout autre type de CSS (intégré est possible, lié est un non définitif). Les requêtes multimédias sont possibles, vous pouvez donc avoir une sorte de conception réactive. Cependant, il existe une longue liste d'attributs CSS qui ne fonctionnent pas - essentiellement, le modèle de boîte n'est en grande partie pas pris en charge dans les clients de messagerie. Vous devez tout structurer avec des tableaux.
  • font-face- vous ne pouvez utiliser que des images externes. Toutes les autres ressources externes (fichiers CSS, polices) sont exclues.
  • glyphes et sprites - à cause de l'implémentation étrange 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 exemple :hover, les :activeétats ne peuvent pas être stylisés séparément

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


1
Le premier lien est mort.
Houman

45

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

J'espère que ça aide quelqu'un.

Ninja edit: Il a depuis été renommé Foundation for Emailset le nouveau lien est: https://foundation.zurb.com/emails.html


1
Tous les liens rompus.
Houman

16

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

  • Incluez une section avec des styles . Apple Mail.app le prend en charge, mais pas Gmail et Hotmail, c'est donc un non-non. Hotmail prendra en charge une section de style dans le corps, mais Gmail ne le fait toujours pas.
  • Lien vers une feuille de style externe. Peu de clients de messagerie prennent en charge cela, mieux vaut simplement l'oublier.
  • Image d'arrière-plan / Position d'arrière-plan. Gmail est également le coupable de celui-ci.
  • Nettoyez vos flotteurs . Gmail à nouveau.
  • Marge . Oui, sérieusement, Hotmail ignore les marges. Fondamentalement, aucun positionnement CSS ne fonctionne du tout.
  • Police-n'importe quoi . Il y a de fortes chances qu'Eudora ignore tout ce que vous essayez de déclarer avec les 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


1. Vous pouvez utiliser des styles - vous ne devriez pas le mettre dans la tête, mais vous pouvez l'inclure dans le corps. 2. Les arrière-plans sont parfaits - utilisez l'attribut html d'arrière-plan au lieu de CSS. Outlook 2007/2010 nécessite leur propre solution («VML»). 3. Vous ne pouvez pas du tout utiliser de flotteurs, encore moins les nettoyer. 4. Font-tout - Eudora est un client minoritaire. Évidemment, cela dépend de votre client (regardez l'analytique), mais font-sizevous offre une plus grande flexibilité à très peu de frais.
Dan Blows


2

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


1

Salut Brian Armstrong, visitez ce lien .

Ce blog vous explique comment intégrer Rails avec Bootstrap less (en utilisant des rails premailer).

Si vous utilisez bootstrap sass, vous pouvez faire de même:

commencez par importer des fichiers Bootstrap sass dans 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';

puis dans votre <head>section vue , ajoutez <%= stylesheet_link_tag "email" %>


0

La meilleure approche que j'ai proposée est d'utiliser les importations Sass sur une base sélectionnée pour extraire vos styles de bootstrap (ou tout autre) dans les e-mails si nécessaire.

Tout d'abord, créez un nouveau fichier parent scss, quelque chose comme email.scsspour votre style d'e-mail. 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 courrier électronique, ne faites référence qu'à votre fichier email.css compilé, qui ne contient que les styles d'amorçage sélectionnés référencés et correctement imbriqués dans votre email.scss.

Par exemple, certains styles de bootstrap entreront en conflit avec le style de table responsive de Zurb. Pour résoudre ce problème, vous pouvez imbriquer les styles de bootstrap dans une classe parente ou un autre sélecteur afin d'appeler les styles de table de bootstrap uniquement lorsque cela est nécessaire.

De cette façon, vous avez la possibilité de tirer des classes uniquement lorsque cela est nécessaire. Vous verrez que j'utilise http://zurb.com/ce qui est une excellente bibliothèque de messagerie réactive à utiliser. Voir égalementhttp://zurb.com/ink/

Enfin, utilisez un pré-envoi comme https://github.com/fphilipe/premailer-rails3mentionné ci-dessus pour traiter le style en css en ligne, en compilant les styles en ligne uniquement avec ce qui est utilisé dans ce modèle de courrier électronique particulier. Par exemple, pour le pré-envoi, votre fichier ruby ​​pourrait ressembler à ceci pour compiler un e-mail dans un style en ligne.

    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

J'espère que cela t'aides! J'ai eu du mal à trouver un cadre de création de modèles d'e-mails flexible dans Pardot, Salesforce et la réponse automatique intégrée et les e-mails quotidiens de notre produit.


0

L'astuce ici est que vous ne voulez pas inclure tout le bootstrap. Le problème est que les clients de messagerie ignorent les requêtes multimédias et traitent tous les styles d'impression qui contiennent de nombreuses déclarations! Importantes.

Au lieu de cela, vous devez uniquement inclure les parties spécifiques de bootstrap dont vous avez besoin. Mon fichier email.css.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';

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.