Mais de 9 práticas recomendadas de e-mail HTML

Quando você cria um e-mail com uma ferramenta de arrastar e soltar ou uma ferramenta baseada em módulo, você está basicamente criando um e-mail em HTML.

Existem dois tipos principais de e-mail que os usuários podem enviar e receber: e-mails de texto simples (exatamente o que parece - qualquer e-mail contendo apenas texto antigo e sem formatação) e e -mails HTML, que têm formato e estilo com HTML e CSS embutido .

E-mails HTML são realmente muito fáceis de identificar - a maioria dos e-mails de marketing multimídia que parecem um pouco elegantes em sua caixa de entrada são provavelmente e-mails HTML.

Como um profissional de marketing por e-mail, você provavelmente já fez alguns e-mails em HTML e percebeu seus benefícios em comparação com e-mails de texto simples. Dito isso, emails HTML não são necessariamente melhores do que emails de texto simples, apenas que ambos os tipos podem ser adequados para diferentes situações e fazer parte de uma estratégia de email marketing bem-sucedida.

Este artigo mostrará as mais de 10 práticas recomendadas de e-mail HTML , independentemente do seu nível de experiência e conhecimento em codificação, e compartilhará alguns recursos gratuitos para e-mails HTML que você pode usar. Soa bem? Então vamos mergulhar.

O que é um e-mail HTML?

Um e-mail HTML (HyperText Markup Language) é um e-mail que usa um tipo de HTML para fornecer marcação semântica e recursos de formatação que não são possíveis ao usar um e-mail de texto simples. Os códigos HTML ajudam os profissionais de marketing a criar e-mails impressionantes que podem gerar mais vendas e aumentar o envolvimento do assinante.

Em um email HTML, os textos são ajustados na largura da superfície de visualização em vez de quebrar após 78 caracteres de cada linha. Além disso, os emails em HTML permitem a inserção de cores, tabelas, gráficos, diagramas e até fórmulas matemáticas como imagens.

Por que os emails HTML são importantes?

Os e-mails HTML apareceram pela primeira vez no início dos anos 2000, e os profissionais de marketing estavam em um estado de caos. Na época, nem todos os clientes de e-mail podiam renderizar esse formato de e-mail corretamente para e-mails em HTML, e os dispositivos móveis certamente não tinham os recursos de renderização adequados para e-mails complicados.

Mas, desde então, o design responsivo em geral e os emails mais sofisticados só aumentaram. Com elementos visuais, interativos e de mídia ricos, os e-mails em HTML têm tudo, desde GIFs animados, conteúdo lindamente formatado até CTAs que chamam a atenção.

Na verdade, 64% das pessoas respondem que preferem e-mails em HTML em vez de e-mails de texto simples. O alto índice de aprovação se deve aos seguintes benefícios:

• Conversões mais altas : os e-mails em HTML permitem que os departamentos de marketing ajustem suas mensagens para que se destaquem CTAs, forneçam links relevantes e facilitem o envolvimento dos destinatários com os e-mails.

• Melhor design : e-mails em HTML permitem que os profissionais de marketing por e-mail personalizem modelos com cores e logotipos de suas marcas. Além disso, eles podem incluir CTAs e imagens clicáveis ​​em seus e-mails. Todos esses recursos ajudam a melhorar o design e o desempenho dos e-mails de marketing.

• Rastreamento : Ter um software de marketing por e-mail como o AVADA Email Marketing ajuda a gerenciar e-mails em HTML e fornece aos usuários análises de campanha para avaliar o nível de envolvimento do assinante e identificar mensagens que funcionam bem com o público-alvo.

• Maior envolvimento : os recursos visuais geralmente enviam informações com mais rapidez e eficiência do que as palavras, portanto, os e-mails em HTML permitem que os profissionais de marketing por e-mail transmitam melhor as mensagens. Como resultado, as marcas podem demonstrar melhor seus produtos com ângulos mais atraentes e ganhar mais ações dos consumidores.

Como criar um email HTML fantástico?

A boa notícia é que você não precisa aprender a codificar para criar um email em HTML.

