Os erros mais comuns de codificação de e-mail e como evitá-los

Apesar de todos os sinos e assobios do seu e-mail, erros de codificação podem arruiná-lo completamente. Apenas um link encurtado incorretamente ou formato de cor incorreto - e seu e-mail parecerá péssimo, especialmente se um usuário decidir verificá-lo por meio de um smartphone em vez de um cliente de e-mail da web ou mudar para um gadget com uma resolução de tela diferente.

Nesta postagem, falaremos sobre erros comuns de codificação de e-mail em HTML e compartilharemos alguns conselhos sobre como evitá-los.

De onde vêm os problemas de exibição de e-mail?

Para simplificar, há dois motivos possíveis para um usuário ver seu e-mail fora da maneira que você planejou. O primeiro está relacionado às características técnicas do dispositivo de seu usuário. O segundo é o cliente de e-mail, para ser mais preciso - seu mecanismo de renderização.

Características técnicas do dispositivo de um usuário

Existem pelo menos duas características técnicas de qualquer dispositivo que você deve levar em consideração:

1. Resolução da tela - o tamanho da tela, dado em pixels. Por exemplo, o iPhone X tem uma resolução de tela de 1125 × 2436 pixels. Se o seu e-mail contiver duas colunas de texto, 600 pixels cada coluna, não será exibido corretamente.
2. PPI, ou pixels por polegada - o número de pixels em uma polegada da tela. O PPI do iPhone X é 458. Imagine: você precisa adicionar um botão de ação ao seu e-mail. Se o botão tiver menos de 44 pontos, o que para o iPhone X significa 132 × 132 pixels, ocupará menos de um terço de polegada quadrada do espaço da tela e o usuário dificilmente conseguirá tocá-lo.

Mais uma coisa para se ter em mente: os usuários costumam girar seus dispositivos móveis, então seu e-mail deve ter uma aparência organizada e ter funcionalidade completa tanto na visualização retrato quanto paisagem.

Para evitar problemas associados às características técnicas do dispositivo do usuário, você deve usar um design de e-mail responsivo.

Primeiro, você deve adicionar consultas de mídia no head do seu e-mail. Por exemplo, a @media screen e a consulta (max-width: 600px) significa que o design do e-mail será otimizado se a largura da tela for inferior a 600 pixels. Se a largura da tela for maior que 600 pixels, o usuário verá a versão de largura fixa deste e-mail.

Em segundo lugar, você deve criar um e-mail na forma de uma tabela com células:

 <table>
<tr>
    <td> ... </td>
</tr>
</table>

Em seguida, você adiciona estilo para cada célula, por exemplo:

 <td> <img src = "http://somewebsite.com/someimage.jpg" width = "600" alt = ""> </td>

No entanto, mesmo tendo tomado essas medidas, você ainda pode ter problemas para exibir seus e-mails. A origem do problema é o mecanismo de renderização do cliente de e-mail.

Um cliente de e-mail

A segunda fonte de possíveis problemas de exibição é o cliente de e-mail que seus destinatários usam para abrir suas campanhas. A parte central de um cliente de e-mail é um mecanismo de renderização. Ele recebe um e-mail como um longo script de código, processa-o e dá saída da maneira que estamos acostumados a receber e-mails: texto compreensível, estruturado e formatado com imagens, links e outras mídias.

Dê uma olhada no exemplo abaixo. É um pedaço de código de um e-mail promocional - como o mecanismo de renderização do Gmail o vê. Se este e-mail foi exibido assim para um cliente em potencial, ele dificilmente cortará o código e entenderá que existe um código promocional com 40% de desconto.

Cada cliente de e-mail possui seu próprio mecanismo de renderização, o que significa que o mesmo e-mail, aberto por meio de diferentes clientes de e-mail, pode ter uma aparência totalmente diferente.

Aqui está uma lista dos clientes de e-mail mais populares em todo o mundo. Obviamente, seus destinatários usam um ou até vários deles para abrir os e-mails que você envia.

Todos esses clientes de e-mail têm algumas peculiaridades que você deve levar em consideração ao codificar e-mails em HTML.

Por exemplo, o Apple Mail para iOS não oferece suporte a:

• propriedade CSS de inline-size ;
• @media (orientation) consulta de mídia;
• links de âncora;
• Formatos de imagem HDR, PPM e SVG e muito mais.

O Gmail oferece suporte a várias propriedades CSS e consultas de mídia, além de:

• box-shadow, text-shadow, e algumas outras propriedades CSS;
• consulta de mídia @media (prefers-color-scheme) e muito mais.

Erros comuns de codificação de e-mail e como evitá-los

O melhor conselho geral para evitar erros de codificação de e-mail é limitar seu inventário a códigos suportados pela maioria dos clientes de e-mail, não importa a idade de suas versões. Em palavras simples, para voltar atrás e codificar como se fosse 1999. Por exemplo, é amplamente recomendado usar:

• CSS2 em vez de CSS3,
• HTML4 em vez de HTML5,
• cor em vez de imagens de fundo,
• table-layout vez de <div> ,
• CSS inline em vez de conjuntos de estilo ou blocos <style> .

Acredita-se que essa abordagem evite a maioria dos problemas com a exibição de e-mails. Mas vamos dar uma olhada em alguns erros de codificação específicos que podem arruinar seu e-mail e tentar encontrar soluções para eles.

Sem versão em texto simples

Problemas potenciais. Alguns clientes de e-mail, como Outlook e Gmail, podem definir seu e-mail como spam se ele não tiver uma versão em texto simples. Além disso, às vezes os clientes de e-mail têm problemas para renderizar o código HTML. Por causa disso, os emails em HTML podem ser exibidos incorretamente, enquanto os emails em texto simples sempre têm a mesma aparência.

Prevenção. Adicione uma versão em texto simples ao seu e-mail. Felizmente, a maioria dos provedores de serviços de e-mail o adiciona automaticamente.

Você pode implementar e-mails de texto simples em sua estratégia de marketing por e-mail. Em primeiro lugar, esses e-mails parecem mais pessoais e, portanto, podem aumentar o nível de sua comunicação com os assinantes. Além disso, algumas pessoas preferem ir direto ao ponto do e-mail, e um layout colorido as desanima.

Usando JavaScript, ActiveX, Flash e outros do tipo

Problemas potenciais. A maioria dos clientes de e-mail não oferece suporte a essas linguagens, estruturas e plug-ins, portanto, uma parte do seu e-mail não será renderizada e seus assinantes não verão nada além de um espaço em branco. Além disso, o e-mail pode ser banido por software antivírus.

Prevenção. Mantenha as linguagens que você usa para codificar e-mails em HTML e CSS. Se você precisar adicionar algum vídeo ou áudio, carregue-o em um site e forneça um link para ele.

Veja como o NiftyImages apresenta as novas características do produto: a empresa escolheu uma sequência de imagens, embora pudesse ser um vídeo explicativo.

Muitos redirecionamentos

Problemas potenciais. Os redirecionamentos, embora necessários para análises, podem fazer mais mal do que bem ao seu e-mail. Por exemplo, eles tornam o tempo de carregamento de uma página da web significativamente mais longo. Então, existe a possibilidade de que o navegador do usuário bloqueie os redirecionamentos - assim, a URL ficará inacessível.

Prevenção. Tente evitar redirecionamentos. Mas se você ainda tiver que usá-los, verifique quanto tempo leva para carregar uma URL de destino - teste seu e-mail antes de lançar a campanha inteira. Considere a experiência de seus assinantes: se eles estão dispostos a esperar o carregamento da URL ou não.

Links encurtados

Problemas potenciais. Links encurtados colocam seus e-mails em risco de acabar na pasta de spam. O problema é que, em links encurtados, o URL de destino não é claro. Em palavras simples, pode levar a qualquer lugar. Naturalmente, hackers e spammers se aproveitam disso.

Prevenção. Não use links encurtados. Se o seu objetivo é fazer com que seu e-mail tenha uma aparência organizada, sem URLs longos, é melhor usar a seguinte tag HTML: <a href="URL">...</a> . Você pode inserir qualquer URL aqui, não importa o tamanho.

Se você ainda está ansioso por links encurtados, encurte seus próprios URLs em vez de usar ferramentas de terceiros. Pelo menos examine as listas negras de redutores de link com antecedência.

Tamanho grande do arquivo do corpo do e-mail

Problemas potenciais. Tanto os clientes de e-mail quanto os provedores de serviços de e-mail têm limites de tamanho do corpo do e-mail, pois são projetados para transferir volumes relativamente pequenos de informações. Se você não se enquadrar nesses limites, seu e-mail pode ser cortado - seu final ficará oculto.

Dê uma olhada no boletim informativo de uma gravadora. Quando aberto pelo Gmail, é cortado.

Para ver sua versão completa, o assinante precisa tocar em um link.

Um arquivo de corpo de email grande também pode causar problemas de entrega. Além disso, devido ao grande tamanho, o e-mail pode ser considerado uma ameaça à segurança pelo software antivírus do usuário.

