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.

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

‍

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!

‍

‍‍