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.
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.
![](https://eep.io/images/yzco4xsimv0y/47sqghckH0zWHexQiYfZ84/118bf7ce9212265c50ffde8811a19c31/MailChimp_Blog_Post_-23_graphic_-1.png?w=980&q=70)
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.
![](https://eep.io/images/yzco4xsimv0y/5GuXayeqXFrMu5uo40CxjC/576903d80a8b0047341242338a3f61c0/MailChimp_Blog_Post_-23_graphic_-2.png?w=980&q=70)
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.
![](https://eep.io/images/yzco4xsimv0y/3W4UzubCiaylyKrvuE21b6/e0e9095f4a6a7c5c4182772d365321d4/MailChimp_Blog_Post_-23_graphic_-3.png?w=980&q=70)
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](https://eep.io/images/yzco4xsimv0y/63TmwM2qRevdFVuGHawBnB/f708e5125e87a4d6174e28d60710b0e0/Image.png?w=1600&q=70)
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.