Prevenção. Verifique os limites de tamanho do corpo do e-mail do seu provedor de serviços de e-mail e dos clientes de e-mail que seus assinantes usam. Por exemplo, o Google reivindica um limite de tamanho do corpo do e-mail de 200 KB. Mas é amplamente recomendado limitar seus e-mails a 100 KB para atender aos requisitos da maioria dos clientes de e-mail. Na verdade, o e-mail do exemplo acima tem um tamanho de 136 KB.

Muitas fontes e cores

Problemas potenciais. Devido às diferenças entre os clientes de e-mail, nem todas as fontes e cores podem ser exibidas corretamente. Além disso, nem todas as fontes e cores combinam bem umas com as outras - então você corre o risco de criar um design de e-mail fraco.

Você também deve ter em mente que os dispositivos dos seus assinantes têm configurações de tela diferentes - como brilho, por exemplo. E enquanto você tenta tornar seu e-mail mais vívido, os usuários podem sofrer com essa profusão de cores.

Este é um exemplo questionável de design de e-mail: cada bloco tem suas próprias cores; isso distrai o usuário das informações mais importantes.

Prevenção . Escolha fontes amigáveis ​​para e-mail, como Arial, Comic Sans MS, Courier New, Times New Roman ou Verdana: elas são suportadas pelos clientes de e-mail mais populares. O tamanho da fonte do texto não deve ser inferior a 12-13 px; caso contrário, o usuário terá que ampliar seu e-mail ou forçar os olhos.

Quanto às cores, você não deve usar mais do que duas: uma para o bloco de texto geral e outra para destacar coisas importantes, bem como para links e botões. Certifique-se de que as cores escolhidas correspondam ao fundo e tenham uma boa aparência se o usuário alternar para o modo escuro.

Copiar o código HTML do modelo de e-mail de um editor de texto ou site

Problemas potenciais. Se você usar o Microsoft Word ou algo do tipo para criar texto para o seu e-mail e apenas copiá-lo, você corre o risco de pegar alguma formatação desnecessária, o que pode estragar o layout do seu e-mail. E se você copiar imagens ou algumas partes do texto de um site, elementos JavaScript ou Flash podem ser adicionados ao seu e-mail.

Prevenção. Para codificar um e-mail, use editores de texto que não adicionam sua própria formatação, como o Notepad para Windows ou TextEdit para Mac. Existem também algumas ferramentas online que podem limpar sua formatação, como TextCleanr. Você também pode usar uma ferramenta HTML Cleaner, que permite criar um e-mail em um editor amigável e verificar o código ao mesmo tempo.

Usando códigos de cores HEX de três dígitos

Problemas potenciais. Embora os formatos de cores de três e seis dígitos devam ser equivalentes, às vezes os clientes de e-mail processam um formato de três dígitos de uma maneira ligeiramente diferente. Por exemplo, com o Gmail, você corre o risco de ficar com o roxo em vez do preto que planejou: color: #000 transforma em color: #500050 .

Prevenção . Como regra geral, mantenha o formato de cores de seis dígitos e certifique-se de usá-lo em todo o e-mail.

Anexos

Problemas potenciais. Normalmente, spammers e hackers anexam alguns arquivos a seus e-mails. Se você adicionar um anexo, ele pode ser considerado uma ameaça à segurança.

Prevenção. Forneça um link para uma página de carregamento de arquivo em vez de adicionar o arquivo diretamente no e-mail.

Aqui está um exemplo de como você pode conceder aos usuários acesso ao arquivo que você prometeu. Preste atenção em como o link é designado: deve ser uma parte clicável de texto compreensível para que o usuário saiba o que vai acontecer quando tocar no link.

Texto alternativo ausente

Problemas potenciais . Alguns usuários desabilitam o download de imagens em seus navegadores. Se eles receberem um e-mail, incluindo imagens sem texto alternativo, eles verão apenas espaços em branco em vez de imagens e não entenderão o objetivo do e-mail.

Funciona da mesma forma quando a conexão de Internet de alguém é muito baixa para fazer o download das imagens com rapidez. O texto alternativo ajuda a resolver esse problema de uma maneira: quando o download das imagens dá errado, o usuário pode ver um texto.

Prevenção. Adicione um atributo alt a todas as imagens que você usa. Certifique-se de fazer isso corretamente - adicionando-o a uma tag img : <img alt="text"> . Limite o texto alternativo a 125 caracteres, incluindo espaços. Normalmente é suficiente adicionar apenas algumas palavras que descrevem a imagem com precisão. Se você tiver algum espaço restante, você pode adicionar algum contexto a esta descrição.

