HTML code in the body of the email

Question

HTML code in the body of the email

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I have created an HTML code to send information to clients of the company where I work, when I send e-mail to *@hotmail.com accounts or to their professional accounts *empresa.com.br everything is displayed correctly, however when I send 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><divstyle="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

asked by anonymous 31.01.2018 / 11:58

2 answers

Chatbot in Python with NLTK Calculate difference between dates in days in R

score 2 · Answer 1

"Creating an HTML message is not the same as creating an HTML page, since many tags are often removed by e-mail readers such as Webmails and Outlook. There are some practices that must be followed so that the message does not appear distorted to its recipients. But there is no way to ensure that by following these practices the message will arrive without distortion for all providers, as they constantly change their rules mainly for security reasons. "

Tags not recommended Most e-mail services ignore these Tags <html> or <body>

<meta> Not suitable for HTML messages
<title> Used only for HTML pages, avoid using in messages
<link> Avoid using it to reference css files, it's okay to use inline css or put css classes inside

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

Here you have the complete Locaweb guide, HTML Good Practices for Email : #

Here is an article in Portuguese with some tests done with CSS indexing in emails: link
OBS: At the end of this articles they have other links that you may be interested in!

score 0 · Answer 2

You can check the compatibility of the tags with each webmail, so there are some sites that help. Building an html / css code for email is much more limited than for the browser.

Here are 2 sites that can help you with this:

MailChimp

CampaignMonitor

Both are geared more towards css than html.

You can build on a template that has good compatibility with most browsers.

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