HTML code in the body of the e-mail

Asked

Viewed 14,478 times

4

I created an HTML code to send information to the company’s clients where I work, when I send the email to the accounts *@hotmail.com or for their professional accounts *empresa.com.br everything is displayed correctly, but when sent to an account *@gmail.com the body of the email with the HTML code is never displayed. My code looks like this:

<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>

If you have any tips

html email

2 answers

5

"Creating an HTML message is not the same as creating an HTML page, as many tags are often removed by email readers like Webmails and Outlook. There are some practices that should be followed so that the message does not appear distorted to its recipients.

But there is no guarantee that by following these practices the message will arrive without distortions to all providers, as these change their rules constantly mainly for safety reasons."

Not recommended tags most email services ignore these Tags <html> or <body>

  • <meta> Not suitable for HTML messages
  • <title> It is used only for HTML pages, avoid using in messages
  • <link> Avoid using it to reference css files, the right thing to do is to use inline css or put css classes inside the

<style> Some webmails like Gmail for example remove this tag

Here is the complete guide to Locaweb, Good HTML Email Practices: https://wiki.locaweb.com.br/pt-br/Boas_pr%C3%A1ticas_de_HTML_para_Email

Here’s an article in Portuguese with some tests done with CSS indexing in emails: https://tableless.com.br/email-marketing-testes-css-inliner-parte-2/
OBS: At the end of these articles have other links that might be of interest!

And here’s an updated list of which properties you should or shouldn’t use depending on the Email Client you want to focus on. https://www.campaignmonitor.com/css

See that for example the Gmail unaccepted <style> in the <body> in virtually no client. You can refer more on the link I passed above.

inserir a descrição da imagem aqui

0

You can check the compatibility of the tags with each Webmail, for this has some websites that help. Building html/css code for email is much more limited than for the browser.

Follow 2 sites that can help you in this respect:

Mailchimp

Campaignmonitor

Both are more css-oriented than html.

You can take as a basis a template that has good compatibility with most browsers.

Note: Gmail is one of the webmails with few compatible features.

Browser other questions tagged html email

You are not signed in. Login or sign up in order to post.