Dê uma olhada em um trecho de um e-mail da Sephora.

Se você verificar o código deste e-mail, poderá encontrar um CTA como o texto alternativo da imagem. Mesmo que os usuários não vejam a imagem, eles ainda entenderão o que a marca está oferecendo.

Layout apenas de imagem

Problemas potenciais. Se o seu e-mail consistir apenas em imagens e não tiver nenhum texto, você pode ter problemas com capacidade de entrega, exibição e muito mais. Por exemplo, se um usuário bloquear o download de uma imagem, ele não verá literalmente nada em seu e-mail. Em segundo lugar, muitas imagens aumentam o tamanho do corpo do e-mail, e os clientes de e-mail provavelmente o cortarão. Terceiro, um usuário não conseguirá encontrar seu e-mail em uma pasta por meio da pesquisa por palavra.

Prevenção. Ao criar um e-mail, combine texto e imagens. Não se esqueça de adicionar uma versão em texto simples do e-mail e um texto alternativo para as imagens; leve em consideração os outros conselhos que demos acima.

Dê uma olhada neste e-mail de Ecwid. Possui um design responsivo que inclui o layout da tabela e consultas de mídia, como max-width: 570px . O e-mail combina diferentes tipos de conteúdo: uma imagem colorida e cativante e um texto. O formato de cor de seis dígitos é usado, por exemplo, color:#979797 ou color:#4A4A4A . Não há muitas imagens no e-mail, então o tamanho do corpo não é muito grande. Além do mais, não encontre links encurtados nem redirecionamentos no e-mail. No geral, este e-mail atende à maioria das recomendações fornecidas acima.

Assim, demos uma olhada nos erros mais comuns de codificação de e-mail em HTML. Aplique nosso conselho e não se esqueça de testar seus e-mails antes de enviar: use pelo menos três clientes de e-mail populares para abrir seu e-mail; se possível, verifique-o também em diferentes dispositivos. Os emuladores também serão úteis.

Mais uma maneira de evitar erros de codificação de e-mail

Há uma verdade: você não cometerá erros de codificação HTML se não codificar. Felizmente, o design de e-mail sem código está esperando por você com SendPulse.

Com nosso editor intuitivo de arrastar e soltar, já impedimos você de cometer erros de codificação de e-mail. Basta adicionar imagens, texto ou vídeo ao seu e-mail, definir as fontes e cores de acordo com o estilo da sua marca e adicionar links às suas páginas de mídia social.

Para tornar tudo ainda mais simples, você pode escolher um dos nossos modelos de e-mail gratuitos. Todos os e-mails criados com SendPulse são responsivos, por isso terão uma boa aparência, independentemente do dispositivo que o usuário escolher para abri-los.

Lista de verificação para evitar erros comuns de codificação de e-mail em HTML

Abaixo você encontrará as principais regras sobre como evitar erros comuns de codificação de e-mail em HTML. Seguindo essas regras, você pode evitar problemas com capacidade de entrega e exibição de seus e-mails.

• Adicione uma versão em texto simples aos seus e-mails.
• Não use JavaScript, ActiveX, Flash ou outros do gênero. Se você precisar adicionar algum vídeo ou áudio, carregue-o em um site e forneça um link para ele.
• Tente evitar redirecionamentos para não aumentar o tempo de carregamento de uma página da web.
• Não use links encurtados - transforme um pedaço de texto ou uma imagem em um link usando HTML.
• Tente limitar o tamanho do corpo do e-mail a 100 KB - ou pelo menos verifique os limites do provedor de envio e dos clientes de e-mail que seus assinantes mais usam.
• Escolha fontes amigáveis ​​para e-mail, como Arial, Comic Sans MS, Courier New, Times New Roman ou Verdana.
• Tente não combinar mais de duas cores em um e-mail - caso contrário, poderá causar distração.
• Não copie texto e imagens para o seu e-mail de editores de texto como MS Word ou sites: há o risco de pegar alguma formatação desnecessária.
• Use um formato de cor de seis dígitos.
• Não anexe arquivos - em vez disso, forneça um link para uma página de carregamento de arquivo.
• Não se esqueça de adicionar texto alternativo às imagens.
• Não envie e-mails apenas com imagens - sempre adicione algum texto.
• Não se esqueça de testar um e-mail antes de iniciar uma campanha. Use pelo menos três clientes de e-mail e dispositivos diferentes.

E para não ter que pensar sobre tudo isso - comece a usar o SendPulse gratuitamente!