Uma ferramenta como o AVADA Email Marketing, criada para criar e enviar e-mails automatizados, oferecerá modelos de e-mail HTML prontos para uso e pré-formatados que ajudam você a criar e-mails incríveis sem precisar acessar os códigos de back-end.

Conforme você faz alterações no editor de e-mail AVADA arrastando e soltando, as alterações serão automaticamente codificadas na campanha de e-mail final. Ter uma ferramenta de criação de e-mail como essa é uma opção ideal se sua equipe não tiver um designer de e-mail, mas você ainda quiser ter e-mails com aparência profissional.

Se você tem algum conhecimento de HTML ou deseja mais controle sobre o código de seus e-mails, também pode importar arquivos HTML diretamente para o AVADA Email Marketing para uso como modelos de e-mail personalizados. Se você souber como ajustar um arquivo HTML, terá uma maneira direta de adaptar muitos modelos de e-mail de sua escolha ao aplicativo.

Como o processo de criar um email HTML do zero pode ser bastante desafiador, recomendo que você trabalhe com um desenvolvedor ou encontre um modelo de email HTML pré-fabricado. Ou, mais simplesmente, basta usar o AVADA Email Marketing, ele possui praticamente todos os modelos de e-mail necessários para uma loja de comércio eletrônico, como transacional, cross-sell e upsell, confirmação de pedido, etc.

Mais de 9 práticas recomendadas de e-mail HTML

Com tudo isso dito, pode ser realmente difícil criar um email HTML que tenha uma aparência e a taxa de conversão que você deseja. Portanto, nesta seção, tirarei as suposições da imagem de design de e-mail para você - aqui estão as melhores práticas de e-mail em HTML para todos os diferentes elementos de uma campanha de e-mail para criar e-mails lindos.

Independentemente do método que você deseja usar ao criar e-mails em HTML, essas práticas recomendadas ajudarão você a melhorar o design, a experiência do usuário e a taxa de entrega de suas campanhas de e-mail.

1. Design para diferentes dispositivos e tamanhos de tela

41,9% de todas as aberturas de e-mail são contabilizadas por dispositivos de smartphones, já que tablets e smartphones tornaram a verificação da caixa de entrada tão fácil para todos agora. Isso significa que, se você deseja criar um e-mail interativo, não pode mais ignorar a ideia de criar e-mails para mais dispositivos.

Um dos fatores mais óbvios e maiores na aparência do seu e-mail HTML é o tamanho da tela do dispositivo em que os usuários estão usando. Um e-mail que parece bem formatado e fantástico em um desktop pode ser facilmente renderizado em um emaranhado de texto e imagens sobrepostos e ilegíveis se não for criado adequadamente para a tela de um smartphone.

Para garantir que seu e-mail HTML tenha a aparência desejada em vários tamanhos de tela, a melhor coisa a fazer é manter seu layout fácil de entender e simples. À medida que você começa a adicionar elementos mais complexos, como várias colunas e imagens flutuantes, seus formatos de e-mail podem se tornar mais difíceis de traduzir para diferentes tamanhos de tela.

Se você decidir criar um layout mais complexo, certifique-se de estar abordando ativamente como os elementos serão reorganizados para acomodar diferentes tamanhos de tela. Por exemplo, se o seu e-mail aparecer como várias colunas no desktop, essa mesma estrutura pode não funcionar no celular - portanto, você precisará usar uma consulta de mídia para determinar como os elementos de e-mail são exibidos em diferentes tamanhos de tela.

Lembre-se, criar emails HTML responsivos realmente vai além do formato e da estrutura da sua mensagem. Pense na experiência geral do usuário e como seus destinatários perceberão seus e-mails em diferentes dispositivos. Certifique-se de que sua escolha de fonte seja tão fácil de ler no celular quanto no desktop e use botões ou CTAs compatíveis com celular em vez de texto de hiperlink (você já tentou pressionar uma pequena linha de texto com hiperlink em dispositivos móveis? Não é fácil) .

Com o AVADA Email Marketing, você pode visualizar seu email HTML em tempo real tanto no desktop quanto no celular, oferecendo uma visão geral completa do design da sua mensagem.

2. Controle o tempo de carregamento dos emails HTML

