14

Estou na fase de desenvolvimento de um email de boas vindas. Gostaria de saber qual a prática mais correta e utilizada de adicionar o style no meu email.

Minha dúvida é: devo utilizar CSS inline, incorporado ou externo?

Analisei que muitos sites usam a forma inline, mas estou preocupado com manutenção futuramente.

4
  • 1
    @Renan Sim, mas tipo como que é usado o CSS, inline, incorporado ou externo? Commented 26/06/2017 às 14:48
  • Gostaria de saber qual a melhor prática, mas não sei o porque ja negativaram a pergunta... Commented 26/06/2017 às 14:49
  • 1
    Muitos serviços de email não carregam folhas externas e incorporadas. Pode até utilizar, mas é por sua conta em risco. Commented 26/06/2017 às 14:58
  • @Renan Então vou estilizar inline mesmo, obrigado. Commented 26/06/2017 às 15:09

2 Respostas 2

15

Usar CSS linkado é mais facil de alterares cores e background caso mantenha a mesma extrutura.

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

No entanto no caso do e-mail evite usar CSS externo.

  1. Alguns clientes de e-mail não aceitam. Tanto no HEAD, quanto no BODY.** Utilize CSS inline (direto no elemento), porém não abuse de propriedades como position, float e etc…
  2. Todas as imagens devem ter display:block, assim evita que o Gmail e o Hotmail acrescentem um espaçamento entre elas.
  3. Não use style=”color: #fff”; Use style=”color: #ffffff”;
  4. CSS3 / HTML5: Apresentam uma taxa muito baixa de compatibilidade, de forma que não são recomendados.
  5. Finalmente lembre-se de evitar o uso de divs se seu template tem várias colunas, neste caso, as tabelas são a ferramenta mais confiável.
  6. Não deve fazer construir o seu template todo em imagens pois alguns programas de email bloqueiam a visualização dessas imagens.

inserir a descrição da imagem aqui

Fonte

Observe a seguinte tabela que mostra o que é mais aconselhado usar nos diversos clientes de e-mail

inserir a descrição da imagem aqui

Consulte ainda este site irá mostrar as tags que deve ou não usar nos diversos clientes de e-mail

Na página da google poderá ainda encontrar esta informação bastante útil sobre o funcionamento do gmail

Existem ferramentas que convertem o codigo CSS linkado em CSS inline dou o seguinte exemplo

0
10

Veja este artigo https://tableless.com.br/email-marketing-testes-css-inliner-parte-2/.

Basicamente, ele diz que se você usar as tag <style>...</style> no header ou body do seu e-mail, os GMail da vida vão ignorá-los.

Ou seja, para que todos os mailclient possam apresentar seu e-mail corretamente, você deve usar o estilo incorporado à tag.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .