4

Ola,

Estou fazendo um HTML para enviar por email e, percebi que são ultimamente feitos em tabelas, mas, minha dúvida é se isso ainda é necessário.

Há algum tipo de riscos se eu não fizer em tabelas e o css não for inline, porque acabei de testar mandando para o Gmail e foi normalmente.

Obrigado

2 Respostas 2

8

O Gmail é apenas um cliente, existem vários como Thunderbird (Desktop), outlook.com (web), mail.yahoo.com (web) e cada sistema de email pode renderizar de uma forma, uma das maiores dores de cabeça dos desenvolvedores sem duvidas é o Outlook para Desktop.

Alguns detalhes importantes para obter uma melhor compatibilidade entre os clientes de e-mail:

  • É necessário usar estilos inline, assim:

    <div style="color: #fc0;">Exemplo</div>
    
  • No Outlook para desktop mesmo na versão mais recente não reconhece HTML5, então as tags devem ser as mesmas do HTML4.01, portanto ao invés de tags como section use somente <div>, <span>

  • No outlook também é necessário declarar o DOCTYPE para HTML4 como:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    

    ou:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    

    Lembre-se, para que ele funcione não pode haver nenhum tipo de espaço antes dele, nem quebras de linhas.

  • Ainda no Outlook para Desktop é necessário eventualmente usar a tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> para melhor compatibilidade, já que ele usa o mesmo motor de renderização do HTML

  • Emails as vezes desabilitam propriedades CSS como position:;, então preferencialmente nunca faça seus layouts baseados nisto

  • Não use propriedades CSS3 avançadas para criar algum efeito especifico, é provável que não funcione em todos clientes de email

  • Teste em todos cliente de email possíveis e se ainda tiver problemas, mesmo não sendo o indicado use sim tabelas.

Alguns detalhes:

Tabelas e HTML5 não são duas coisas diferentes, sites feitos em HTML4 não são feitos em tabelas, na verdade tabelas era uma maneira de fazer layouts um "pouco errada" desde o começo, o objetivo delas é serem usadas para dados tabulares, tanto no HTML4 quanto no HTML5.

HTML5 somente inseriu tags e atributos novos e removeram outras e uma maneira mais simplificada e "unificada" de se criar HTML, antes tínhamos vários DOCTYPES e ainda tínhamos o XHTML, agora é praticamente tudo uma coisa só. Hoje o HTML5 suporta várias coisas (para não dizer tudo) que o XHTML suportava, basicamente ele pode ser HTML ou XHTML, bastando ajustar o content-type

Dicas extras

  • Não use <link href="http://...">, estilos externos serão bloqueados
  • Não use <script>, isto não funciona de maneira alguma
  • Crie uma versão alternativa da mensagem em formato de texto, isto ajuda leitores de email mais obsoletos que não conseguem ler html ou as vezes servem de "fallback", PHPMailer e System.Net.Mail já fazem isto (creio eu), manualmente a estrutura seria algo como:

    Mime-Version: 1.0
    Date: Sat, 03 Dec 2016 12:46:10 +0000
    Content-Type: multipart/mixed;
     boundary="----=MAIN"
    Subject: teste
    
    ------=MAIN
    Content-Type: multipart/alternative;
     boundary="----=INNER"
    
    
    ------=INNER
    Content-Type: text/plain; charset="utf-8"
    Content-Transfer-Encoding: 7bit
    
    Olá, mundo!
    
    ------=INNER
    Content-Type: text/html; charset="utf-8"
    Content-Transfer-Encoding: 7bit
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <div style="color: #fc0;">
        Olá, <strong>mundo</strong>!
    </div>
    </body>
    </html>
    
    ------=MAIN--
    
4
  • Então minha referencia é baseada no leitor que irá ler o e-mail, seja Gmail, Outlook e etc.. Correto? Caso sim, esses caras dão algum documento explicando o que eles aceitam? 3/12/2016 às 2:48
  • Quis dizer referente o modo que eu devo escrever o HTML visando quem ira ler meu código, o recomendável seria fazer o mais adaptável possível para que não gere transtorno ao usuário. 3/12/2016 às 2:51
  • @PedroSoares isso mesmo, pois o usuário não saberá o motivo e ainda existem muitos usuários de outlook para Desktop, o melhor é simplificar o HTML, usar HTML4, não usar efeitos CSS avançados, não usar fontes externas de letras, terá que usar imagens, usar a meta-tag edge e não usar a propriedade position:; do CSS. 3/12/2016 às 2:54
  • 1
    Isso ai, agradeço pela resposta, garanto que irá ajudar muitas pessoas que vão querer tirar essa dúvida. 3/12/2016 às 2:56
0

Sem problema as pessoas normalmente fazem assim mais por compatibilidade, dependo do leitor de e-mail pode não ser compatível, alguns ainda mandam também a versão de texto puro caso o leitor não leia html.

lembrando só que o css como você falou precisa ser inline.

Deixo aqui também um link para complementar minha resposta

2
  • 1
    Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - From Review 6/12/2016 às 20:40
  • mas o link é totalmente dispensável, uma vez que eu coloquei apenas como fonte alternativa...
    – Danilo
    12/12/2016 às 19:16

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 .