Quanto tempo leva para carregar seus e-mails pode muito bem ser a diferença entre ganhar um novo cliente e perder um destinatário frustrado. Embora possa ser tentador usar todas as diferentes opções de estilo dentro de um aplicativo e incorporar todas as imagens que os emails HTML podem conter, não importa se seus emails demoram muito para carregar.

À medida que você cria seu e-mail em HTML, esteja ciente de quanto tempo seus e-mails levarão para carregar - especialmente se as pessoas estiverem abrindo sua mensagem no metrô matinal com uma conexão de dados fraca. Aqui estão algumas pequenas coisas que você pode fazer que o ajudarão a melhorar o tempo de carregamento de seus emails em HTML.

• Use fontes padrão da Web: as fontes personalizadas são fantásticas para apimentar suas páginas de destino, mas podem ser uma camada estranha de complexidade ao serem adicionadas a um e-mail. Os clientes de e-mail lidam com elementos de estilo de fonte de maneira diferente, portanto, você deve usar fontes da Web padrão para garantir que o cliente de e-mail que seus assinantes usa ofereça suporte a essa fonte específica.

• Não use muitas imagens : menos imagens podem realmente reforçar a mensagem que você deseja enviar aos clientes. Além disso, lembre-se de usar um compressor de imagem para reduzir o tamanho do arquivo de imagem de e-mail o máximo possível. A maioria dos compressores de imagem não compromete a qualidade da imagem enquanto reduz significativamente o tamanho, para que você não prejudique o visual do seu e-mail com essa etapa extra.

• Use um minifier HTML : Um minifier de arquivo HTML remove automaticamente códigos desnecessários em um arquivo HTML. Elementos extras e repetitivos serão editados, mas a renderização real do seu email HTML permanecerá a mesma. Cada linha de código afeta o tempo de carregamento do email, portanto, reserve um tempo para remover o código indesejado para ter um efeito positivo no tempo de carregamento.

Existem muitas fontes estilísticas, fáceis de usar e seguras para a Web para você escolher, como Arial, Tahoma, Verdana, Trebuchet MS, Lucida, Courier, Georgia, Times New Roman, Palatino e muito mais. Essas fontes vêm pré-carregadas na maioria dos computadores e são renderizadas de forma consistente em mais de 90% do tempo.

3. Certifique-se de que seu estilo pode funcionar em diferentes clientes de e-mail

Outro grande fator que influencia fortemente a forma como seus emails HTML aparecem nas caixas de entrada dos assinantes é qual cliente de email eles estão usando para abrir suas mensagens. Os clientes de e-mail carregam e-mails de maneira um pouco diferente, portanto, um e-mail com uma determinada aparência no Gmail pode ter uma aparência bem diferente no Outlook.

Felizmente, se você entender como os clientes de e-mail mais populares renderizam elementos HTML e CSS específicos, poderá criar uma experiência bastante consistente nas caixas de entrada de todos os usuários. É tudo uma questão de saber evitar tags não suportadas e adaptar-se de acordo. Você pode ler este guia abrangente do Campaign Monitor para entender como os clientes de e-mail mais populares (incluindo Gmail e Outlook) suportam e renderizam diferentes elementos de estilo CSS de e-mail.

4. Planeje os problemas do usuário final

O cliente de e-mail e o tamanho da tela não são os únicos fatores que podem afetar a forma como seus e-mails HTML são renderizados nas caixas de entrada dos assinantes. Elementos como a versão do cliente de e-mail, sistema operacional do usuário, configurações exclusivas do usuário, software de segurança e ativar ou não o carregamento automático de imagens podem afetar o desempenho de seus e-mails.

Como você provavelmente pode adivinhar olhando para esta lista de fatores, é muito desafiador resolver todos eles (toda vez que você envia uma campanha de e-mail) e você provavelmente jogaria seu computador do outro lado da sala se ousasse tentar.

Mas você não precisa ficar completamente frustrado diante desses problemas - você só precisa fazer um pequeno planejamento antes de enviar seus e-mails em HTML.

Primeiro, considere criar uma versão de página da Web do seu e-mail em HTML .

