Trabalhe Conosco
Central de Vendas
Atendimento WhatsApp0800 541 3300
Quem Somos
Soluções
WeSendImpressão
Clientes
Conteúdo
BlogMateriais Educativos
LGPD
Portal de Privacidade
Solicite contato comercial

Melhores práticas ao criar templates de e-mail com o WeSend Mail

O desenvolvimento do HTML para e-mail deve ser feito diferente do HTML para web propriamente dito, isso porque cada navegador e provedor de e-mail lê e interpreta de formas diferentes o arquivo.
27/2/2023

O desenvolvimento do HTML para e-mail deve ser feito diferente do HTML para web propriamente dito, isso porque cada navegador e provedor de e-mail lê e interpreta de formas diferentes o arquivo.

  • Por isso, siga nessa leitura para conferir as melhores práticas para a criação de templates HTML, com dicas e instruções simplificadas!

‍

Dimensão

Uma regra prática é manter a largura (width) do HTML em 600 pixels, desta forma evitamos que e-mails mais largos não sejam exibidos corretamente.

‍

Uso de tabelas

Alguns navegadores e provedores de e-mail não conseguem interpretar as divs, ou seja, a estruturação dos conteúdos do HTML. Por esse motivo, utilize as tabelas para essa finalidade, seguindo a estrutura padrão (table, tr, td), conforme o exemplo abaixo:

 

<table width="600"align="center">

      <tr>

           <td align="center">

               <font style="font-family:sans-serif; font-size:20px; color: #606060; text-align:justify;">

                             Hello World

                   </font>

           </td>

      </tr>

  </table>

 

Onde:

  • Table = declaração da tabela
  • Tr (table row) = linha da tabela
  • Td (table data) = conteúdo da célula da tabela, pode conter texto, imagens, parágrafos etc.

‍

Elementos inline

Diferentemente do HTML para web onde pode-se usar os elementos através de CSS, declarando e utilizando links no header, no HTML para e-mail deve-se declarar todos estilos e elementos inline, conforme exemplo abaixo:

‍

<font style= "font-family:sans-serif; font-size:20px; color: #606060; text-align:justify;">

                   Seu texto aqui

</font>

‍

Botões

Para a criação de botões como call to action, sugerimos a utilização de imagens, como mostrado no exemplo abaixo. Isso porque utilizando a função button no HTML o Outlook realiza a conversão para um link, de modo que não ficará exatamente como um botão.

  • Utilizando a função button:

‍

  • Utilizando uma imagem:

‍

‍

  • Definição do botão:

      <tr>

             <td align="center" bgcolor="#f5f5f5">

                    <a href="http://www.google.com.br" target="_blank">

                           <img src="botao_como_imagem.png" border="0" width="180" height="76" style=" display:block;">

                    </a>

          </td>

      </tr>

‍

Fontes

Provedores locais, como o Outlook, não reconhecem muitas das fontes existentes na web, então tente utilizar algumas das fontes padrão como: Arial, Calibri, Helvetica e Courier New. A fonte externa será automaticamente substituída por uma fonte padrão, geralmente Arial, quando o e-mail foi aberto pelo Outlook.

 

Background

Não utilize imagens como background (imagem de fundo), pois alguns dos provedores de e-mail não permitem a visualização da imagem. Utilize backgrounds com cores sólidas como elemento inline através do comando bgcolor + código hexadecimal.

‍

Melhor utilização:

‍

<table width="600" align="center" border="0" cellspacing="0" cellpadding="0">

    <tr>

         <td align="center" bgcolor="#f5f5f5" width="300" style="padding: 0 20px 0 20px;">

              <font style="font-family:sans-serif; font-size:30px; color: #606060; text-align:justify;">

                   Olá,

               </font>

               <font style="font-family:sans-serif; font-size:30px; color: #00a2e9;">

                   <b>Carlos</b>!

               </font>

         </td>

    </tr>

</table>

‍

Imagens

Utilizar imagens com no máximo 200 KB. Evite utilizar uma única imagem grande como conteúdo do e-mail, pois o e-mail poderá ser interpretado como SPAM e não ser entregue aos destinatários.

Formato sugerido para imagens:

  • Header (cabeçalho): 600 x 200 pixels
  • Footer (rodapé): 600 x 150 pixels

‍

Links

Sempre utilize a tag “<a href” para links, conforme o exemplo abaixo.

 

<a href="http://www.google.com.br"target="_blank">

                   Clique aqui

</a>

‍

Cada um dos pontos abordados é essencial na criação de templates e serve para que o material realmente proporcione uma boa experiência para o usuário que recebe a mensagem. Quanto mais funcional é a disposição do botão na tela, maior a chance de engajamento do destinatário.

  • Confira o template exclusivo que preparamos para servir de exemplo de utilização na hora de criar o seu HTML.
Clique aqui para fazer o download do template!

‍

Para edição do arquivo HTML, recomendamos o uso do aplicativo Brackets, disponível para download no site do fabricante.

‍

Gostou desse post? Acompanhe o nosso blog e fique por dentro das melhores práticas para potencializar os seus envios com o WeSend!

‍

‍‍

Quer saber mais sobre nossas soluções?

Preencha seus dados abaixo.
Solicite contato comercial
nossoS endereços
Compartilhe
Onde estamos
Sede: Berto Círio, 1450, São Luis | Canoas – RS
Alameda Santos, 1773, Sala 1303, Jardim Paulista | São Paulo – SP
Contato
(51) 3415 3300(51) 98455 33000800 541 3300ctd@ctd.com.brTrabalhe Conosco
CTD - TECNOLOGIA DIGITAL LTDA | 93.445.484/0001-63
Cadastre-se e receba novidades da CTD:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.