Guia de dicas de HTML
Especificações, design e montagem de peças HTML
Detalhes Gerais:
Ele usa códigos HTML compatíveis com a maioria dos usuários de e-mail. Os clientes de e-mail interpretam o código HTML de maneira diferente, por isso é importante enfatizar a importância da compatibilidade de código a ser usada. Evite usar elementos HTML ou CSS avançados, como JavaScript, animações e transições, pois eles podem não ser suportados em todos os clientes.
Os 4 pontos principais para começar a montar um HTML para Email Marketing são os seguintes:
Não inclua TAGS <SCRIPT> e, portanto, qualquer código JAVASCRIPT nele.
Ao incluir TAGS <ESTILO>, deve-se entender que cada provedor de e-mail pode entender os parâmetros de forma diferente. Portanto, se você decidir usar aulas, é recomendável testar em vários dispositivos antes de fazer o envio final.
Sugere-se evitar a programação do HTML seguindo as novas definições do HTML 5. Portanto, deve-se programar com base em TABELAS e preferencialmente evitando o uso de DIVS. Isso ocorre porque os mecanismos de muitos programas de email não reconhecem as novas ferramentas de desenvolvimento, e essa é a única maneira de tentar unificar os critérios para que a exibição seja relativamente uniforme usando um único modelo.
Recomenda-se que o peso máximo do HTML não ultrapasse 100kb, pois é o máximo renderizado pelo Gmail. Caso exceda esse peso, o Gmail corta o código e adiciona um link para ver a newsletter completa em uma nova janela.
Na plataforma ICOMMKT é recomendável carregar apenas a tabela que contém todo o HTML, sem as tags a seguir.
para. <html></html>
b. <head></head> nem tudo o que pode ser incluído nele como: título, metatags, etc.
c. <corpo></corpo>
Todos os estilos que você deseja atribuir aos objetos HTML devem ser declarados INLINE, ou seja, dentro do atributo style de cada objeto.
Sugere-se também que cada tabela, célula ou coluna tenha seu estilo especificado, pois dependendo de qual provedor de e-mail a peça está sendo visualizada, ela pode ou não herdar bem os estilos.
Recomenda-se as larguras e alturas nas tabelas, células ou colunas, além de especificá-lo no estilo, acrescentando-o com seu atributo largura=”largura” e altura “altura”.
Um exemplo disso seria o seguinte:
<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
<tr>
<td width="25" style="width:25px;" align="center" valign="top"></td>
<td width="550" style="width:550px;" align="center" valign="top"></td>
<td width="25" style="width:25px;" align="center" valign="top"></td>
</tr>
</table>Todos os textos devem estar dentro de um <span></span>, que deve incluir seu formato no estilo.
Levando em consideração o exemplo anterior, adicionar um texto seria o seguinte:
<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
<tr>
<td width="25" style="width:25px;" align="center" valign="top"></td>
<td width="550" style="width:550px;" valign="top">
<span style="font-family:Tahoma, Arial; font-size:18px;color:#000000; line-height:20px;">Titulo.<br /></span>
<span style="font-family:Tahoma, Arial; font-size:15px;color:#000000; line-height:17px;">Subtitulo.<br /></span>
<span style="font-family:Tahoma, Arial; font-size:12px;color:#000000; line-height:14px;">Comentario.<br /></span>
</td>
<td width="25" style="width:25px;" align="center" valign="top"></td>
</tr>
</table>Tipografia e design
O layout deve ser fácil de ler. Use um tamanho de fonte suficiente para que os destinatários possam ler o conteúdo sem precisar aplicar zoom. Use uma fonte clara e de tamanho legível, como Verdana, Arial ou qualquer uma das fontes do sistema, ou seja, uma que faça parte das instaladas por padrão na maioria dos computadores, que são:
arial,
negrito, negrito itálico, itálico
Comic Sans,
negrito, negrito itálico, itálico
Geórgia,
negrito, negrito itálico, itálico
Lucida Sans Unicode,
negrito, negrito itálico, itálico
Thomas,
negrito, negrito itálico, itálico
Times New Roman,
negrito, negrito itálico, itálico
catapulta,
negrito, negrito itálico, itálico
Verdana,
negrito, negrito itálico, itálico
Se uma fonte personalizada for usada, apenas as pessoas que a tiverem instalada em seu PC poderão vê-la corretamente. E ao adicioná-los no código, não use aspas simples ou duplas.
Recomendações de imagens
As imagens podem aprimorar o aspecto visual de seus e-mails, mas certifique-se de que sejam apropriadas e relevantes para o conteúdo do e-mail. Se possível, devem ter o atributo ALT completo com a descrição da imagem. Isso gera os seguintes benefícios:
Diminui a possibilidade de ser considerado spam
Garante que o usuário conheça o conteúdo da imagem, mesmo sem tê-la baixado.
Use imagens otimizadas para tamanho e peso para que o carregamento do e-mail seja rápido.
O peso máximo recomendado é de 1 MB, de forma a melhorar o tempo de carregamento do e-mail, mais especificamente quando a comunicação é aberta a partir de um telemóvel com 3G/4G.
GIFs animados podem ser usados: Além de tentar levar em conta o peso máximo recomendado, alguns provedores de e-mail, principalmente o aplicativo Outlook para desktop, não são capazes de exibi-los animados. Eles mostram o GIF, como uma imagem estática do primeiro quadro da animação, por isso é recomendável que, se o GIF animado contiver algo vital para a comunicação, ele seja armado no primeiro quadro animado para garantir a visualização em todos os dispositivos. é animado ou não.
Por outro lado, também é recomendável adicionar largura e altura à tag <IMG> (como atributos HTML e para estilo) para que o boletim mantenha
da mesma forma, mesmo que o usuário decida não baixar as imagens da notícia.
Da mesma forma, é importante adicionar o seguinte valor ao estilo do referido TAG: display: block. Isso permite resolver a incompatibilidade entre o Hotmail e o Chrome, para o qual são mostrados espaços em branco entre imagens consecutivas.
Células contendo imagens (<TD>) devem ter o seguinte parâmetro de estilo: line-height:1px. Isso permite resolver uma inconsistência entre determinados programas de correio e os navegadores a partir dos quais são acessados.
Um exemplo de uma tabela com uma imagem seria o seguinte:
<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
<tr>
<td width="25" style="width:25px;" align="center" valign="top"></td>
<td width="500" style="width:500px; line-height:1px;" valign="top">
<img src="RutaImagen.jpg" alt="Descripcion Imagen" width="500" height="150" style="width: 500px; height: 150px; display: block;" />
</td>
<td width="25" style="width:25px;" align="center" valign="top"></td>
</tr>
</table>Recomendações: Deve-se evitar o uso de IMAGE MAPS para garantir o correto funcionamento dos LINKS nas imagens, bem como o posterior monitoramento estatístico dentro da plataforma. Em vez disso, sugere-se cortar todas as imagens onde você deseja incorporar um LINK.
Boas práticas
Siga estas boas práticas para criar e-mails mais atraentes e eficazes para sua campanha de e-mail marketing.
Otimize para dispositivos móveis: A maioria das pessoas verifica seus e-mails no celular, por isso é importante que seus e-mails sejam otimizados para esses dispositivos. Use um design responsivo que se adapte ao tamanho da tela e certifique-se de que os botões e links sejam grandes o suficiente para serem facilmente tocados nas telas sensíveis ao toque.
Inclua uma opção de texto sem formatação: Inclua uma versão de texto sem formatação do e-mail para os destinatários que não podem ou não desejam ver a versão em HTML. Isso também pode ajudar a evitar que o e-mail seja filtrado como spam.
Teste em diferentes clientes de e-mail: Antes de enviar seu e-mail para a lista de destinatários, teste-o em diferentes clientes de e-mail para garantir que está correto. Teste em diferentes dispositivos e navegadores para garantir que o e-mail seja legível e tenha uma aparência consistente.
Consulte nosso artigo: Como criar Newsletter HTML
Atualizado em: 14/11/2023
Obrigado!