Isso funciona como um botão à prova de falhas para o seu e-mail. Se por algum motivo (como um dos muitos fatores discutidos acima) seu e-mail lindamente projetado aparecer como uma bagunça absoluta quando um destinatário o abrir, pelo menos eles terão a opção de visualizar o e-mail como uma página da web e ver a mensagem como você pretendia que fosse.

Como os navegadores da Web podem renderizar elementos de estilo de forma muito mais consistente do que os clientes de e-mail, você poderá ter mais controle sobre a aparência da mensagem de e-mail da versão da página da Web. No AVADA Email Marketing, há sempre um link de hipertexto no canto superior direito de um e-mail como uma opção que gerará uma versão da página da web automaticamente.

Em segundo lugar, você deve criar uma versão em texto simples do seu email HTML.

Uma versão de texto simples é o que parece – outra versão do seu email HTML que só é renderizado em texto completamente simples. Ter uma versão em texto simples dos e-mails em HTML é essencial porque alguns clientes de e-mail ou configurações de usuário optam por não ou não podem carregar códigos HTML.

Se este for o caso, o cliente poderá renderizar uma versão alternativa de texto simples do seu e-mail HTML para os usuários. Se não existir, o servidor de e-mail do destinatário pode sinalizar que seus e-mails podem ser spam ou potencialmente perigosos

Um software de marketing por e-mail como o AVADA Email Marketing fornecerá automaticamente uma versão em texto simples para o seu e-mail se o serviço de e-mail do destinatário exigir. Se você estiver criando um email HTML do zero, precisará criar uma mensagem MIMe com várias partes - que é um email que contém uma versão HTML e uma versão em texto simples do mesmo email. Esse processo requer conhecimento avançado de codificação, portanto, você deve trabalhar com um desenvolvedor nele.

Em terceiro lugar, certifique-se de que seus e-mails HTML ainda façam sentido, mesmo que as imagens não carreguem.

Alguns usuários desativam o carregamento automático de imagens, o que significa que seu email será renderizado sem imagens quando os usuários o abrirem. Por esse motivo, não confie apenas em imagens para transmitir o significado da sua mensagem de e-mail e sempre inclua texto alternativo nas imagens que você tem dentro do e-mail. O texto alternativo aparecerá mesmo quando as imagens não aparecerem, para que seus destinatários possam ter uma ideia geral do que os visuais do e-mail representam.

5. Otimize o texto HTML

O texto HTML é bom para áreas com muitas cópias para garantir que ele seja legível e nítido em todas as caixas de entrada – dispositivos móveis e computadores (o texto HTML será dimensionado dependendo da largura do dispositivo). Lembre-se de que o tamanho mínimo de fonte HTML legível para a maioria das caixas de entrada de smartphones é 13px.

Ao incluir um código de cupom, você pode digitá-lo como texto HTML para que o destinatário possa copiá-lo e colá-lo facilmente. Isso também ajudará a exibir corretamente quando as imagens estiverem desativadas em sua caixa de entrada. Se você precisar usar uma cópia como imagem, envie um e-mail de teste para si mesmo antes de clicar em enviar para garantir que ele seja renderizado corretamente.

Embora não relacionado, recomendo que você evite JavaScript, Flash e HTML/CSS complexo ao criar um email em HTML. JavaScript e Flash não são suportados em muitos clientes de e-mail diferentes. Certifique-se de que seu e-mail esteja escrito em CSS2 em vez de CSS3, HTML4 em vez de HTML5 e CSS embutido em vez de

6. Conheça o tamanho dos seus elementos

Como mencionado, o tamanho mínimo legível da fonte HTML para dispositivos móveis geralmente é 13px. Existem vários outros elementos em seu email HTML em que você precisa considerar o tamanho. Desde os tamanhos de imagem adequados até a limitação de caracteres da linha de assunto - você precisa prestar atenção aos tamanhos desses elementos.

A largura ideal de e-mail HTML é de 600px, você mantém essa largura para que seu e-mail seja renderizado corretamente em todos os navegadores e dispositivos. Além disso, mantenha suas imagens nítidas, mas otimizadas para o tempo de carregamento, com uma resolução de 72 dpi. Sua linha de assunto e pré-cabeçalho devem ter menos de 65 caracteres para que caibam em qualquer navegador, cliente de e-mail ou dispositivo que os assinantes estejam usando.

