Usamos cookies para garantir que você tenha a melhor experiência possível em nosso site. Nosso objetivo é melhorar o desempenho e analisar como você interage com os nossos conteúdos. Ao continuar navegando, entendemos que você aceita os nossos termos e condições. Saiba mais
Ok, entendi!
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.