Alguém recebeu e-mails em HTML com o Twitter Bootstrap?

91

Estou usando o premailer-rails3gem que puxa estilos embutidos para emails html, e estou tentando fazê-lo funcionar com o bootstrap do Twitter.

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

Parece que alguns estilos vêm corretamente, mas nem todos eles. Estou me perguntando se alguém tem um bom exemplo de trabalho de como obter seu css do Twitter Bootstrap (modificado ou não) em um e-mail html.

Obrigado!

Brian Armstrong
fonte
16
Os clientes de e-mail são muito difíceis de definir. Com todo o CSS complexo do bootstrap, acho que não vai funcionar. É melhor você remover o que puder e usar tabelas e estilos embutidos para chegar ao estilo que deseja ou fechar.
Andres Ilich
Eu tenho o mesmo problema. Acho que vou acabar fazendo o e-mail, tirando uma captura de tela de como o CSS faz com que fique sem texto, e depois no HTML usando a imagem da captura de tela junto com o texto. É uma solução desagradável, mas deve dar conta do recado.
gsingh2011
2
Eu tenho que assinar o acima. Os e-mails são realmente específicos (caso você não esteja familiarizado) Tente baixar alguns modelos de e-mail gratuitos e ajuste o código. Experimente estes links freemailtemplates.com, www.campaignmonitor.com/css/ & www.sitepoint.com/code-html-email-newsletters/
frontsideup
2
-1 para enviar qualquer coisa que não seja e-mails de texto simples.
Cody Gray
2
Concordo totalmente com você Brian. Tenho trabalhado com emails em HTML nos últimos dias e isso é desnecessário e extremamente doloroso. Estou interessado em iniciar um equivalente de estilo Bootstrap para emails em HTML; você estaria interessado em ajudar?
NoizWaves de

Respostas:

83

Se você quer dizer "Posso usar a apresentação estilística do Bootstrap em um e-mail?" então você pode, embora eu não conheça ninguém que tenha feito isso ainda. Você precisará recodificar tudo nas tabelas.

Se você está atrás de funcionalidade, depende de onde seus e-mails são visualizados. Se uma proporção significativa de seus usuários usa Outlook, Gmail, Yahoo ou Hotmail (e esses normalmente somam cerca de 75% dos clientes de e-mail), muitas das vantagens do Bootstrap não são possíveis. Mac Mail, iOS Mail e Gmail no Android são muito melhores em renderizar CSS, então se você está direcionando principalmente para dispositivos móveis, não é tão ruim.

  • JavaScript - completamente fora dos limites. Se você tentar, provavelmente irá direto para o inferno de e-mail (também conhecido como pasta de spam). Isso significa que LESS também está fora dos limites, embora você possa obviamente usar os estilos CSS resultantes, se desejar.
  • CSS inline é muito mais seguro de usar do que qualquer outro tipo de CSS (incorporado é possível, link é um não definitivo). Consultas de mídia são possíveis, então você pode ter algum tipo de design responsivo. No entanto, há uma longa lista de atributos CSS que não funcionam - essencialmente, o modelo de caixa não tem suporte em clientes de e-mail. Você precisa estruturar tudo com tabelas.
  • font-face- você só pode usar imagens externas. Todos os outros recursos externos (arquivos CSS, fontes) são excluídos.
  • glifos e sprites - por causa da implementação estranha de imagens de fundo (VML) do Outlook 2007, você não pode usar repetição ou posição de fundo.
  • pseudo-seletores não são possíveis - por exemplo :hover, os :activeestados não podem ser estilizados separadamente

Não são cargas de respostas sobre SO, e muitos outros links na internet em geral.

Dan Blows
fonte
1
O primeiro link está morto.
Houman
45

Peço desculpas por ressuscitar este tópico antigo, mas eu só queria que todos soubessem que existe um Bootstrap bem próximo, como o framework CSS, criado especificamente para estilo de e-mail. Aqui está o link: http://zurb.com/ink/

Espero que ajude alguém.

Edição ninja: desde então, foi renomeado para Foundation for Emailse o novo link é: https://foundation.zurb.com/emails.html

adamj
fonte
1
Todos os links quebrados.
Houman
16

