O Bootstrap é o framework por trás de um número enorme de sites e aplicativos web, e cedo ou tarde todos eles precisam enviar e-mails: uma mensagem de boas-vindas após o cadastro, um link de redefinição de senha, uma confirmação de pedido. Nossos modelos de e-mail gratuitos para projetos Bootstrap te dão designs que combinam com a aparência do seu site e usam o tipo de marcação que as caixas de entrada realmente entendem.
Por Que Modelos de E-mail para Bootstrap Precisam de um HTML Diferente
Uma página Bootstrap depende de flexbox, media queries e de uma folha de estilos carregada de um arquivo ou de uma CDN. Os clientes de e-mail tratam essas três coisas de forma muito diferente dos navegadores:
- Sem folhas de estilos vinculadas. Gmail, Outlook.com e Yahoo Mail ignoram um arquivo CSS vinculado no e-mail, então as classes do Bootstrap chegam à caixa de entrada sem nenhum estilo por trás.
- Sem flexbox no Outlook clássico. O Outlook para Windows exibe e-mails com o mecanismo de renderização do Word, que não suporta flexbox, floats nem posicionamento, então um grid do Bootstrap se desmancha ali.
- Pouco espaço para CSS. O Gmail limita o tamanho de um bloco de estilos em um e-mail, e a folha de estilos completa do Bootstrap é muitas vezes maior que esse limite.
É por isso que desenvolvedores de e-mail montam layouts com tabelas e estilos inline. O Blocks faz esse trabalho por você: os modelos são montados a partir de estruturas baseadas em tabelas, com os estilos escritos nos próprios elementos, incluem correções para o Outlook e se adaptam a telas de celular nos clientes de e-mail que dão suporte a isso.
Usando um Modelo do Blocks em um Projeto Bootstrap
- Escolha um modelo e ajuste as cores, as fontes e o logotipo para que o e-mail pareça parte do seu site.
- Exporte o resultado como um arquivo HTML ou um arquivo ZIP com as imagens, ou copie o código direto do editor.
- Salve o HTML no seu projeto como um modelo de e-mail e substitua nomes, links e detalhes do pedido pelas variáveis que o seu mecanismo de templates usa.
- Envie pelo seu servidor SMTP ou por uma API de e-mail como Amazon SES ou SendGrid, e adicione uma versão em texto simples para leitores cujos aplicativos de e-mail não exibem HTML.
Se você prefere escrever e-mails à mão com classes no estilo do Bootstrap, existe um projeto open source separado chamado Bootstrap Email que compila esse tipo de marcação em tabelas e estilos inline. Ele é desenvolvido de forma independente da equipe do Bootstrap e precisa de uma etapa de build na sua máquina. O Blocks segue o caminho visual: você cria o design no navegador e recebe o HTML pronto na hora.
E-mails que Todo Site Bootstrap Envia
- E-mails de boas-vindas que recebem novos usuários e indicam o primeiro passo no seu produto.
- E-mails de redefinição de senha com um único botão claro e uma nota curta sobre quando o link expira.
- Confirmações de pedido para lojas e sites de reservas que precisam de um resumo confiável da compra.
- E-mails de onboarding para aplicativos web que apresentam os recursos uma mensagem por vez.
Dicas para Modelos de E-mail em Projetos Web
- Hospede as imagens publicamente. URLs absolutas de imagens carregam em qualquer caixa de entrada, enquanto caminhos relativos copiados do seu app quebram.
- Teste em mais de um cliente. Confira pelo menos Gmail, Apple Mail e Outlook para Windows antes de lançar um novo modelo.
- Dê nomes claros às variáveis. Placeholders legíveis mostram ao próximo desenvolvedor exatamente qual valor vai para onde.
- Mantenha os modelos no repositório. Guarde o HTML dos e-mails junto do código que os envia, para que toda alteração passe por revisão.
Para se aprofundar nas escolhas de marcação, leia nossa comparação de frameworks de e-mail e o guia sobre e-mails em HTML versus texto simples. Se o seu app envia muitos e-mails de sistema, o panorama dos serviços de e-mail transacional vai ajudar você a escolher um provedor.
Consiga Modelos de E-mail Gratuitos para Projetos Bootstrap
Escolha um modelo acima, estilize-o para combinar com o seu tema Bootstrap e exporte um HTML limpo para o seu app. Se a sua equipe também envia newsletters, o mesmo design pode ser exportado direto para o Mailchimp ou o HubSpot.