Ir para conteúdo principal

Olá! Está disponível uma avaliação gratuita dos planos Standard e Essentials. Comece grátis hoje mesmo.

Guia rápido para criar um email HTML com êxito

O HTML pode parecer um aspecto intimidador do marketing por e‑mail, mas não precisa ser. Saiba como aprimorar suas habilidades HTML para melhorar seus e‑mails de marketing.

HTML, ou linguagem de marcação de hipertexto, é o código utilizado para criar a estrutura básica de um site. Assim como o HTML permite personalizar completamente a aparência de um site, os emails em HTML oferecem mais controle sobre a estrutura de seus emails. Você pode alterar a aparência da fonte, personalizar o layout de seus e-mails e até incorporar gráficos e botões com o formato de e-mail HTML correto.

A dificuldade reside no fato de que criar e-mails em HTML não é tão simples quanto pode parecer. Seguir modelos de e-mail HTML pode ajudar, mas você ainda precisa ter certeza de que seus e-mails estão respondendo a resoluções diferentes e trabalhando com clientes de e-mail diferentes. Além disso, é importante não desanimar os leitores com tempos de carregamento excessivamente longos. Se você deseja revisar seus e-mails com HTML, aqui está um guia rápido de HTML para e-mails.

Como escrever e-mails HTML

Você pode estar se perguntando, como criar um email em HTML? Ler alguns guias sobre HTML básico pode ajudar, mas escrever emails em HTML é um pouco diferente de usar HTML para criar um site. A primeira coisa que você precisa fazer ao escrever um e-mail HTML é definir o DOCTYPE, que determina as regras de HTML e CSS que são seguidas ao ler HTML. No entanto, alguns clientes de email sobrescreverão o DOCTYPE e utilizarão seu próprio conjunto de regras para o HTML.

Em seguida, você encontrará a seção <head>, onde você coloca seu título e outras informações importantes sobre seu e-mail. No mínimo, sua tag principal deve incluir uma tag <title> dentro dela, que deve ser fechada com uma tag </title> . Você também pode usar uma meta tag para definir metadados dentro da seção <head>. Quando terminar esta seção, ela deverá ser fechada com </head>.

Tenha em mente que certas tags e elementos podem não funcionar com determinados provedores de email. Vários provedores de e-mail não permitem que você use a tag <style> no cabeçalho de um e-mail, enquanto o Gmail não permite a tag <style> no corpo de um e-mail. Também é importante seguir um guia de marketing por e-mail para as melhores práticas, pois alterar o layout de um e-mail não significa que o conteúdo seja bom.

Texto sem formatação vs HTML

Você pode ter ouvido muita discussão sobre emails em texto sem formatação versus emails em HTML, mas qual é a diferença real?

Os e-mails em texto sem formatação são o tipo mais simples de email que você pode enviar, pois incluem apenas texto sem formatação. Esses e-mails não contêm imagens, vídeos ou botões. Na verdade, todo o texto dentro de um e-mail de texto sem formatação normalmente aparece o mesmo, então não há personalização real com e-mails de texto sem formatação. O texto sem formatação é essencialmente o que você está trabalhando quando usa o Bloco de Notas, enquanto o HTML se assemelha mais ao que você está usando quando escreve no Microsoft Word ou em um editor rich text. No entanto, os e-mails de texto sem formatação ainda têm seu lugar no mundo moderno.

Os e-mails em HTML são escritos usando código de linguagem de marcação de hipertexto, o que permite implementar gráficos, adicionar botões e incorporar vídeos diretamente em seus emails. Você também pode usar etiquetas HTML para personalizar a aparência da fonte, quer você queira usar uma fonte diferente ou alterar a cor ou o tamanho da fonte que está usando. As etiquetas de cabeçalho, subscrito e sobrescrito permitem ainda mais personalização quando se trata da aparência do texto em um e-mail HTML.

Embora muitas pessoas não estejam familiarizadas com os e-mails HTML, os editores de what-you-see-is-what-you-get (WYSIWYG) que muitos clientes de e-mail usam oferecem recursos semelhantes. Assim como você pode tornar o texto em negrito, sublinhado ou italizado com o Gmail, você pode usar o HTML para personalizar a aparência de seus emails. A principal desvantagem desses editores WYSIWYG é que seus emails podem não ser exibidos da mesma forma em diferentes dispositivos e clientes de email. Dito isso, a maioria dos editores populares do WYSIWYG faz um bom trabalho se você quiser criar uma campanha sem aprender a codificar.

Melhores práticas HTML

Se você deseja garantir que está escrevendo e-mails em HTML de alta qualidade que sejam legíveis em vários dispositivos e clientes de e-mail, é importante manter-se atualizado com as melhores práticas. Aqui estão algumas práticas recomendadas de formato de e-mail HTML para ajudá-lo a encontrar o formato perfeito para sua campanha de e-mail.

Responsivo ao tamanho da tela

Em tempos mais simples, a maioria dos monitores de computador tinha uma resolução de 800x600, mas isso já faz muito tempo. Hoje em dia, temos smartphones, computadores, laptops e tablets capazes de funcionar com resoluções muito mais altas, e não podemos contar que diferentes dispositivos tenham a mesma proporção de tela.