Aqui estão algumas coisas que você não pode fazer com e-mail:

  • Inclui uma seção com estilos . O Apple Mail.app oferece suporte, mas o Gmail e o Hotmail não, por isso é proibido. O Hotmail oferece suporte a uma seção de estilo no corpo, mas o Gmail ainda não.
  • Link para uma folha de estilo externa. Não são muitos os clientes de e-mail que suportam isso, é melhor simplesmente esquecer.
  • Imagem de fundo / Posição de fundo. O Gmail também é o culpado por isso.
  • Limpe seus flutuadores . Gmail novamente.
  • Margin . Sim, sério, o Hotmail ignora as margens. Basicamente, qualquer posicionamento CSS não funciona.
  • Font-any . Provavelmente, o Eudora irá ignorar qualquer coisa que você tentar declarar com as fontes.

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

Mailchimp tem modelos de e-mail que você pode usar - aqui

Mais alguns recursos que devem ajudá-lo

Elvis D'Souza
fonte
1. Você pode meio que usar estilos - você não deve colocá-los na cabeça, mas pode incluí-los no corpo. 2. Fundos são adequados - use o atributo html de fundo em vez de CSS. O Outlook 2007/2010 requer sua própria solução ('VML'). 3. Você não pode usar flutuadores, muito menos eliminá-los. 4. Font-any-any - Eudora é um cliente minoritário. Obviamente, depende do seu cliente (veja a análise), mas font-sizeoferece maior flexibilidade a um custo muito baixo.
Dan Blows
10

Você pode usar este https://github.com/advancedrei/BootstrapForEmail para b-strapping seu e-mail.

Viktorminator
fonte
2
Obrigado por este link. Eu estava procurando em todos os lugares por algo assim! É uma pena que ele foi desenvolvido no Bootstrap 2.xe não está mais em produção.
oldo.nicho
2

Recentemente, passei algum tempo procurando construir modelos de email html, a melhor solução que encontrei foi usar este http://htmlemailboilerplate.com/ . Desde então, construí 3 modelos bastante complexos e eles funcionaram bem em vários clientes de email.

MattyHarris
fonte
1

Olá, Brian Armstrong, visite este link .

Este blog explica como integrar Rails com Bootstrap less (usando premailer-rails).

Se você está usando bootstrap sass, pode fazer o mesmo:

comece importando alguns arquivos sass do Bootstrap para 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';

e, em seguida, na <head>seção de visualização , adicione <%= stylesheet_link_tag "email" %>

Shurui Yang
fonte
0

A melhor abordagem que eu propus é usar as importações do Sass em uma base selecionada para puxar seus estilos de bootstrap (ou qualquer outro) para e-mails conforme necessário.

Primeiro, crie um novo arquivo pai scss semelhante email.scssao seu estilo de e-mail. Pode ser assim:

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

Em seguida, em seus modelos de email, referencie apenas o arquivo email.css compilado, que contém apenas os estilos de bootstrap selecionados referenciados e aninhados corretamente em seu email.scss.

Por exemplo, certos estilos de bootstrap entrarão em conflito com o estilo de tabela responsiva do Zurb. Para corrigir isso, você pode aninhar os estilos do bootstrap em uma classe pai ou outro seletor para chamar os estilos de tabela do bootstrap somente quando necessário.

Dessa forma, você tem a flexibilidade de obter classes apenas quando necessário. Você verá que eu uso, http://zurb.com/que é uma ótima biblioteca de e-mail responsiva para usar. Veja tambémhttp://zurb.com/ink/

Por último, use um pré-mailer como https://github.com/fphilipe/premailer-rails3mencionado acima para processar o estilo em css embutido, compilando estilos embutidos apenas para o que é usado naquele modelo de email específico. Por exemplo, para o pré-mailer, seu arquivo ruby ​​pode ser parecido com este para compilar um e-mail no estilo embutido.

    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

Espero que isto ajude! Tenho lutado para encontrar uma estrutura de modelagem de e-mail flexível no Pardot, Salesforce e na resposta automática e nos e-mails diários integrados do nosso produto.

Ryan Walton
fonte
0

O truque aqui é que você não deseja incluir todo o bootstrap. O problema é que os clientes de e-mail ignorarão as consultas da mídia e processarão todos os estilos de impressão que contêm muitas declarações importantes.

Em vez disso, você precisa incluir apenas as partes específicas do bootstrap de que precisa. Meu arquivo email.css.scss tem a seguinte aparência:

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