4

Criei um código HTML para mandar informativos para os clientes da empresa onde trabalho, quando envio os e-mail para para as contas *@hotmail.com ou para suas contas profissionais *empresa.com.br tudo é exibido corretamente, porém quando mando para uma conta *@gmail.com nunca é exibido o corpo do e-mail com o código HTML. Meu código é assim:

<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste Email</title>
    <style>
        hr {
            border: 0; height: 1px; 
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }
        table 
        {
            font-family: arial, sans-serif;border-collapse: collapse;
            width:100%;
        }
        th, td 
        {
            border: 1px solid #dddddd;
            padding: 3px;
        }
        tr:nth-child(even) 
        {
            background-color: #dddddd;
        }
    </style> 
</head>
    <body>
        <a href="http://www.hss.com.br/" target="_blank">
            <img alt="Logo HSS Informática" title="Logo HSS informática" style="margin-left:5%; float:left"  src="http://www.hss.com.br/images/logo_oficial.png"></img>
        </a>
        <div style="margin-left:15%;margin-right:15%;text-align:center; margin-top:1%">
            <p style="font-size:30px;font-family:Verdana"><b><I>INFORMATIVO DE SUPRIMENTOS</I></b></p>
        </div>
        <div style="background-color:#4682B4;text-align:center;height:55px;margin-left:5%;margin-right:5%;margin-top:5px">
            <p style="font-size:25px; color:white; font-family:Verdana;height:7px"><B>NOME CLIENTE</B></p>
            <p style="font-size:15px; color:white; font-family:Verdana;">Dados cliente</p>
        <table>
            <tr>
                <th width="33%">PEDIDO: <i>Nº PEDIDO</i></th>
                <th width="33%">SUPRIMENTOS SOLICITADOS</th>
                <th width="33%">PREVISÃO DE ENTREGA: <i>dd/MM/yyyy</i></th>
            </tr>
        </table>
        <table>
            <tr>
                <th width="33%" align="center">Suprimento</th>
                <th width="33%" align="center">Quantidade</th>
                <th width="33%" align="center">Impressoras compatíveis</th>
            </tr>
            <tr>
                <td align="center">Modelo 01</td>
                <td align="center">01</td>
                <td align="center">MX511</td>
            </tr>
            <tr>
                <td align="center">Modelo 02</td>
                <td align="center">02</td>
                <td align="center">MX611</td>
            </tr>
            <tr>
                <td align="center">Modelo 03</td>
                <td align="center">03</td>
                <td align="center">MX611</td>
            </tr>
        </table>
        <br>
        <hr>
        <div style="background-color:#4682B4;text-align:center;height:25px;">
            <p style="font-size:18px; color:white; font-family:Verdana;height:7px">SUPRIMENTOS AGUARDANDO RETORNO</p>
        <br>
        <table>
            <tr>
                <th width="50%">Modelo de Suprimento</th>
                <th width="50%">Quantidade</th>
            </tr>
            <tr>
                <td align="center">Modelo 03</td>
                <td align="center">05</td>
            </tr>
            <tr>
                <td align="center">Modelo 04</td>
                <td align="center">04</td>
            </tr>
        </table>
        <br>
        <hr>
        <p style="text-align:center; font-family:Verdana; font-size:12px;">Esse <b>email foi enviado automaticamente</b> pelo sistema,<b> não é necessário respondê-lo.</b><br> Em caso de dúvidas responda este email ou entre em contato pelo telefone <b><i>(51)3594-7561</i></b>.</p>
        <div style="background-color:#4682B4;text-align:center;height:22px;">
            <p style="font-size:15px; color:white; font-family:Verdana;height:7px">HSS Assessoria em Informática - Rua 25 de Julho, 917 - Rio Branco - Novo Hamburgo / RS</p>
        </div>
        </div>
        </div>
    </body>
</html> 

Se tiverem alguma dica

1

2 Respostas 2

5

"Criar uma mensagem HTML não é o mesmo que criar uma página HTML, pois muitas tags costumam ser removidas pelos leitores de e-mail como Webmails e Outlook. Existem algumas práticas que devem ser seguidas para que a mensagem não apareça distorcida para seus destinatários.

Porém não há como garantir que ao seguir essas práticas a mensagem chegará sem distorções para todos os provedores, pois estes alteram suas regras constantemente principalmente por motivo de segurança."

Tags não recomendadas a maioria dos serviços de e-mail ignora essas Tags <html> ou <body>

  • <meta> Não serve para mensagens em HTML
  • <title> É utilizado somente para páginas HTML, evite usar em mensagens
  • <link> Evite usar ela para referenciar arquivos de css, o certo é usar css inline ou colocar as classes de css dentro do

<style> Alguns webmails como o Gmail por exemplo, removem esta tag

Aqui tem o guia completo da Locaweb, Boas práticas de HTML para Email: https://wiki.locaweb.com.br/pt-br/Boas_pr%C3%A1ticas_de_HTML_para_Email

Aqui tem um artigo em português com alguns testes feitos com indexação de CSS nos emails: https://tableless.com.br/email-marketing-testes-css-inliner-parte-2/
OBS: No final desse artigos têm outros links que pode tem interessar!

E aqui tem uma lista atualizada de quais propriedades vc deve ou não usar dependendo do Cliente de Email que vc quer focar. https://www.campaignmonitor.com/css

Veja que por exemplo o GMail não aceita <style> no <body> em praticamente nenhum cliente. Vc pode consultar mais no link que passei acima.

inserir a descrição da imagem aqui

0

Você pode verificar a compatibilidade das tags com cada webmail, para isso tem alguns sites que auxiliam. Construir um código html/css para email é muito mais limitado do que para o browser.

Segue 2 sites que podem te ajudar neste respeito:

MailChimp

CampaignMonitor

Ambos são voltados mais para o css do que o html.

Você pode tomar como base um template que tem uma boa compatibilidade com a maioria dos browsers.

Obs.: Gmail é um dos webmails com poucos recursos compatíveis.

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 .