O design responsivo significa que seus e-mails foram projetados para ter uma boa aparência, independentemente da resolução da tela em que estão sendo visualizados. Você não quer que parte do seu e-mail seja cortada porque não cabe na tela do usuário, mas também não quer que os gráficos e o texto sejam tão pequenos que sejam difíceis de ver. Você pode fazer isso configurando tabelas e imagens em larguras diferentes, dependendo do tamanho da tela em que estão sendo visualizadas. É útil testar minuciosamente seu layout de e-mail em HTML antes de enviá-lo para sua lista de e-mails.

Tempo de carregamento

Se um e-mail demorar muito para carregar, muitos leitores simplesmente desistirão e seguirão para o próximo e-mail. Você pode pensar que todo mundo tem um dispositivo rápido o suficiente e uma conexão à internet para carregar qualquer e-mail com facilidade, mas esse não é o caso de muitas pessoas. Para pessoas que estão usando um dispositivo mais antigo ou conectando-se à internet móvel, carregar um e-mail repleto de imagens, vídeos e outros conteúdos de mídia pode ser difícil.

Isso não significa que você não deve incluir elementos de mídia em seus e-mails, mas você precisa estar ciente dos tempos de carregamento e como eles afetam a taxa de rejeição dos seus e-mails. Criar e-mails HTML é tanto sobre manter tempos de carregamento mínimos quanto sobre fazer seus e-mails parecerem bonitos.

Diferença entre provedores de e-mail

Um dos maiores problemas enfrentados pelos desenvolvedores web é que diferentes navegadores da web podem renderizar o mesmo código HTML e CSS de maneira diferente. O mesmo acontece quando se trata de marketing por e-mail HTML e clientes de e-mail diferentes. Embora seu e-mail possa parecer ótimo quando você o está projetando, alguns clientes de e-mail podem não exibir imagens ou vídeos adequadamente, ou podem não oferecer suporte para a fonte que você está usando.

Quando você estiver projetando um e-mail HTML, certifique-se de projetar com diferentes provedores de e-mail em mente. Esta não é apenas uma prática recomendada para escrever formatos de e-mail HTML, é uma das melhores práticas de e-mail mais importantes a seguir no marketing por e-mail em geral.

Ajuda a facilitar para os assinantes fornecerem feedback sobre os e-mails que receberam. Se você está recebendo muitos feedbacks sobre imagens que não carregam ou e-mails que não são exibidos corretamente, considere fazer ajustes no layout HTML para encontrar algo que funcione melhor.

Design para dispositivos móveis

No passado, a maioria dos usuários de e-mail acessava seus e-mails por meio de computadores, então você não precisava se preocupar tanto com o design para diferentes dispositivos. Agora que a navegação móvel ultrapassou o uso de computadores desktop e laptops, projetar seus e-mails para dispositivos móveis é mais importante do que nunca. Você precisa garantir que seus e-mails tenham uma boa aparência, sejam eles visualizados em um tablet, laptop ou smartphone.

Se você não estiver projetando o formato HTML dos seus e-mails para funcionar em dispositivos móveis, estará perdendo uma parte significativa do seu público para o marketing por e-mail.

Teste!

Depois de achar que o formato HTML do seu e-mail está pronto para ação, é hora de testá-lo para ver por si mesmo. Você pode tentar enviar seus e-mails para várias contas que estão conectadas a diferentes clientes de e-mail, ou pode utilizar ferramentas de teste de e-mail para simplificar o processo. O importante é que você teste completamente seus e-mails antes de enviá-los para sua lista de discussão.

Além de testar, você pode pedir feedback aos leitores sobre o formato dos seus e-mails. Se você receber várias reclamações sobre uma imagem que não está sendo exibida corretamente ou sobre um e-mail que demora muito para carregar, isso é um sinal de que você precisa fazer um trabalho melhor no design dos seus e-mails HTML para aquele cliente específico.

HTML é mais fácil de aprender do que você pensa

A maioria das pessoas se acostumou a usar editores WYSIWYG, mas um bom formato de email em HTML ainda tem relevância no mundo moderno do marketing por email. Embora o design de e-mails em HTML possa parecer um pouco complicado inicialmente, fica muito mais simples quando você domina os conceitos básicos. O uso de ferramentas de teste e a elaboração com foco em dispositivos móveis podem até mesmo ajudar a evitar a criação de e-mails que não funcionam com certos dispositivos ou provedores de e-mail.

Se você deseja eliminar o incômodo de criar e-mails HTML que funcionam na sua lista de e-mails, o Mailchimp pode ajudar. Com modelos HTML para e-mails e toneladas de ótimas ferramentas para ajudar no marketing e automação de e-mails, o Mailchimp é a sua solução multifuncional para marketing por e-mail. Se a sua campanha de marketing por e-mail precisar de um impulso, experimente o Mailchimp hoje mesmo.

Laptop screen showcasing 'Unlocking Advanced Email Marketing' Checklist

Receba o guia de marketing por e-mail avançado do Mailchimp

Expanda seu negócio com o conhecimento certo e estratégias para aprimorar seus e-mails, capturar a atenção do público e transformar leads em clientes fiéis.

Preencha o formulário abaixo para receber a lista de verificação

Compartilhar este artigo