7. Use o botão direito

Botões de CTA (call to action) atraentes e de alto contraste são o que permite que os assinantes saibam para clicar e concluir a ação que você deseja deles. Seus botões de CTA devem ser uma parte essencial do seu design HTML. Certifique-se de que eles sejam fáceis de ver (pelo menos 40 px por 40 px) e diga aos destinatários qual é o próximo passo, seja comprar, ler, revisar, aprender etc.

Tente alternar as palavras em seus botões de CTA. "Saiba mais" e "Compre agora" podem funcionar bem, mas você pode brincar com opções mais criativas para mostrar alguma personalidade e atrair os usuários para clicar.

Ao tornar os botões de CTA HTML em vez de imagens, eles se tornam à prova de balas para maximizar os cliques. Isso ocorre porque eles ainda serão exibidos quando as imagens forem desativadas na caixa de entrada do usuário. Você só precisa ter certeza de que está usando uma fonte segura para a Web ou do Google.

Se você deseja criar botões baseados em imagem, projete de modo que, quando eles encolherem para dispositivos móveis, os botões ainda sejam grandes o suficiente para serem legíveis e clicáveis.

Embora o vermelho seja frequentemente considerado a melhor cor para um botão de CTA, não é obrigatório. O que importa no final é o design geral do e-mail. Certifique-se de que você tenha espaço em branco suficiente ao redor do botão de chamada para ação e que as cores do e-mail estejam bem misturadas. Deixe seus botões de CTA contrastarem com todo o design de e-mail para serem realmente atraentes.

8. Projete bem a navegação

No celular, você deve mover a navegação para a parte inferior do e-mail e empilhá-la bem acima do rodapé para economizar espaço enquanto mantém as guias clicáveis. Muitas empresas optam por remover a navegação no cabeçalho da versão móvel de um e-mail, você também pode tentar.

9. Mantenha a imagem de fundo simples

Se você quiser usar uma imagem de plano de fundo em seu e-mail HTML, tente mantê-lo simples. Usar um layout de grade simples é a melhor abordagem, e você não deve incluir gráficos complicados que possam distrair os leitores da cópia no topo.

Como as imagens de plano de fundo não podem ser exibidas quando os usuários desativam as imagens para e-mails, não permita que incluam informações importantes relacionadas ao objetivo de sua mensagem. Lembre-se de escrever um texto alternativo que forneça contexto se suas imagens estiverem bloqueadas. Além disso, use uma cor de fundo de backup complementar para exibir as imagens.

10. Conduza o teste de seus e-mails HTML

Por fim, você deve testar seus e-mails em HTML em cada estágio de desenvolvimento para garantir que funcionem em diferentes clientes de e-mail, tipos de dispositivos e sistemas operacionais. Não espere até o dia em que você apertar o botão de envio para testar seu e-mail - testar enquanto você está trabalhando é a melhor maneira de identificar inconsistências entre diferentes clientes de e-mail e garantir a experiência mais consistente possível para seus assinantes.

O AVADA Email Marketing oferece testes no aplicativo e testes de envio no construtor de e-mail para tornar seu processo o mais tranquilo possível. Se você estiver criando seus e-mails do zero, poderá usar uma ferramenta como HTML Email Check ou PreviewMyEmail para ter uma ideia melhor de como seu e-mail HTML aparecerá em diferentes clientes e dispositivos de e-mail.

Crie e-mails HTML gratuitos hoje

Os e-mails em HTML são uma maneira envolvente e eficiente de compartilhar as mensagens da sua empresa e manter os assinantes voltando para mais. Com a introdução e as práticas recomendadas neste artigo, você estará no caminho certo para criar belos e-mails em HTML sem precisar escrever uma única linha de código.

O AVADA Email Marketing pode ser o seu começo perfeito, oferecendo uma seleção de modelos de email HTML gratuitos que podem proporcionar uma experiência de usuário suave e responsiva. Você pode adicionar facilmente imagens, texto e botões em um construtor de e-mail intuitivo de arrastar e soltar e pode ter certeza de que seus designs HTML serão totalmente exibidos em qualquer dispositivo.

Experimente o AVADA Email Marketing clicando na imagem abaixo!